关于CSS（第五章-布局）重要！！

本文链接：https://blog.csdn.net/weixin_46802824/article/details/108433546

默认文档流

默认文档流就是对页面布局不加任何修饰，元素自动布局的方式，其特点如下：
1）元素在页面中的显示顺序与元素在代码中出现的顺序是一致的；
2）块级元素独占一行，默认宽度为父级元素100%，高度由其内容决定；
3）行内元素与其他元素共享一行，宽高皆由其内容决定。

默认文档流往往不能满足我们的布局需求，我们可以使用如下属性改变默认布局

position：默认情况下使用的是正常布局，通过指定值来改变其布局方式。
float：通过float属性指定值left、right使得块级元素在一行中排列。
display：通过为display属性指定值block、inline、inline-block等可以改变元素在正常流中的行为。

浮动布局（Floats）

为了使块级元素在一行中显示或者让文字在图片的周围显示

取值

left：向左浮动元素
right：向右浮动元素
none：【默认值】不浮动
inherit：浮动方式继承父元素

文字环绕图片

将图片设置为浮动元素即可。

img{
	float：left；
	margin-right：30px；
   }

多列布局

将图片设置为浮动元素即可。

.one{
	width:36%;
	float:left;
	}
	
.two{
	width:30%;
	float:left;
	margin-left:4%;
	}
	
.three{
	width:26%;
	float:right;
	}

清除浮动

位于浮动元素下的非浮动元素会显示到浮动元素的下面，非浮动元素中的文字会环绕在浮动元素周围，这并不是我们想要的。要想让该非浮动元素位于浮动元素之后（单独一行）需要清除浮动。

1.浮动元素的父级元素：
		overflow：hidden;
  浮动元素之后添加一个块级元素，给块级元素设置浮动。

2.给所有浮动元素的父元素设置 
		::after{
				content:' ';
				clear:left;
				display:block;
				}
3.浮动元素的同级：添加一个空标签，并设置
		clear:both;

定位布局

静态布局

position：static；

是所有元素的默认定位方式，意味着将一个元素定位在默认文档流中。

相对定位

position：relative；

1.与静态定位相似。
2.对于相对定位的元素我们可以通过属性top，bottom，right，left来改变元素最终的位置，元素移动的时候是相对于【当前元素所在的位置】进行移动。

绝对定位

position：absolute；

1.元素脱离默认文档流，即不在原来的位置上；
2.不干扰其他元素在页面中的位置，显示在其他元素的上方；
3.绝对定位元素是相对于它的【包含元素】定位；
4.【包含元素】默认情况下为html，通过为绝对定位元素的父元素设定“position：relative”可以将这个父元素变为当前绝对定位元素的父元素。
5.当两个绝对定位元素叠加在一起的时候，可以使用“z-index”来改变两个绝对定位与元素出现的顺序（z-index取值无需指定单位，值大的的显示在上方。）

固定定位

position：fixed；

1.固定定位元素相对于浏览器视口；
2.不会随浏览器的滚动而滚动。

伸缩盒布局

三列布局

为了使article分列显示，只需要为article元素的父元素section，使用如下规则修饰

.section{   display:flex;}

修饰后，三列在一行中显示，高度相等，宽度动态调整，当调整浏览器宽度的时候，每一列的宽度会动态调整。

三行布局

默认情况下，主轴是X轴，即flex容器中的各个元素在一行中分多列显示。如果想在一列中显示多行，我们可以将主轴改为Y轴

flex-direction:row(列布局)
flex-direction:column(行布局)

自动换行

将每一个article设定为宽度至少是200px；

atricle{
		flex：200px;
		}

多个article在一行中填充，如果一行放不下则换行

section{
		flex-wrap:wrap;			//换行
		}

简写：

flex-direction:row;					
						==>		flex-flow:row wrap;
flex-wrap:wrap;

等比例划分

section{
		display:flex;   //秒变伸缩盒子
		}
		
article{
		flex:1;       //article占一份
		}
		
article:nth-of-type(3){
		flex:2;             //第三个article占2份
		{

剩余部分等比例划分

sectin{
		display:flex;
		}
		
article{
		flex:1 200px;			//每份article的宽度200px
		}
		
article:nth-of-type(3){
		flex:2 200px;			//第三个article占2份 每份宽度200px
		}