预备知识： 定位，尺寸，浮动布局，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
- 浮动最开始不是用来布局，主要是用来做文字环绕的。
- 清楚浮动的两种方法：
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; //允许单个项目有与其他项目不一样的对齐方式
}
网友评论