定义:CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
网页设计中的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
盒子的三种定位形式:
在标准流下定位
在浮动属性下定位
在定位属性下定位
.abc {
/* 示例1 */
color: #fff;
background-color: #7BAEEF;
height: 26px;
padding-left: 10px;
font-size: 14px;
#bcd {
/* 示例2 */
width: 180px;
height: 382px;
margin-left:5px;
margin-top:5px;
margin-right:5px;
margin-bottom: 10px;
属性设置
1)border
border的属性主要有三个,color(颜色)、width(粗细)和style(样式)。在使用CSS设置边框时,可以分别使用border-width, border-color 和border-style来设置。
border-width设置粗细程度:thin(细)、 medium (适中)、thick(粗)和 <length>(具体数值)。
style设置边框风格:none(无格式),hidden(隐藏),dotted(点线式)等。
color颜色设置:border-color: red 。
2)padding
用于控制内容与边距间的距离。
Padding可以有最多4个属性值。
1个:上下左右边框属性值。
2个:第一个是上下边框属性值,第二个是左右边框属性值。
3个:第一个是上边框属性值,第二个是左右边框属性值,第三个是下边框属性值。
4个:顺时针,上右下左边框属性值。
注意:padding可以设置1、2、3或4个属性
3)margin
折叠margin是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容、padding区域、border边框或使用清除分离方法)结合表示为一个单独的margin。