盒子模型的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：
盒子宽度 = margin左右+border左右+padding左右+width
盒子高度 = margin上下+border上下+padding上下+height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: pink;
/* 边框 */
border: 5px solid blue;
/* 内边距 */
padding: 30px;
/* 外边距 */
margin: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
定位 position
top:距离上面的位置
bottom：距离下面的位置
left：距离左边的位置
right：距离右边的位置
固定定位 fixed
如标题栏、项目栏等
相对定位 relative
1.相对于原始位置的移动
2.原来的位置继续占有，后面的盒子保留在原来的位置
绝对定位 absolute
1.祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动
2.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
3.原来的位置不再占有，后面的盒子会占用位置
子绝父相
1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
2.父盒子需要加定位限制，子盒子在父盒子内显示
3.父盒子布局时，需要占有位置，因此父亲只能是相对定位
flex布局
又称弹性布局，每个盒子占一份
父盒子box设置display: flex;使box里面指定为flex布局；设置子盒子为响应式flex:1;
如图例，生成了7个盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
}
.inner_box {
width: 200px;
height: 200px;
border: 3px solid red;
/* 每一个盒子占一份 */
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="inner_box">1</div>
<div class="inner_box">2</div>
<div class="inner_box">3</div>
<div class="inner_box">4</div>
<div class="inner_box">5</div>
<div class="inner_box">6</div>
<div class="inner_box">7</div>
</div>
</body>
</html>
flex中的属性
justify-content 相对x轴
start 最开始排列
center 居中排列
end 最末尾排列
space-between 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
space-evenly 均匀排列每个元素，每个元素之间的间隔相等
space-around 均匀排列每个元素，每个元素周围分配相同的空间
align-items 相对y轴
flex-start 元素位于容器的开头
center 元素位于容器的中心
flex-end 元素位于容器的结尾
display的其他用法
inline 元素以行内元素显示
block 元素以块元素显示
none 元素隐藏且不占位置
