盒子模型及布局

盒子模型 盒模型、框模型（box model）

-css将页面汇总所有的元素的都设置为一个个矩形的盒子

-将元素设置为矩形的盒子后，对页面的布局就变成了将不同的盒子摆放到不同的位置

-每一个盒子，都有以下几个部分

内容区（content）

内边距（padding）

边框（border）

外边距（margin） 决定是盒子和盒子的距离

                                    

边框

边框属于盒子的边缘，边框里面是内容，出了边框就是盒子的外部

设置边框必须指定三个样式：

border-width:边框的宽度

border-color:边框的颜色

border-style:边框的样式

注：边框会影响我们盒子的大小

        .box{
            /* 设置一个盒子 */
            width: 100px;
            height: 100px;
            /* 边框的宽度 */
            border-width: 1px;
            /* 边框的颜色 */
            border-color: red;
            /* 边框的样式 */
            border-style: solid;
        }