盒子
css處理網頁時,他認為每個元素都包含在乙個不可見的盒子裡.
盒子組成:
內容區(content)
內邊距(padding)
邊塊(border)
外邊距(margin):與其他盒子的距離
1.給盒子設定邊框
為乙個元素設定邊框必須指定三個樣式,缺一不可
border-width:邊框寬度
border-color:邊框顏色
border-style:邊框的樣式(實線還是虛線)
通過border-left,border-right,border-top,border-bottom可以設定盒子上下左右的邊框大小
可以使用border:屬性同時設定上面三個屬性,順序不限,這樣邊框的上下左右就只能相同了
2.給盒子的內容設定大小
width:寬度
height:高度
只會影響盒子內容的大小
3.給盒子設定內邊距padding(盒子內容與邊框的距離)
padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距
同樣適用padding:屬性可以同時設定上下左右四個內邊距
4.給盒子設定外邊距margin(盒子與其他盒子的距離)
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:左外邊距
margin:可以同時制定上下左右外邊距
其中:設定左和上時是盒子自己移動.設定下和右時是擠其他的盒子
可以為負值,就是向相反的方向移動.
margin-left和margin-right還有auto值,單個設定表示最大值,同時加上就是水平居中.對上下無效
CSS 盒子模型（框模型）
框 頁面元素皆為框。框模型 box model，定義了元素進行框處理的內容 就是定義你這個元素的框應該是什麼樣的 是元素內邊距 外邊距以及邊框的一種計算方式。想要設計好乙個優秀的網頁，框模型一定是必不可少需要認真考慮的。盒子模型就像乙個盒子，它有內容 content 內邊距 padding 邊框 b...
CSS盒子模型（框模型）
上圖為w3c標準的盒子模型 元素的總寬度 width 寬度 padding left 左內邊距 padding right 右內邊距 border left 左邊框 border right 右邊框 margin left 左外邊距 margin right 右外邊距 元素的總高度 height 高...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...