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 – 弹性布局

以下内容主要参考阮大神Blog

采用 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：换行，第一行在下方