# css常规问题

# 垂直居中的方案

弹性盒
- display:flex
- align-items:center
- justify-content:center
translate
- position: absolute
- top: 50%
- left: 50%
- transform: translate(-50%,-50%)
相对定位
- position: absolute
- top/right/bottom/left:0
- margin:auto
table+vertical-align
- display: table-cell
- vertical-align: middle

清除浮动原理
- 清除浮动代码
```
.clearfix:after{
    content:'';
    diaplay:block;
    clear:both
}
//兼容ie低版本
.clearfix{
    *zoom:1
}
```
- 主要属性=>clear:both 规定在左右两侧不允许浮动元素
- display:block clear只能在块级元素上起作用
- visibility:hidden/height:0 只要content的值为空，写不写都无所谓
BFC定义
- 块级格式化上下文，是一个独立的渲染区域
- 让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。
触发BFC条件
- 根元素
- position: absolute/fixed
- display: inline-block / table
- float 元素
- ovevflow !== visible
BFC规则
- 属于同一个 BFC 的两个相邻 Box 垂直排列
- 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- BFC 中子元素的 margin box 的左边，与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
- BFC 的区域不会与 float 的元素区域重叠
- 计算 BFC 的高度时，浮动子元素也参与计算
- 文字层不会被浮动层覆盖，环绕于周围
BFC应用
- 阻止margin重叠
- 可以包含浮动元素 —— 清除内部浮动 (清除浮动的原理是两个div都位于同一个 BFC 区域之中)
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖
- 其子元素的float/clear/vertical属性将失效

px (pixel，像素):相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em(相对长度单位，相对于当前对象内文本的字体尺寸):em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸
- 特点: em的值并不是固定的/em会继承父级元素的字体大小
rem（root em，根em）
- vue中使用postcss-px2rem
- 自动将vue项目中的px转换为rem
- 因为 postcss-plugin-px2rem 这个插件配置选项上有 exclude 属性，它可以配置是否对某个文件夹下的所有css文件不进行从px到rem的转换。
- rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位
- 优点：只需要设置根目录的大小就可以把整个页面的成比例的调好
- rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem
em与rem的区别：
- rem是相对于根元素（html）的字体大小，而em是相对于其父元素的字体大小
- 如何使 1rem=10px？在设置HTML{font-size：62.5%；}即可
补充内容：
- vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100
- vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100
- vm其中最小的那个被均分为100单位的vm

单行文本溢出省略
- overflow:hidden(文字超出限定宽度，则隐藏超出的内容)
- white-space:nowrap(设置文字在一行显示，不能换行)
- text-overflow:ellipsis(规定当文本溢出时，显示省略符号来代表被修剪得文本)
多行文本溢出省略(只适用于webkit内核)
- -webkit-line-clamp:2(用来限制在一个块元素现实的文本行数)
- display:-webkit-box(和1结合使用，将对象作为弹性伸缩盒子显示)
- -webkit-box-orient:vertical(和1结合使用，设置或检索伸缩对象的子元素的排列方式)
- overflow:hidden
- text-overflow:ellipsis