CSS盒子模型

盒子分类

块级盒子

特点：独占一行，对宽高度支持

举例：div h1-h6 p ul li

把其他盒子转变为块级盒子

display: block;

内联级盒子

特点：不独占一行，对宽度高度不支持

举例：a span

把其他盒子转变为内联级盒子

display: inline;

内联块级盒子

特点：不独占一行，对宽度高度支持

举例：img input

把其他盒子转变为内联块级盒子

display: inline-block;

弹性盒子

特点：默认该元素无论放不放的下子元素都横着布局

把其他盒子转变为弹性盒子

display: flex;

语法：

div{

    width: 800px;

    height: 200px;

    background-color: red;

    display: flex;

}

盒子内部分区

内容区

div{

    background-color: red;

    width: 200px;

    height:100px;

}

运行结果：

填充区 padding

padding: 50px;

运行结果：

 padding 从上开始，顺时针旋转，没有则对称

padding: 50px ;

padding: 30px 60px;

padding: 30px 60px 80px;

padding: 30px 60px 80px 30px;

宽度设置(上下左右)

padding-top:50px;

padding-bottom:50px:

padding-left:50px;

padding-right:50px:

边框区border

复合属性

border-color: blue;

border-width: 30px;

border-style: solid;

边框样式: boder-style:solid(实线)

边框颜色：border-color:

边框宽度：border-width:

简化写法：

border:double 8px yellow;

border-top:double 8px yellow;

边框宽度（上下左右）

border-top:50px;

border-bottom:50px:

border-left:50px;

border-right:50px;

三方面四方向12种情况

border-bottom-color: yellow;

border-top-width: 80px;等等

运行结果：

外边距 margin

margin 从上开始，顺时针旋转，没有则对称

margin: 50px ;

margin: 30px 60px;

margin: 30px 60px 80px;

margin: 50px 100px 200px 10px;

 /* 此时上下（左右）的距离为上下（左右）外边距中的较大值200px(100px)*/

margin-top:50px;

margin-bottom:50px:

margin-left:50px;

margin-right:50px;

水平居中

margin: auto;

margin: 50px;

运行结果：

补充：

默认值：box-sizing: border-box;代表宽高对整个盒子进行设置

box-sizing: content-box;代表宽高对内容区进行设置