CSS中的一些细节
一、塌陷
1.当position设置为：absolute或者fixed时，元素的display会转换为block。（设置float也会产生这样的效应）
2.正常情况下，div会被内容撑开，但是如果设置了1.的情况下，父元素就会产生塌陷，失去高度。
解决办法：
给父元素设置高度。
给父元素设置overflow: hidden;
二、文本的自动换行
对于那种长单词，会超出元素的实际宽度。
解决办法
word-break:break-all;
三、文本溢出部分隐藏
解决办法
overflow: hidden;
四、溢出打点
4.1 单行文本打点
p{
width: 200px;
overflow: hidden;
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*溢出部分点样式*/
}
4.2 多行文本溢出打点
p{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /*行数*/
-webkit-box-orient: vertical;
}
五、flex布局
当设置了display: flex;后，那么子元素的float、clear和vertical-align属性失效。
flex布局，分为容器和项目两个部分。一般而言，容器就是父元素，项目就是该父元素下的子元素。
（1）flex-direction: row（默认）| row-reverse | column | column-reverse
决定主轴方向，也就是定义容器元素是行方向排列还是列方向排列，
并且定义它的起点方向，例如行方向是从左向右还是从右向左。
反之，列方向是从上到下还是相反呢。（row是行，column是列。）
（2）flex-wrap: nowrap（默认） | wrap | wrap-reverse
决定是否都拍在一行（列）里，也就是是否换行。
以行为例有三种情况，不换行、换行（第一行在上方），换行（第一行在下方）
（3）flex-flow: row nowrap（默认）
这是flex-direction属性和flex-wrap属性的简写形式，
第一个参数定义排列方式，第二个参数定义是否换行。
（4）justify-content: flex-start | flex-end | center | space-between | space-around
调整主轴方向上项目的对齐方式。
以行向排列为例，可以设置为靠左对齐，靠右对齐，水平居中对齐。
还有两个特殊的：
space-between（两端对齐，相当于文本对齐【text-align】里的justify）；
space-around（元素两侧间隔相等，且比它与边框的间隔大一倍）
（5）align-items: flex-start | flex-end | center | initial（从父元素继承）
调整交叉轴方向上的项目对齐方式。
如果行方向是主轴方向，那么列方向就是交叉轴方向。
以行方向为例，可以设置垂直在上，垂直在下，垂直居中。
两个特殊的：
baseline（项目元素第一行文字的基线对齐）；
stretch是默认的（如果项目元素没有设置高度，那么它就会自动拉伸高度至整个容器高度）
六、rem适配方案
https://www.cnblogs.com/nyan-workflow-fc/p/10698237.html
七、元素居中
- 文本（img也是）元素水平居中 text-align: center;
- 块级元素水平居中 margin: 0 auto;
- 单行文本垂直居中 设置line-height和div的height
- 不确定高度的文本垂直居中 使用padding-top和padding-bottom
- 确定高度的块级元素垂直居中 position: absolute; top:50%; margin-top: -高度的一半;
- 绝对定位实现垂直居中 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
- 给父元素设置 display: table-cell; vertical-align: middle;
- css3 设置完定位和top,left后设置 transform: translate(-50%,-50%);
- 弹性盒子（有兼容问题）