1. 程式人生 > >CSS中盒子模型的總結

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影響盒子大小特殊地方

  1. 如果一個塊級元素中包含另外一個塊級元素(子元素沒有寬度),給子元素設定padding值,不會影響子盒子大小。

  2. 子元素繼承父元素的盒子,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 隱藏盒子,而且佔位置。