盒子：
html中任何一个元素如div、span等都可以看作盒子，每个元素本质属性都会存在一些区别
而这种现象则被称为盒子模型
盒子模型种类
1.块级盒子（标签、元素）：div ul li h1~h6
独占一行，对宽度高度支持
2.内联级盒子：span a
不独占一行，对宽度高度不支持
3.内联块级盒子：img input
不独占一行，对宽度高度支持
4.弹性盒子：
不论父级能不能放下子元素，子元素始终横向布局
盒子模型分区
内容区：
width:200px;
height:100px;
填充区：
padding:50px;
padding:50px,20px;上下，左右
padding:50px,20px，10px;上，左右，下
padding:50px,20px，10px，100px;上，左,右，下
单独一边设置:
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
边框区：
组成：
border-style:边框样式
border-color:边框的颜色
border-width:边框宽度
例：
1.分开写
border-color: black;
border-style: dashed;
border-width: 5px;
2.合着写
border:solid 10px blue;//不用区分顺序，也可以加 -方向 来设置一条边
外边距：//调整元素和元素之间的间距
margin: 50px;
margin:50px,20px;上下，左右
margin:50px,20px，10px;上，左右，下
margin:50px,20px，10px，100px;上，左,右，下
水平方向上可以用 auto 来居中
注意：如果两个相邻元素都设置了间距，不是累加计算，而是按照大的走
例子：
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/盒子模型.css">
</head>
<body>
<div>
<p id="x">aaa</p>
<p id="y">bbb</p>
</div>
</body>
</html>.css
p{
background: yellow;
width: 200px;
height: 100px;
padding: 50px;
border: solid 10px blue;
margin: 100px auto;
}运行结果：
为了更好的直观理解其分区，我们可以右键单击，选中检查用于查询
盒子模型布局
1.传统布局 float
需要向横向布局的元素添加float属性:
float: right;右浮动
float: left;左浮动
如在刚才的.css的p标签的样式中添加
float: right;
存在的问题：
使用float之后，所在的父级元素无高度，会导致下方元素向上移动
例子：
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/盒子模型.css">
</head>
<body>
<div>
这是第一个div
<p id="x">aaa</p>
<p id="y">bbb</p>
</div>
<div>
这是第二个div
</div>
</body>
</html>.css
div{
background: gray;
}
div p{
background: yellow;
width: 200px;
height: 100px;
padding: 50px;
border: solid 10px blue;
margin: 100px auto;
float: right;
}
运行：
解决办法：
1.给父级元素设置高度（需要根据子级元素的大小设置，并不推荐）
2.父级不设高度，添加,使得父级高度随着自己高度变化而变化
div{
background: gray;
overflow:hidden
} 
无法解决：
1.元素之间的均匀分布计算，而且不一定能均匀分布（有除不开的情况）
2.或均匀父级也需要计算，而且不一定均分
3.书写繁琐代码冗余
2.传统布局 display:inline-block 内联块级元素
向需要横着布局的元素添加 display:inline-block 变为内联块级元素，内联块级元素不独占一行，对宽高支持
存在的问题：
使用之后产生莫名其妙的空隙，对整体的布局有影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/盒子模型.css">
</head>
<body>
<div>
这是第一个div
<p id="x">aaa</p>
<p id="y">bbb</p>
</div>
<div>
这是第二个div
</div>
</body>
</html>div{
background: gray;
overflow:hidden;
}
div p{
background: yellow;
width: 200px;
height: 100px;
padding: 50px;
border: solid 10px blue;
display: inline-block;
}
产生原因：
换行产生的空隙
解决办法：
1.让元素标签首尾相接（不推荐）
<p id="x">aaa</p><p id="y">bbb</p>
2.字体大小设置：给使用display:inline-block的父级元素设置字体大小font-size: 0;，并且元素本身设置一个有效字体大小
div{
background: gray;
overflow:hidden;
font-size: 0;
}
div p{
font-size: 20px;
background: yellow;
width: 200px;
height: 100px;
padding: 50px;
border: solid 10px blue;
display: inline-block;
}
无法解决：
1.元素之间的均匀分布计算，而且不一定能均匀分布（有除不开的情况）
2.或均匀父级也需要计算，而且不一定均分
3.书写繁琐代码冗余
3.现代布局 display:flex 弹性盒子
让多个元素横向布局，只需要给这些元素的父级元素添加 display:flex
div{
background: gray;
display: flex;
}
div p{
background: yellow;
width: 200px;
height: 100px;
padding: 50px;
border: solid 10px blue;
}
1.控制弹性盒子模型内子元素的排列方向 flex-direction 该属性取值如下：
row 横向从左往右排列
row-reverse 横向从右往左排列
column 纵向从上到下排列
column-reverse 纵向从下到上排列
2.设置弹性盒子是否换行 flex-wrap 取值如下：
wrap 换行
nowrap 不换行
3.设置弹性盒子内子元素的排列顺序 order 作用到子元素上
属性值作为一个整数，值越小，该子元素出现的顺序越靠前
4.flex 控制弹性盒子内子元素的缩放比例 复合属性
flex-grow拉伸因子（作用到每个元素自己身上，输入的数值作为自己的份数）
flex-shrink 压缩因子（与拉伸相反，数值越大，占比越小）
flex-basis 基准因子
5.控制弹性盒子内子元素的分布方式 justify-content 该属性取值如下：
flex-start 代表这些元素在排列方向上的开始位置分布
flex-end 代表这些元素在排列方向上的结束位置分布
center 代表在排列方向上的中间位置分布
space-betweem 空白元素分布在元素中间
space-around 空白元素分布在元素周围
space-evenly 空白元素均匀分散
6.控制弹性盒子内子元素在垂直方向上的对齐方式 align-items 该属性取值如下：
flex-start 顶部（左端）
flex-end 底部（右端）
center 居中对齐
baseline 首行底部对齐
7.设置弹性盒子内多行元素的分布方式 align-content: 该属性取值如下：
flex-start:所有行都靠近顶部(左端》
flex-end:所有行都靠近底部(右端)
center:多有行居中显示
space-between:空白元素分布在行与行之间
space-around:空白元素分布在行的周围
space-evenly:空白元素均匀分布
