CSS总结

1.position

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

2.flex布局常用

1.flex-direction:决定主轴方向

row:主轴为水平方向。排列为从左至右。

column:主轴为竖直方向。排列为从上至下。

row-reverse:主轴为水平方向。排列为从右至左。

column-reverse:主轴为竖直方向。排列为从下至上。

2.flex-wrap:默认情况，排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式

nowrap:自动缩小项目，不换行。

wrap:换行，第一行在上。

wrap-reverse:换行，第一行在下。

3.justify-content 决定子元素在主轴上的对齐方式

flex-start:左对齐。

flex-end:右对齐。

space-betwenn:两端对齐。

space-around:沿轴线均匀分布。

4.align-items 决定子元素在交叉轴的对其方式

flex-start:顶端对齐。

flex-end:底部对齐。

center:竖直方向居中对齐。

stretch:如子元素未设置高度，子元素将和容器等高对齐。

5.align-content 该属性定义了当有多根主轴时，即子元素不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效

flex-start：左对齐。

flex-end：右对齐。

center：居中对齐。

space- between：两端对齐。

space-around：沿轴线均匀分布。

stretch：各行将根据其flex-grow值伸展以充分占据剩余空间。

 5.flex-grow

定义了当flex容器有多余空间时，子元素是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同的子元素的放大比例。

 5.flex:1

 

个人认为是1代表1份，2代表2份。。。

官方文档我也不知说的什么：

让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容

3.nth-child()

规定属于其父元素的第n个子元素的样式：

3.nth-of-type(2)

指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：

5.calc()

允许计算 CSS 的属性值，比如动态计算长度值。

 

6.-webkit-line-clamp

是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。 

 7.margin：设置0 auto，会自动占据中间部分