CSS中的流式布局，浮动布局，层布局，flex布局
[toc]
1. 流式布局
流式布局
: 标准文档流
布局对的方式：
从上向下，从左到右进行布局
男盒子独占一行，女盒子并排显示，女盒如果一行撑满了，自动换行。
2. 浮动布局
浮动布局
: 让块标签进行并排显示
2.1浮动的特点
浮动会脱离标准流(没有完全脱离文档流)
1.如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排，如果后面的元素内部有文字，这些文字会环绕在浮动元素的周伟，产生字围。
2.浮动的曲线：元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。
浮动带来的影响：
父元素的高度塌陷：
如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。
一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。
浮动的元素会影响下面的元素，不会影响上面的元素
浮动会影响元素的显示方式
当一个浮动起来的男盒子，没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容
注意：
如果有左浮动，又有右浮动，那么你需要把右浮动的元素写在左左浮动的前面
2.2 元素浮动会造成影响(清除浮动)
1，对父元素造成的影响
父元素高度塌陷
解决：显示加高度(加高法) 小偏方(overflow:hidden) clear:both
加高法：简单 基本不用 大部分情况情况下，父元素的高度是需要子元素撑起来
overflow:hidden : 简单 使用了overflow:hidden 父元素的高度会随着子元素的高度变化而变化 , 在使用过程中，需要注意子元素如果想要超出父元素高度，此时overflow:hidden就不适合了。
clear:both 在所有子元素后面加一个空的div 在这个div上面加clear:both -
优点：clear:both专业清除浮动的
缺点：多写一个代码
2，对后面兄弟元素造成的影响
兄弟元素会向上移动
解决：在受影响的元素上面的加 clear:both
项目中最常用清除浮动的方法： 利用伪元素 after
说白了，就是写一个清除浮动的类，如下：
.clear:after{
content="";
display:block;
clear:both;
height:0;
overflow:hidden;
}
复制代码
3. 层布局
层布局
: (定位)：position background-position 定位，是完全脱离标准文档流的一种布局方案
四个参数：
相对定位：relative
参考点：是盒子本身它应该出现的位置
应用：局部的细节调整 作为绝对定位的参考点
绝对定位：absolue
参考点：根据设置的参考点(position: relative; )进行定位
它会向上找参考点，找到就以这个参考点为主，找不到，就一直向上找，直接到body,如果body也没有设置参考点，那么就以body为参考点
绝对定位由于它完全脱离了标准文档流，它可能发生覆盖，可能通过z-index改变先后顺序，z-index的值越大，越靠前
固定定位：flxed
参考点：视窗
static:
不定位 默认的
如果一个行内标签绝对定位了，那么它就变成块级了，就可以设置宽度。
父相子绝
不管是什么类型的定位，都需要设置偏移量。top,right,bootom,left
4. flex布局
flex布局的四大概念：
: 容器，项目，主轴，交叉轴
容器：如果在一个盒子上面，设置display:flex，那么这个盒子就是一个容器
项目：容器的直接子元素，叫项目
主轴：在容器中，项目默认是按主轴方向排列，默认是从左向右排列
交叉轴：与主轴垂直的那个轴
4.1 容器相关的属性
4.1.1 flex-direction：改变主轴方向
4个参数：
- row(默认值)：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
使用方式：
flex-direction： row | column | row-reverse | column-reverse
复制代码
示例：
4.1.2 flex-wrap:项目足够多的时候，是否换行
2个参数
- wrap ：换行，第一行在上方。
- nowrap(默认)：不换行。
- wrap-reverse：换行，第一行在下方。
4.1.3 * flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
使用方式：
flex-flow: || ;
复制代码
4.1.4 justify-content属性：定义了项目在主轴上的对齐方式。
6个属性
- flex-start(默认值)：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
使用方式：
justify-content: flex-start | flex-end | center | space-between | space-around;
复制代码
示例：
4.1.5 align-items属性：定义项目在交叉轴上如何对齐。
五个属性取值
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度。
使用方式：
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
复制代码
图示：
4.2 项目相关的属性
4.2.1 order：是用来改变项目的顺序的
使用方式：
.item {
order: ;
}
复制代码
图示：
4.2.2 flex-grow属性
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
使用方式：
.item {
flex-grow: ; /* default 0 */
}
复制代码
图示：
注意：
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
4.2.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
使用方式：
.item {
flex-shrink: ; /* default 1 */
}
复制代码
图示：
注意：
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
4.2.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
使用方式：
.item {
flex-basis: | auto; /* default auto */
}
复制代码
注意：
它可以设为跟width或height属性一样的值(比如350px)，则项目将占据固定空间。
4.2.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
使用方式：
.item {
flex: none | [ ? || ]
}
复制代码
注意：
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
4.2.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
使用方式：
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码
图示：
注意：
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
扫一扫
1316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
