第五节 盒子模型
1. 盒子模型的五個屬性
盒模型主要涉及的屬性有：width(寬度)、height(高度)、padding(內邊距)、 border(邊框)、margin(外邊距)。
2. 盒子模型的兩種模式
模式一：width=盒子自身的width ?（正常情況）
模式二：width=盒子自身的width+左padding+右padding+左border+右border ?（僅在IE5和IE6+怪異模式中出現）
?
? ? 當然也可以通過box-sizing屬性，來控制標準模式(box-sizing:content-box)還是怪異模式(box-sizing:border-box)。
? ? 實例1：
? ??? ?
實例2：
? ? ??
? ? ? ??
3. padding屬性
指內邊距，padding的區域有背景顏色，css2.1前提下，并且背景顏色一定和內容區域的相同。也就是說，background-color將填充所有border以內的區域。
padding屬性分兩種寫法：綜合屬性和小屬性。
? ?(1). 綜合屬性
padding：10px 20px 30px 40px，（順序為：上右下左）
padding：10px 20px 30px， （上下分別為10px和30px，右左均為20px）
padding：10px 20px， （上下為10px，右左為20px）
padding：10px， （上右下左均為10px）
? ?(2). 小屬性
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
???特別用法：可以用小屬性來層疊綜合屬性，但不要反過來用。
padding: 20px;
? ?padding-left: 30px;
4. border屬性
指邊框，border有三個要素：粗細、樣式、顏色。如果顏色不寫，默認為黑色，其它兩個屬性不能不寫。
? ?首先介紹一下border的所有線性：
? ?
border可以分兩種寫法：綜合屬性和小熟悉
? ?(1). 綜合屬性
? ? border：10px solid red，（上右下左四個邊框均為10px的實線顏色為紅色）
? ?(2). 小屬性
? ? A: 按照三要素來分
border-width: 10px 20px，（符合上右下左的規律，可以寫1、2、3、4個屬性）
border-style: solid， （符合上右下左的規律，可以寫1、2、3、4個屬性）
border-color: red blue green pink， （符合上右下左的規律，可以寫1、2、3、4個屬性）
? ?B: 按照方向來分
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;
? ?C: 按照方向-三要素來分
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
border-right-width:10px;
border-right-style:solid;
border-right-color:red;
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;
border-left-width:10px;
border-left-style:solid;
border-left-color:red;
特別用法：可以用小屬性來層疊綜合屬性，但不要反過來用。
5. margin屬性
指外邊距，border以為的區域，通常兩個盒子之間的距離。
? ?(1). 塌陷現象
? ?在標準文檔流中，margin豎直方向存在塌陷現象，豎直方向取margin的最大值。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE?html> <html> ????<head> ????????<meta?charset="UTF-8"> ????????<title></title> ????????<style?type="text/css"> ????????????.p1 { ????????????????width: 200px; ????????????????height: 300px; ????????????????background-color: pink; ????????????????margin-bottom: 30px; ????????????}?? ????????????.p2 { ????????????????width: 200px; ????????????????height: 300px; ????????????????background-color: yellow; ????????????????margin-top: 50px; ????????????} ????????</style> ????</head> ????<body> ????????<!--在標準文檔流中margin塌陷 豎直方向默認為最大的--> ????????<p?class="p1"></p> ????????<p?class="p2"></p> ????</body> </html> |
? 在非標準文檔流中，margin豎直方向不塌陷。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE?html> <html> ????<head> ????????<meta?charset="UTF-8"> ????????<title></title> ????????<style?type="text/css"> ????????????*{ ????????????????margin: 0; ????????????????padding: 0; ????????????} ????????????.p1 { ????????????????width: 200px; ????????????????height: 300px; ????????????????background-color: pink; ????????????????margin-bottom: 30px; ????????????????float: left; ????????????}?????????? ????????????.p2 { ????????????????width: 200px; ????????????????height: 300px; ????????????????background-color: yellow; ????????????????margin-top: 50px; ????????????????float: left; ????????????} ????????????div{ ????????????????width: 200px; ????????????????border: 2px dashed black; ????????????????overflow: hidden; ????????????} ????????</style> ????</head> ????<body> ????????<div> ????????????<p?class="p1"></p> ????????????<p?class="p2"></p> ????????</div> ????</body> </html> |
? (2). 利用 “margin：0 auto” 屬性使盒子水平居中
? 使用條件：
? A：盒子要有明確的width。
B：只有在標準文檔流中的盒子中才會生效，浮動了或定位了均無效。
? ? ? C：該特性作用的是盒子，使盒子水平方向居中。
D：若要使盒子中的內容水平居中：text-align：center；豎直居中：line-height=height。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE?html> <html> ????<head> ????????<meta?charset="UTF-8"> ????????<title></title> ????????<style?type="text/css"> ????????????.box1{ ????????????????width: 300px; ????????????????height: 300px; ????????????????background-color: palevioletred; ????????????????/*盒子水平居中*/ ????????????????margin: 0 auto;?? ????????????????/*文字水平居中*/ ????????????????text-align: center; ????????????????/*盒子豎直居中*/ ????????????????line-height: 300px; ????????????} ????????</style>? ????</head> ????<body> ????????<div?class="box1"> ????????????我要居中了 ????????</div>??? ????</body> </html> |
總結
- 上一篇： 浦发万用金
- 下一篇： 【转】SharePoint 2010 S