1.關於盒子的大小

預設情況下,盒子可見框的大小由內容區.內邊框和邊框共同決定

box-sizing用來設定盒子尺寸的計算方式(設定width和height的作用)

content-box:寬高用來設定內容區的大小

border-box:寬度和高度用來設定盒子可見框的大小

會自動調整內容區的空間(邊框邊距不變)以適應設定的可見框大小

2.輪廓陰影和圓角

(1.)輪廓: outline用來設定輪廓線和border用法一樣,

與border不同的是outline不會影響佈局,雖然也會使可見框變大,但會覆蓋其他元素,不會擠掉其他元素.

(2.)陰影:box-shadow,預設為當前盒子大小,會被蓋住,所以需要偏移量使其顯示

如box-shadow:10px 10px black(顏色);

第一個值設定水平偏移量,正值向右移動;

第二個值設定垂直偏移量,正值向下移動;

第三個值設定模糊半徑,越大越模糊

第四個值設定陰影顏色(RGB可以順帶設定透明);

四個值都不能省略

(3.)圓角:border-radious

border-top-radious之類...可以單獨設定四個角的樣式

例如border-top-left-radious:xxpx xxpx;

如果是一個值會把水平垂直半徑都設定為xxpx然後畫一個圓;

如果設定兩個值第一個設定水平半徑,第二個設定垂直方向半徑,如果兩個值不一樣,會設定出橢圓效果;

border-radious:... .... ...;

四個值 左上.右上.右下.左下

三個值 左上 右上左下 右下

兩個值 左上右下 右上左下

如果是設定border-radious:50%,那麼它就會變成一個圓形

3.浮動可以使一個元素向其父元素的左側或者右側移動

使用float屬性來設定元素的浮動

可選值:

none預設值,元素不浮動

left元素向左浮動

right嚴肅向右浮動

注意:a.設定float屬性後,水平佈局的等式便不需要強制成立;

b.設定浮動後便會從文件流中脫離,不再佔用文件的位置

c.所以元素下邊的還在文件流中的元素會自動向上

d.浮動元素預設不會從父元素中移出,即父元素是它的邊界

e.浮動元素不會蓋住其他的浮動元素,不會超過它前邊的其他浮動元素

f.浮動元素上面是非浮動元素,則無法上移

g.浮動元素無法超過它浮動的兄弟元素,最多一樣高

4.浮動的特點

(1)浮動元素不會蓋住文字,文字會環繞在浮動元素周圍,形成文字環繞效果

(2)元素脫離文件流後會發生一些現象

a.塊元素:不再獨佔一行,寬度和高度都被內容撐開

b.行內元素:可以手動設定寬高,預設寬高被內容撐開

總結;塊元素和行內元素脫離文件流後都變成了一種型別的元素.

它預設寬高被內容撐開,不獨佔一行,但可以手動設定寬高,與行內塊元素相似.

5.簡單的佈局

頭部標籤header,主體標籤main(只能有一個main標籤),底部footer

6.高度塌陷和BFC

高度塌陷:當父元素沒有設定固定寬高時而且子元素設定浮動後(此時父元素預設高度由子元素撐開),會脫離文件流造成父元素的高度丟失.

高度塌陷後下面的元素自動上移,影響頁面佈局,所以需要進行處理

這時可以用BFC(塊級格式化環境):

BFC的特點:(1.)開啟BFC的元素不會被浮動元素所覆蓋

(2.)開啟BFC的元素子元素和父元素的外邊距不會重疊

(3.)被設定BFC的元素可以在不固定高度的情況下包裹住浮動的子元素

開啟BFC的方式有很多,但各有各的缺點

最推薦的是設定overflow:auto或者hiddden;

7.