CSS -- 布局篇
CSS -- 布局
CSS中最重要的应该就是布局和定位， 也就是display和position两个属性
定位篇在这里
布局
CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型
- 外部显示类型：定义了元素怎样参与流式布局的处理
- 内部显示类型：定义了元素内子元素的布局方式
由于display的取值共有32种之多， 所以只讲几种常见的：
- none
- inline
- block
- inline-block
- flex
none - 隐藏对象
这个很好理解，就是把此对象隐藏，并且在文档流中删除。这个与visibility属性的hidden值不同，hidden的隐藏只是不显示，但是物理位置是存在的。
inline - 行内元素
行内元素，顾名思义就是当前元素在一行之内，不会自动换行。例如<img> <a> <span> ...
特性
- 不会独占一行，同级行内元素会排列在一行内，排列不下会换一行
- 设置width和height无效，始终为auto
- 对于margin和padding，只有left和right有效， top和bottom无效
讲到这里可能有些小伙伴就有疑问了，<img>是行内元素，但是它可以改width和height啊，这里就牵扯到另一个问题，可替换和不可替换元素。
可替换元素： 元素往往没有实际内容，浏览器根据元素的标签和属性，来决定元素的具体显示内容。如<img> <input> <textarea> <select> <object>, 这些元素在显示出来的时候，也被加了一层框，也就有了block的特性，相当于是一个inline-block(行内块元素)
不可替换元素: 内容直接显示在浏览器
block - 块级元素
块级元素， 元素前后带有换行符
特性
- 独占一行，宽度默认占满父元素
- 可以设置width和height
- 可以设置margin和padding
inline-block - 行内块元素
同时具有块级元素和行内元素的特性。
特性
- 不会独占一行
- 可以设置width和height
- 可以设置margin和padding
flex - 弹性布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
avatar
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
容器主要属性
flex-direction: 决定主轴方向
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
-
column-reverse：主轴为垂直方向，起点在下沿。
avatar
justify-content： 项目在主轴上的对齐方式
- flex-start: 默认，左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等
-
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
avatar
align-items: 项目在交叉轴上的对齐方式
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline: 项目的第一行文字的基线对齐
-
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
avatar
flex-wrap: 主轴上排列不下时，如何换行
- nowrap： 不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
