什么是盒模型（逆战班）
上面图片就是一个盒子模型。
所有的HTML元素都可以看做是一个盒子，在CSS中盒子模型是为了布局和设计使用的，CSS盒模型本质上就是一个盒字，封装HTML元素包括:margin(边距)、padding（填充）、border（边框）、content（实际内容），盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
1、content：代表内容区，文本和图像在这里面显示。
2、padding：内填充，定义内容与元素边框的空间，即上下左右的内边距，不可以写负值，可以单独设置内容与元素边框之间的上下左右的间距。
-
padding-top：上填充
-
padding-right：右填充
-
padding-bottom：下填充
-
padding-left：左填充
padding也可以单独使用，有一个简单的写法，也叫复合式写法。
当写一个值的时候：
padding：5px；
代表：上填充5像素，右填充5像素，下填充5像素，左填充5像素。
两个值：
padding：5px 6px;
代表：上下填充5像素，左右填充5像素。
三个值：
padding：5px 6px 7px;
代表：上填充5像素，左右填充6像素，下填充7像素。
四个值：
padding：1px 2px 3px 4px;
代表：上填充1像素，右填充2像素，下填充3像素，左填充4像素。
顺序遵循上右下左的原则，按顺时针旋转，这个顺序是不变的。
3、margin：外边距，定义元素外面周围的空间。
- margin-top：上边距
- margin-right：右边距
- margin-bottom：下边距
- margin-left：左边距
margin也可以单独使用，跟padding使用规则一样，也有复合式写法。
一个值：
margin：2px；
代表：上外边距2像素，右外边距2像素，下外边距2像素，左外边距2像素。
两个值：
margin：3px 6px;
代表：上下外边距3像素，左右外边距5像素。
三个值：
margin：5px 6px 7px;
代表：上外边距5像素，左右外边距6像素，下外边距7像素。
四个值：
margin：1px 2px 3px 4px;
代表：上外边距1像素，右外边距2像素，下外边距3像素，左外边距4像素。
顺序也是按顺时针添加边距，顺序是不可变的。
4、border：边框，指定元素的边框样式和颜色。
-
border-style：指定边框样式。
属性值有 none（默认无边框）、dotted（定义一个点线边框）、dashed（定义一个虚线边框）、solid（定义一个实线边框）double（定义两个边框，两个边框的宽度和 border-width 的值相同） -
border-color：定义边框颜色，如果使用这个属性不显示，则先定义一个边框样式在使用。
属性值有name（颜色的名称如：red）、RGB（指定rgb值如：rgb(255,0,0)）、Hex （指定16进制值如：#ffffff;） -
border-style的值可以有四个值：
border-style:dotted solid double dashed;
上边框是 dotted；
右边框是 solid；
下边框是 double；
左边框是 dashed；
border也可以写复合式写法：
border：1px solid #cccccc；
代表：上右下左1像素的边框，样式是实线的，颜色是灰色的。
下面是一个简易的盒子样式代码：
/*给元素盒子加边框和外边距*/
div{
width: 300px;
height: 300px;
background: red;
border: 5px solid #ccc;
margin: 100px;
}
/* 给内容区添加边距和填充*/
p{
margin-top: 30px;
padding-left: 100px;
}
<body>
<!--开始盒子样式-->
<div>
<p>今天很开心</p>
</div>
</body>
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
