一.line-height的補充

1.行高的單位

1.數字+px;

2.數字+em;假如字型大小是16px,n那麼2em=2*16px;

3.數字+%,假如字型大小是16px,n那麼200%=2*16px;

4.數字,直接是位元組的倍數

2.與font-連寫

1.寫在font下面,  當行高寫在font下面的時候,會被覆蓋

2.寫在font裡面,font:style weight size/height family;

3.寫在font下面,避免被覆蓋

二.margin的兩種情況

1.margin的合併現象

上下排序:盒子的margin會合並,取值為較大的那一個

左右排序:不會合並,值為兩個盒子的margin值相加

2.margin的塌陷現象

當兩個盒子為巢狀關係即父子關係時,只設置子盒子的margin-top時,父盒子也會下移

解決塌陷的5種方法

1.給父盒子新增一個,border-top,四周也可以,只要有top的就可以

2.給父盒子新增一個,padding-top

3.給父盒子增加一個overflow:hidden,處罰BFC

4.給父盒子新增浮動,

5.轉化為行內塊元素

三.浮動

作用:讓原來垂直佈局的盒子變成水平佈局(一個在左一個在右)最開始應用為圖文環繞

程式碼:

1.左浮動;float:left

2.右浮動;float:right

1.浮動的特點

標準流:瀏覽器預設擺放盒子的順序(從上到下,從左到右)

1.浮動的元素會脫離標準流,脫標,  飄起來了,在標準流中不佔位置

2.浮動的元素會覆蓋在標準流中的元素之上,浮動元素比標準元素高出半個級別 

3.浮動找浮動,不浮動找不浮動

4.浮動的元素只會影響到下面的元素,浮動的元素受到邊界的影響

5.浮動的元素有特殊的顯示效果,一行顯示多個,可以設定寬高

2.清除浮動

浮動帶來的影響:相互巢狀的元素,如果相互巢狀的元素,父元素是由子元素撐開的,如果子元素浮動,那麼父元素就會沒有顯示

清除浮動的方法

1.額外標籤法,在父元素的最後新增一個塊級元素,然後給新增的塊級元素新增一個清除浮動的核心程式碼,clear:both;

2.給父元素設定一個,overflow:hidden;

3.偽元素清除法

偽元素,由css設定的元素::before在...之前  ::after在...之後

程式碼:

.clear::after{

content:"";

clear:both;

display:block;

下面的為補充程式碼

height:0px;

line-height:0px;

visibility：hidden:元素隱藏

}

4.簡單粗暴,直接設定父元素的高度

四.行內元素的margin和padding失效的特殊情況

水平方向:padding和margin是有效果的

垂直方向:padding和margin是沒有效果的