CSS中盒子模型的總結
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子,也就是一個裝內容的容器。每個矩形都由元素的內容、內邊距(padding)、邊框(border)和外邊距(margin)組成。
內邊距(padding): 內容與邊框之間的距離
外邊距(margin): 盒子與盒子之間的距離
邊框border
1、border-width: 設定邊框寬度 2、border-style: 設定邊框樣式 none 沒有邊框 solid 實線 dotted 點線 dashed 虛線 3、border-color: 設定邊框顏色 4、borde具體屬性設定: border-top-color:green; 5、border屬性聯寫 改變具體邊框屬性聯寫: border-top:2px dotted red; 改變所有邊框屬性聯寫: border:1px solid green; 6、去掉邊框寫法: border: 0 none; 7、邊框合併: border-collapse:collapse; 8、點選文字設定輸入框游標焦點方式 <label for="name">姓名:</label> <input type="text" class="namecls" id="name">
內邊距(padding)
padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距
頁面中盒子大小計算問題
border可以影響盒子大小。
padding可以影響盒子大小
margin不會影響盒子大小。頁面中盒子寬度=設定的寬度值+左右邊框+左右內邊距。
注意:以後在頁面中設定盒子大小的時候,如果遇到padding和border要給盒子寬度和高度減去對應的值。
padding影響盒子大小特殊地方
-
如果一個塊級元素中包含另外一個塊級元素(子元素沒有寬度),給子元素設定padding值,不會影響子盒子大小。
-
子元素繼承父元素的盒子,padding不會影響子盒子大小
外邊距margin
外邊距用法與padding一樣,但是外邊距對盒子寬度沒有影響。
外邊距特點
1、垂直外邊距合併(外邊距以最大值為準),只發生在塊級元素之間。
2、外邊距塌陷解決方案:
第一種:給父盒子新增border值,但是影響父盒子的寬度。
第二種:給父盒子設定 overflow: hidden; (推薦這種)
注意: overflow:hidden 觸發 bfc (格式化上下文),將頁面中的元素設定為獨立的元素。
行內元素關於padding與margin問題
1.需要使用背景圖的時候必須用padding。
2.會出現外邊距合併或者margin塌陷的時候用padding。
3.行內元素上下只能設定padding,不能設定margin。(行內高16px)
4.看border,如果是a連線,看能不能讓字型變色,或者顯示小手。
隱藏盒子問題
1.overflow:hidden; 隱藏盒子超出的部分。
2.display: none; 隱藏盒子,而且不佔位置。(用的最多)
3.visibility: hidden; 隱藏盒子,而且佔位置。
4.opacity: 0; 隱藏盒子,而且佔位置。
5.Position/top/left/…-999px 隱藏盒子,而且佔位置。