CSS中的流式布局，浮动布局，层布局，flex布局

CSS中的流式布局，浮动布局，层布局，flex布局

1. 流式布局

流式布局

标准文档流

布局对的方式：

从上向下，从左到右进行布局
男盒子独占一行，女盒子并排显示，女盒如果一行撑满了，自动换行。

2. 浮动布局

浮动布局

让块标签进行并排显示

2.1浮动的特点

1. 浮动会脱离标准流（没有完全脱离文档流）

1.如果一个元素浮动了，那么它就脱离了标准文档流，后面的元素就让向上排，如果后面的元素内部有文字，这些文字会环绕在浮动元素的周伟，产生字围。

2.浮动的曲线：元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直接移动到父元素的右边界。

2. 浮动带来的影响：

   • 父元素的高度塌陷：
     • 如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。
       • 一个元素浮动了，那么它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。
     • 浮动的元素会影响下面的元素，不会影响上面的元素
       [外链图片转存失败(img-qwuff9dl-1563284426331)(https://gitee.com/qyd_9/nodebook_image/raw/master/小书匠/3.png)]
     • 浮动会影响元素的显示方式
       [外链图片转存失败(img-bPJW2uY6-1563284426331)(https://gitee.com/qyd_9/nodebook_image/raw/master/小书匠/4.png)]

当一个浮动起来的男盒子，没有设置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 定位，是完全脱离标准文档流的一种布局方案

1. 四个参数：

   • 相对定位：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

示例：
[外链图片转存失败(img-O7JJWGJi-1563284426332)(https://gitee.com/qyd_9/nodebook_image/raw/master/小书匠/5.png)]

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: <flex-direction> || <flex-wrap>;

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;

示例：

[外链图片转存失败(img-NG93U5IE-1563284426333)(https://gitee.com/qyd_9/nodebook_image/raw/master/小书匠/6.png)]

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;

图示：

[外链图片转存失败(img-R6O5KSGJ-1563284426334)(https://gitee.com/qyd_9/nodebook_image/raw/master/小书匠/7.png)]

4.2 项目相关的属性

4.2.1 order：是用来改变项目的顺序的

使用方式：

.item {
  order: <integer>;
}

图示：
[外链图片转存失败(img-XZJScEgm-1563284426336)(https://gitee.com/qyd_9/nodebook_image/raw/master/小书匠/8.png)]

4.2.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

使用方式：

.item {
  flex-grow: <number>; /* default 0 */
}

图示：
[外链图片转存失败(img-9WjZ12sg-1563284426336)(https://gitee.com/qyd_9/nodebook_image/raw/master/小书匠/9.png)]

注意：

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.2.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

使用方式：

.item {
  flex-shrink: <number>; /* default 1 */
}

图示：
[外链图片转存失败(img-54IvOe9R-1563284426337)(https://gitee.com/qyd_9/nodebook_image/raw/master/小书匠/2.jpg)]

注意：

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

4.2.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

使用方式：

.item {
flex-basis: <length> | auto; /* default auto */
}

注意：

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.2.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

使用方式：

.item {
 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

注意：

该属性有两个快捷值：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;
}

图示：
[外链图片转存失败(img-GqLAmmuK-1563284426338)(https://gitee.com/qyd_9/nodebook_image/raw/master/小书匠/10.png)]

注意：

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。