Snip20161109_13.png
这个盒子的width: 100px; height: 100px;但是真实的宽高是204*204.因为还得加上padding以及border.
真实占有宽度 = 左border +左padding+wigth+右padding+右border
举两个例子
Css样式：
<style type="text/css">
.box1{
width: 100px;
height: 100px;
padding: 50px;
border: 5px solid red;
}
.box2{
width: 250px;
height: 250px;
padding: 25px;
border: 5px solid red;
}
</style>
真实占有宽度
1.1 盒子中的padding(内边距)属性
padding:10px 8px 6px 4px; 上10px 右8px 下6px 左4px
padding:10px 8px 5px; 上10px 左右8px 下5px
padding:10px 5px; 上下10px 左右5px
padding:10px; 上右下左各10px
注意写法:
用小属性层叠大属性
padding:10px;
padding-right:20px;
错误方式(不能把小属性，写在大属性前面,这样会把20px层叠掉):
padding-right:20px;
padding:10px;
层叠掉的意思举例说明:
层叠举例说明
1.2 盒子中的border(边框)属性
边框三要素:粗细、线型、颜色。
颜色不写默认黑色，另外两个属性必须要写
线型：solid(实线)、dashed(虚线)、dotted(圆虚线)
三种border线型
border属性能够被拆开，有两大拆开方式：
按三要素: border-width(边框宽度)、border-style(边框线型)、border-color(边框颜色)、
按方向:border-left、border-right、border-top、border-bottom
还能这么玩:
.box1{
border-width: 10px 30px;
border-style: solid dashed dotted;
border-color: gold fuchsia pink chartreuse;
height: 100px;
width: 100px;
}
将三要素拆分
其他用法：
border:5px solid red;
border-right-color:green;
Snip20161111_25.png
