CSS——（3）盒子模型

一、什么是盒子模型

盒模型、盒子模型、框模型（box model）
- CSS将网页的所有元素都设置为一个矩形的盒子
- 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
- 每一个盒子都由以下几个部分
- 内容区（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）

二、内容区

    /* 
        内容区（content）
            元素中的所有的子元素和文本内容都在内容区中排列
            内容区的大小由width和height两个属性来设置
                width 设置内容区的宽度
                height 设置内容区的高度
    */
    width: 200px;
    height: 200px;
    background-color: tomato;

三、内边距

.box1{
    /* 
        内容区
    */
    width: 200px;
    height: 200px;
    background-color: tomato;

    /* 
        边框
    */
    border-width: 10px;
    border-color: blue;
    border-style: solid;

    /* 
        内边距（padding）
            - 内容区和边框之间的距离是内边距
            - 一共有四个方向的内边距 padding-xxx
                top right bottom left
            
            - 内边距的设置会影响到盒子的大小
            - 背景颜色会延伸到内边距上
        
        一个盒子的大小，由内容区 内边距 和 边框共同决定的
            所以在计算盒子的大小时，需要将这三个区域加到一起计算的
        
        padding 内边距的简写属性 可以同时指定四个方向的内边距
            规则和border一样
    */
    padding: 10px;
    /* padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px; */
}
/*
	为了将内边距和内容区区分开，所以填充盒子的内容区
*/
.box_content{
    width: 100%;
    height: 100%;
    background-color: skyblue;
}

四、边框

/* 
        边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子外部
            边框大小会影响到整个盒子的大小
        要设置边框，需要至少设置三个样式：
            边框的宽度 border-width  (默认值：3px)
            边框的颜色 border-color
            边框的样式 border-style
        
        边框宽度可以用来指定四个方向边框的宽度（边框颜色与之一样的用法）
            border-width: 10px 20px 30px 40px;
            四个值：上 右 下 左
            三个值：上 左右 下
            两个值：上下 左右
            一个值：上下左右
        
        除了border-width之外，还有border-xxx-width（border-xxx-color、border-xxx-style）
            xxx可以是 top right bottom left
    */
    border-width: 10px;

    /* 
        border-color用来指定边框的颜色，同样可以指定边框的四个边的颜色
            规则和border-width一样
        
        border-color也可以省略，默认值为color的颜色值  
    */
    border-color: yellowgreen;

    /* 
        border-style 指定边框的样式
            solid 表示实线
            dotted 点状虚线
            dashed 虚线
            double 双线
        默认值为none，表示没有边框
    */
    border-style: solid;

    /* 
        border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
            border: 10px orange solid;
            
        除了border之外，还有border-xxx
            top right bottom left
    */

五、外边距

/* 
        外边距（margin）
            - 外边距不会影响盒子可见框大小
            - 但是外边距会影响盒子的位置
            - 一个有四个方向的外边距：margin-xxx
                top 上外边距，设置一个正值，元素会向下移动
                right 默认情况下不会产生任何效果
                    右外边距，设置一个正值，其右边的元素会向右移动
                bottom 下外边距，设置一个正值，其下边的元素会向下移动
                left 左外边距，设置一个正值，元素会向右移动
            
            -margin 也可以设置负值，如果是负值则元素会向相反的方向移动

        - 元素在页面中是按照自左向右的顺序排列的
            所以默认情况下如果我们设置的左和上边距则会移动元素自身
            而设置右和下边距会移动其他元素
        
        margin 简写属性
            与padding规则一样
        
        margin会影响到盒子实际占用空间的大小       
    */