4、盒子模型

4.1、什么是盒子模型

1.margin：外边框

2.padding：内边框

3.border：边框

4.2、边框

border：粗细 样式 颜色

1.边框的粗细

2.边框的样式

3.边框的颜色

4.3、外边距----妙用：居中

margin-left/right/top/bottom--->表示四周，可分别设置，也可以同时设置

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

盒子的计算方式：

margin+border+padding+内容的大小

总结：

body总有一个默认的外边距 margin:0

常见操作：初始化

4.4、圆角边框----border-radius

<style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*一个border-radius只管一个圆的1/4*/
            border-radius: 50px 20px 20px 30px;/*左上 右上 右下 左下 ,顺时针方向*/
        }
</style>

4.5、盒子阴影

box-shadow: 10px 10px 1px black;