css盒子模型

---

css盒子模型

注释内容

---

一、盒子

1、块级盒子(标签,元素)

特点:独占一行,对宽度高度支持
div ul li h1~h6
display:block

2、内联级盒子

特点:不独占一行,对宽度高度不支持
span a
display:inline

3、内联块级盒子

特点:不独占一行,对宽度高度支持
img input
display: inline-block

4、弹性盒子

特点:不论父级元素能不能放下子元素,子元素始终横向布局
display:flex ;变为弹性盒子

二、区域

1、内容区

width: 200px;
height: 100px;
box-sizing: content-box默认宽高针对内容区设置
border-box宽高针对整个盒子设置

2、填充区

从上开始,顺时针进行旋转,不够了找对称
padding: 50px;
padding: 50px 20px;
padding: 50px 20px 10px;上 左右 下
padding: 50px 20px 10px 100px;
结合上下左右单独对某一个方向进行设置
padding-top: 50px;
padding-bottom: 10px;
padding-left: 100px;
padding-right: 30px;

3、边框区

边框区 border 复合属性
border-style:边框样式
border-color:边框的颜色
border-width:边框宽度
简化写法：
border: solid 10px blue;值不区分顺序,空格隔开
结合上下左右四个方向单独设置
border-top: solid 10px blue;
border-bottom: dashed 10px pink;
border-left: dotted 10px red;
border-right: double 10px green;
三个方面,四个方向,十二种情况
border-top-color: red;
border-top-width: 30px;

4、外边距

从上开始,顺时针进行旋转,不够了找对称
margin: 50px;
margin: 50px 20px;
margin: 50px 20px 100px;
margin: 50px 20px 100px 0;
结合上下左右四个方向单独设置
margin-top: 50px;
margin-left: 100px;
margin-bottom: 10px;
margin-right: 30px;
auto:水平方向居中 用于块级元素

5、示例

div {
background: gold;
width: 200px;
height: 100px;
box-sizing: border-box;
padding: 20px;
border: 10px solid blue;
 {
*{
padding: 0;
margin: 0;
}

总结

css盒子模型