CSS——盒模型

1.基本概念：

内容：（content）盒子里面的东西；

填充：(padding)怕盒子里面的东西损坏而添加的泡沫元素活抗震材料；

边框：(border)盒子本身

边界：(margin)则说明盒子的摆放不能堆在一起，要留一定空隙，保持通风，同时方便取出；

在网页上内容常指文字、图片等元素，但也可以是小盒子（div嵌套）。

2.边框：围绕着内容及补白的线，可以设置粗细、样式和颜色。

（1）

div{

boder:1px soild red;

}

等于：

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}（2）boder-style(边框样式)：dashed--虚线，dotted--点线，soild--实线（3）border-color:#色号（设置边框颜色）（4）border-width(边框宽度)thinmediumthickpx才是常用的3.当只想为下边框单独设置样式时，CSS样式中允许只为一个方向的边框设置样式：

div{border-bottom:1px solid red;}

4.宽度和高度（1）一张图解释盒模型宽度和高度：

（2）例子：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;
}

5.填充：内容与边框之间设置的距离，标签顺序：上、右、下、左（顺时针）。如：

div{padding:20px 10px 15px 30px;}也可分开写。5.边界

边界也是分为上、右、下、左顺序设置，如：

div{margin:20px 10px 15px 30px;}