9-盒子模型

盒子模型

网页上的每一个标签都是一个盒子

每个盒子都有四个属性

• 内容（content）

盒子里装的东西
网页中通常是指文字和图片

• 填充（padding，内边距）

怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料

• 边框（border）：盒子本身

• 边界（margin，外边距）

盒子摆放的时候的不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出

上2图：在网站点击检查（或审查元素），就可以看到盒子模型

上图：
content是内容；
padding是内边距；
border是盒子；
margin是盒子外的外边距；
宽度是基于内容的。

上图：IE内容的宽度高度，是基于盒子的宽度高度

• content属性

上图：
例子1中的4个值方向分别是：上、右、下、左
例子2中的3个值方向分别是：上、左右、下

上图：
例子3中的2个值方向分别是：上下、左右
例子4：上下左右

    
    

    


    
123123123

代码：设置一个div标签

上图：默认是有边距的

    
    

    


    
123123123

代码：内边距设置为0（padding: 0;）；外边距设置为0（margin: 0;）

上图：将内边距和外边距设置为0

        div{
            background-color: red;
            width: 250px;
            height: 140px;
            border: 4px solid blue;
        }

代码：增加一个边框

上图：
可以看到div这个标签宽度高度是250*140，就是我们设置的大小。
border边框的边距是4，也是我们设置的值。

• 内边距

        div{
            background-color: red;
            width: 250px;
            height: 140px;
            border: 4px solid blue;
            padding-bottom: 20px;
        }

代码：padding-bottom: 20px; 新增，给内边距下方

上图：
将鼠标放在盒子的padding（内边距），内边距下面有个20的数字，这就是我们添加的大小；
然后再看左上角的图片，明显看到了内边距；因为加了内边距，盒子整体变大了。

        div{
            background-color: red;
            width: 250px;
            height: 140px;
            border: 4px solid blue;
            /*padding-bottom: 20px;*/
            padding: 50px 30px 25px 10px;
        }

代码：修改内边距大小

上图：分别调试了内边距的上下左右大小。

• 外边距

        div{
            background-color: red;
            width: 250px;
            height: 140px;
            border: 4px solid blue;
            /*padding-bottom: 20px;*/
            padding: 50px 30px 25px 10px;
            margin: 30px;
        }

代码：增加外边距margin: 30px;

    
123123123
    
123123123

代码：增加一条div标签

上图：两个div标签的举例就是外边距的30px

外边距的设计与内边距相同

---

上图：
border-width：设置边框的宽度
border-style：设置边框的样式，比如实线、虚线等。
border-color：设置边框的颜色