CSS盒子模型

1、块级盒子（标签，元素）特点：独占一行，对宽度高度支持

div\ul\li\h1~h6

span{
display:block;
}

2、内联级盒子特点：不独占一行，对宽度高度不支持

span/a

div{
	display:inline;
}

3、内联块级盒子特点：不独占一行，对宽度高度支持

image/input

xx{
	display：inline-block;
}

4、弹性盒子特点：不论父子能不能放下子元素，子元素始终横向布局

body{
display:flex;
}

h2{
display:flex;
}

盒子区域组成部分

​

内容区

width

height

box-sizing：content-box 默认宽高针对内容区设置

border-box 宽高针对整个盒子设置

填充区

padding

从上开始，顺时针进行旋转。不够了，找对称

padding：50px

padding：50px 20px

padding： 50px 20px 10px

padding： 50px 20px 10px 100px

div{
	background
	width：
	height：
	padding：50px 20px 10px
}

padding-top：
padding-bottom：
padding-left：
padding-right：

边框区

复合属性

和内容区一个颜色

border-border-style：样式

border-color：颜色

border-width：宽度

border-border-style:solid;
border-color:pink;
border-width:20px;

//简化写法，不区分顺序，空格隔开，结合上下左右四个方向单独设置
//三个方面，四个方向，十二种情况
border:solid 10px blue

//分块加边框
border-top:solid 10px blue;
border-bottom:dashed 10px pink;
border-left:dotted 10px green;
border-right:double 10px green;
//再细化设置
border-top-color：
border-top-width：

外边框，也就是盒子和盒子之间的间距

margin

：后的四个参数代表从上开始，顺时针进行旋转。不够了，找对称

auto：水平方向居中

margin:50px 20px 100px 0
margin-top:
margin-right:
margin-bottom:
margin-left:
//auto水平方向即居中
margin:50px auto;