css學習的第三天第四天

2021-10-04 10:19:34 字數 1041 閱讀 7203

盒模型:margin

1.margin是長在元素之外的

2.margin是控制同級元素的位置關係

3.margin不會對盒子本身的寬高造成影響

4.可以給單一方向新增margin值

5.margin設定值的方法和padding一樣

6.margin可以設定負值

7.margin常出現的bug:margin-top傳遞問題,子元素會傳遞給父元素;上下相關的兩個元素之間margin會疊加;後者的解決辦法單獨新增乙個margin;前者解決辦法給父元素新增邊框,bfc規範,給元素新增浮動

8.margin:0 auto;讓當前元素在父元素左右居中

總結:1.html結構

2.css語法和樣式表,選擇符

3.css屬性:文字屬性,列表屬性,邊框屬性,背景屬性,浮動。

4.css盒模型

空白空間的處理:white-space:per/per-wrap/per-line/inherit繼承/nowrap不讓文字換行;

溢位屬性:overflow屬性:auto當內容超出時顯示滾動條,沒有超出時沒有滾動條/scroll新增滾動條/hidden溢位隱藏/inherit繼承;可以單獨的針對xy軸設定,overflow-x:hidden;overflow-y:hidden;

text-overflow:ellipsis省略號顯示/clip沒有省略號

控制單行文字,溢位省略號顯示:

1.white-space:nowrap;不換行

2.overflow:hidden;溢位的內容隱藏.

3.text-overflow:ellipsis;溢位的內容省略號顯示

4.容器要有寬度

整站製作:通欄加版心

CSS學習第三天

定位布局 相對定位 相對於自身的位置進行偏移position需要搭配left right top bottom position relative 絕對定位 相對於有position屬性的父元素定位,如果父元素沒有position屬性就會再向上找父元素,最後一直找到body元素 position a...

第四天學習

一 權重關係 樣式表的權重關係 內聯樣式表的權重最大!內部和外部樣式的權重,和書寫的前後順序有關!放在後面的會把放在前面的樣式覆蓋掉 網頁的布局 先做上下排版 再做左右排版 從外往裡 二 css語法 選擇符選擇符 選擇符就是給標籤起名字 型別選擇符 標籤選擇符 所有的html標籤可以直接當做選擇符進...

react學習第四天(三)

react列表渲染 將列表的內容拼裝成陣列放置到模板中 import react from react import reactdom from react dom let arr 小明 小黑 小白 let arrhtml 小明 li 小黑 li 小白 li 將資料拼裝成陣列jsx物件 class ...