Css布局-常规流笔记
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Floworghttps://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Normal_Flow
前言
常规流布局是html元素默认布局，凡是没有设置过css布局的html元素，默认布局方式称为常规流布局，它有好几个中文名字：正规流，正常流，常规流，文档流，你知道指的是一件事即可，英文名字就一个：Normal flow。应该是早期翻译标准的问题。。。
前置知识：块级元素
css属性display为block的元素，称为块级元素
.first {
display: block;
}
前置知识：行级元素
css属性display为inline的元素，则是行级元素
div {
display: inline;
}
前置知识：盒模型
html元素由4部分组成，包括content、padding、border、margin，这就是盒模型。。每个元素都是一个盒子
前置知识：元素关系
<body>
<div>
<p></p>
<p></p>
</div>
</body>
父子关系：p元素位于div元素的内部，p元素称为子元素、div则称为父元素
兄弟关系：两个p元素是同一个父元素时，他俩称为兄弟关系
祖先关系：p元素都是body元素的后代
前置知识：包含块（containing block）
每个盒子都有它的包含块，包含块决定了盒子的布局，绝大部分情况下盒子的包含块，是父元素的内容盒
常规流中的块级元素
每个块级元素默认填充父元素所有水平空间，并沿着其块向伸长以容纳其内容，每个块级元素会在上一个元素下面另起一行，content不够时，margin来凑
<div>
<p>块级元素</p>
<p>我也是块级元素</p>
</div>
块级元素居中
1、width定为固定值
2、margin设为auto
块级子元素为填充满父元素，它的margin需要自动填充满水平方向的剩余空间，元素看起来就居中了
常规流中的行级元素
行级元素的大小是content的大小，水平排列，排列不下，自动换行
<div>
<span>我是行级元素</span>
<span>我也是行级元素</span>
</div>
行级别元素怎么居中？
至今没有找到……
脱离Normal Flow的办法
1、float
2、position
3、display:flex
总结
1、Normal Flow是所有Html元素的默认布局方式，只要没有设置，那么它就是常规流布局
2、元素一旦设置float:xx、position:xx、display: flex等方式，即指定了布局方式，元素自动脱离常规流布局