对于前端而言，css知识可以算是一个比较重要的知识点了。其中很多其他非专业同学可能对于javaScript有一定的了解，但都对css相关知识知之甚微。而且一般css相关的问题，在项目中遇到得一些布局问题，就是搜也搜不到，看起来是一个小问题，但是可能解决起来需要很久。
总之，是一个前端需要着重注意得知识点！！！
1. css选择器及优先级
!important > 行内样式（1000） > id选择器（100）> 类选择器（10）> 伪类选择器（10）> 标签选择器（1）> 伪元素选择器（1）> 通用选择器（0）
注意点：
减少使用!important, 避免优先级过高而无法被覆盖。
若优先级相同，则后出现得样式生效
2.css中一些可继承得属性
字体属性： font-size, font-family,
文本属性： text-align, line-height, color
3.flex布局
容器属性：
flex-direction:
flex-wrap:
flex-flow: 是flex-direction和flex-wrap的简写方式
justify-content：
align-items:
align-content:
项目属性：
order: 定义项目的排列顺序，数值越小，排列越靠前，默认为0
flex-grow:
flex-shrink:
flex-basis:
flex: 是 flex-grow,flex-shrink, flex-basis的简写
align-self：
4.盒模型
标准盒模型： 标准盒模型设置的宽度和高度为内容的宽度和高度
怪异盒模型： 怪异盒模型设置得宽度为内容的宽度 + padding + border
如何设置为 怪异盒模型： box-sizing: border-box
5. 多行文本的省略展示
overflow:hidden
text-overflow:ellipsis
white-space:nowrap
6.一些常用的像素单位
px,rpx,em,rem,vh,vw
px: 屏幕能显示的最小单位
em,rem: 文本相对长度单位，em相对于父元素，rem相对于根元素
vh: 视口高度 vw: 视口宽度
rpx: 是小程序中的相对长度单位，它会根据屏幕的宽度进行自适应调整
7.圣杯布局与双飞翼布局
- 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
- 双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的
8.水平垂直居中
display: flex justify-content: center align-items: center
文本类： text-align: center, line-height: 设为height
通过定位position：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 自身 height 的一半 */
margin-left: -50px; /* 自身 width 的一半 */
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
9.bfc：块级格式化上下文
如何设置为块级格式化上下文：
-
float： 不是none
-
display: flex, inline-block
-
position: fixed,absoluted
-
overflow: hidden,auto,scroll
块级格式上下文的好处：解决margin塌陷问题
10.一些常见的问题
如何画一条0.5px的线： 浏览器的最小单位是1px, 那么如何画一条0.5px的线？ 设置transform: scale(0.5,0.5);
如何解决移动端的1像素问题： transform: scale(0.5)；使用伪元素实现
