css 布局

预备知识： 定位，尺寸，浮动布局，flex布局，移动端时代

一. 定位：position: relative/absolute/fixed/static/inherit/sticky

• static(默认)：元素出现在正常的流中（但是，若设置会导致 top, bottom, left, right 或者 z-index 声明）。
• relative：元素相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。因此，"left:20" 会向元素的left位置添加 20 像素。
• absolute：元素不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)。
• fixed：生成绝对定位的元素（因此该元素也不再占有文档流位置），但是元素相对于浏览器窗口进行定位。
• sticky：(这是css3新增的属性值)粘性定位，其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。 测试代码

偏移量属性： top, left, right, bottom; 我们知道这些属性不会对static的元素起到作用。这也就是其最大区别于margin属性的地方，margin主要针对盒模型设置外边距。

二.尺寸： px, %, rem, em

• 百分比：百分比的参照物是父元素，50%相当于父元素width的50%
• rem：这个对于复杂的设计图相当有用，它是html的font-size的大小
• em：它虽然也是一个相对的单位，相对于父元素的font-size，但是，并不常用，主要是计算太麻烦了。
  盒模型： (1)标准盒子模型box-sizing: content-box, width的长度等于content的宽度；(2)box-sizing: border-box，盒子模型的width=border+padding+content的总和。

三.浮动： float: left/right

1. 浮动最开始不是用来布局，主要是用来做文字环绕的。
2. 清楚浮动的两种方法：
   overflow: 将父元素的overflow，设置成hidden。
   after伪类：对子元素的after伪类进行设置。

四.flex布局

知乎image.png

flex布局的重要概念如下：

• main axis：水平主轴
• cross axis：垂直的交叉轴
• Flex 容器(parent)

.parent {
    display: flex | inline-flex;   //容器被设置为flex布局后，其子元素的 float、clear、vertical-align 的属性将会失效。
}

• flex容器上的6个属性

.parent {
flex-direction:  row | row-reverse | column | column-reverse;//默认为row，表示水平从左向右排列
flex-wrap: nowrap | wrap | wrap-reverse;  //默认为nowrap,表示即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
flex-flow: 老老实实用上面分开的写法吧，不用记这个了
justify-content: flex-start | flex-end | center | space-between | space-around;//定义了项目在主轴的对齐方式。
align-items:flex-start | flex-end | center | baseline | stretch;// 定义了项目在交叉轴上的对齐方式
align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}

平时经常用到两端布局，这时候第一个想到的就是： justify-content: space-between

• flex容器的孩子的6种属性

.item {
order: <integer>; //定义项目的排列顺序，数值越小，排列越靠前，默认值为 0
flex-basis: <length> | auto; //定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。
flex-grow: <number>; //定义项目的放大比例
flex-shrink: <number>; //定义项目的缩小比例
flex:  none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];//上述三种属性的简写
align-self: auto | flex-start | flex-end | center | baseline | stretch; //允许单个项目有与其他项目不一样的对齐方式
}