本节重点：
-
-
- 弹性布局（弹性盒子）
- BFC布局/规范
- CSS新属性，不包含边框和内边距
- CSS3的拓展：普通盒模型，怪异盒子模型(IE)
-
在学习弹性布局前，我们学过Float 浮动 和 Position 定位，浮动会出现一些 ‘诡异’ 的事情，定位则用起来相对麻烦，弹性布局用起来就会很舒服。
1.弹性布局
介绍：
弹性布局、弹性盒子：让容器有能力来改变项目的宽度和高度。
属性：
- display：flex; 弹性布局
属性： justift-content (重点)
justift-content：space-between；向两端对齐，中间自适应
代码：
/* 定义三个盒子嵌套 box1->box2->box3*3 */
/* 定义盒子1 */
.box1{
width: 1500px;
height: 750px;
border: 5px solid black;
background-color: #f0f0f0;
}
/* 定义盒子2 */
.box2{
width: 700px;
height: 720px;
border: 5px solid black;
margin: 0px auto; /* 盒子1居中页面 */
/* 给盒子2设置为 弹性 */
display: flex;
/* 向两端对齐，中间自适应 */
justify-content: space-between;
}
/* 定义盒子2 */
.box3{
width: 200px;
height: 200px;
border: 5px solid purple;
/* 使字体醒目一点 */
font-size: 22px;
color: red;
/* 导入背景 */
background-image: url(https://img0.baidu.com/it/u=827880900,1079603570&fm=253&fmt=auto&app=120&f=JPEG?w=200&h=200);
}
视图：
justift-content：space-around；均匀分布，两边空出的距离等于中间距离
代码：
/* 均匀分布，边上空出的距离等于中间的距离 */ justify-content: space-around;
视图：
justift-content：space-evenly；平等均匀分布，距离完全一样一样
代码：
/* 平等均匀分布，距离完全一样 */ justify-content: space-evenly;
justift-content：flex-start/end；默认分布 从弹性 开始的地方/结束的地方分布
代码：
/* 默认分布 从弹性 开始的地方分布 */
/* justify-content: flex-start; */
/* 默认分布 从弹性 结束的地方 分布 */
/* justify-content: flex-end; */
RGBA（红，绿，蓝，透明度(1-0)）0为透明，1为不透明；
代码：
/* color盒子 */
.color{
width: 500px;
height: 400px;
border: 10px solid red;
/* alpha：1-0（0为透明，1为不透明） */
/* background-color: rgba(red, green, blue, alpha); */
background-color: rgba(10, 55, 100, 0);
}
视图：
- 排列顺序：-reverse(反转布局)
flex-direction:column(纵)--reverse
flex-direction:row(横-默认)--reverse
代码： /* 反转排列--> 纵向排列 */ flex-direction: column-reverse;
/* 反转排列--> 纵向排列 */ flex-direction: row-reverse;
视图：
- 换行 ：
- 多个盒子多行均匀分布时，可用换行。
flex-wrap：nowrap--默认不换行；
flex-wrap：wrap--换行
代码： /* 默认不换行 */ flex-wrap: nowrap; /* 换行 */ flex-wrap: wrap;
视图：
- 竖向排列方式：（当前盒子必须有一定高度）
① aling-items：center；居中 * 两边空出间距等于中间间距
：flex-start/end--竖向排列默认弹性开始
② align-content：center；---与竖向排列剧中同样的效果
不同1. 搭配换行(wrap)使用，垂直方向紧密排列
不同2. aling-items-垂直方向排列居中，有间距
代码： /* 居中 * 两边空出间距等于中间间距 */ align-items: center; align-content: center;
视图：
流体定位布局：相对、绝对、粘性（会受滚动条影响）
固定定位布局：（不会随滚动条影响）
2.多列布局：column
属性：
column-count：值；（此处值为列数）
column-rule：style(线条样式)；--设置线条样式。
column-rule-width：值px;-设置线条粗细。
代码：
.column{
width: 700px;
height: 200px;
border: 5px ridge brown;/* 盒子设置边框 */
font-family: 隶书;
font-size: 20px;
/* 自适应--滚动条 */
overflow: auto;
/* 多列布局 */
/* 设置为6列 */
column-count: 6;
/* 可设置线条样式 */
column-rule: dotted;
/* 设置线条样式粗细 */
column-rule-width: 3px;
}
视图：
3.BFC布局/规范 (面试重点)
出现/触发BFC：
1. 浮动 floa，不包含none。
2. 绝对定位 ：position（absolute、fixed）
3. display -inline-block、flex、table-cells
4. overflow--hidden、auto、scroll
BFC应用：
-
-
- 解决 margin 叠加问题
-
例如：盒子1下边距为20px和盒子2的边距20px重叠
解决：给盒子1和盒子2同时嵌套一个盒子
代码：
/* box1 和 box2 外的盒子 */
/* 注意：是每个box外都套一个盒子 */
.tao{
border: 1px solid black;
/* 解决margin 边距问题 */
overflow: hidden;
}
/* box1 */
.box1{
width: 200px;
height: 200px;
border: 5px solid red;
/* box1 下外边距为20px */
margin-bottom: 20px;
}
/* box2 */
.box2{
width: 200px;
height: 200px;
border: 5px solid blue;
/* box2 上外边距为60px */
margin-top: 60px;
}
视图：
4.响应式：根据用户页面大小不同自适应
@media screen and (max-width：值 px){ （如果页面到达这个 值 ，则响应下面的盒子）
盒子1,2,3...
}
代码：
/* html里定义一个div就好 */
/* 设置属性 */
div{
width: 600px;
height: 600px;
background-color: pink;
border: 1px solid black;
}
/* 响应式写法 */
/* 此时当页面最大适应度到达600px时，会响应下面的属性 */
/* max与min */
@media screen and (max-width: 600px) {
div{
width: 500px;
height: 500px;
background-color: red;
border: 1px solid black;
}
}
视图：
普通盒子模型：受影响--加 box-sizing
怪异盒子模型：不受影响--不加 box-sizing 可下载不同浏览器尝试
5.CSS3新增属性 ： box-sizing
属性：
问题：content-box(默认值：元素的宽高包含边框和内边距)
解决：border-box（元素的宽高不包含边框和内边距）
代码：
.box1{
width: 300px;
height: 200px;
border: 5px solid blue;
padding: 20px;
margin: 10px;
/* 解决元素的宽高包含边框和内边距 */
box-sizing: border-box;
}
视图：
标签：flex,盒子,进阶,--,弹性,content,width,border,CSS From： https://www.cnblogs.com/warmNest-llb/p/17870418.html