九、如何水平垂直居中布局
.center-flex {
display:flex;
justify-content:center;
align-items:center;
}
<div class="parent"><span></span></div>
.parent{
position:relative
}
.parent span{
width:50px;
height:50px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
1. CSS选择器以及优先级
!important>行内>id>类>标签>通配符>继承>浏览器同一级别
2. display的属性值及其作用
(none 控制元素不显示 不保留元素空间 visibility：hidden 可以保留元素空间)
(block 块级元素 元素显示 独占一行 可以设置宽高)
(inline 默认值 行内元素 不可以设置宽高)
(inline-block 行内块元素 既是行内 又是块 可以设置宽高)
3. display的block、inline和inline-block的区别
4.隐藏元素的方法
（opacity：0）设置元素透明度
（display：none）不保留元素空间
（visibility：hidden）保留元素空间
5. link和@import的区别
6.伪元素和伪类的区别
(伪元素是添加一个没有的元素 通常使用两个冒号 例如 ::before ::after)
(伪类是像存在的元素添加一个类 通常有一个冒号组成 例如 :active :hover :link)
(都是被添加到选择器末尾的关键字)
7.对盒子模型的区别
（标准盒模型 content padding margin border 宽度=width+margin+padding+border）
（怪异盒模型 宽度包含了padding和border）
8. CSS3新特性
transform（translate平移 scale缩放 rotate旋转）
属性选择器（nth-type-of）
边框的圆角（border-raduis）
flex布局（flex-flow justify-content）
transition（transition-property 过度的属性 ）（transition-duration 过度的时间）（transition-delay 过度延迟几秒执行）
9.单行、多行文本溢出隐藏
overflow:hidden,white-space:nowrap,text-overflow:ellipsis
/* 多行文本溢出隐藏 省略号代替*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical; /*设置对其模式，纵向对齐*/
-webkit-line-clamp: 2; /*设置多行的行数*/
10.两栏布局的实现
左侧设置固定宽度，左浮动，右侧宽度auto，右侧margin-left
11.三栏布局的实现
使用flex实现三栏布局：布局分left、center、right，外层套一个content，给content设置display：flex，给left，center、right设置order：1/2/3 进行排序，给left和right设置flex-shrink:0 防止收缩
13.对flex布局的理解以及使用场景
（网页布局中，需要高保真还原设计稿，能够适应不同机型设备，用float和position比较繁琐，不易维护，逐渐出现了响应式布局 flex）
（flex-direction 排列方式 属性：column，row）
（flex-warp 超过宽度 重新起一行排列 wrapper nowrapper ）
（flex-flow 是direction和warp的和 row no-wrapper row wrapper）
（justify-content 主轴对齐方式 flex-start flex-end center space-between space-around）
（align-items 定义了元素在纵轴上的对齐方式 flex-start flex-end center stretch baseline）
（align-content 定义了元素多个轴线上的对齐方式 flex-start flex-end center space-between space-around）
14.为什么需要清除浮动？清除浮动的方式
（因为浮动脱离了标准文档流，会对下面的元素排版产生影响）
（clear：both）
16. position的属性有哪些？区别？（static:默认 没有定位 出现在正常流中 relative:相对于正常元素 absolute:相对于父元素 fixed:相对于浏览器）
17.实现一个三角形
.div{
width:50px;
height:50px;
border-top:50px solid green;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid transparent;
}
18.画一个 0.5px 的线
19.如何解决1px的问题（移动端问题）
20. CSS中可继承与不可继承的属性
22. CSS 优化和提高性能的方法有哪些？
22.1.样式复用，提取公共样式减少代码量
22.2.少用*号
22.3.单一样式-margin-top：0改为margin-top：top
22.4.少使用后代选择器，降低选择器的权重值
22.5.慎重使用高性能属性 浮动 定位
24. display:inline-block 什么时候会显示间隙？
元素之间的空格/换行都会产生间隙
处理方法：
移除空格
使⽤ margin 负值
使⽤ font-size:0
letter-spacing
word-spacing
25. 对媒体查询的理解
（自适应布局，一套代码多个设备应用，合理布局、头部《meta》）
26.对css工程化的理解
27. z-index属性在什么情况下会失效
（1.无定位 2.父标签属性为relative 3.含有float）
28.常见的CSS布局单位
（固定布局盒子的宽高固定、响应式布局媒体查询、弹性布局flex、浮动布局float、定位布局position）
30. display、float、position的执行优先级？
如果display的值为none，则float和position无效
如果position的值为absolution或fixed，则float无效
31.css的行内元素、块级元素、空元素
行内元素：span、a、img、input、strong、select、button
块级元素：div、p、ul、li、h1-h6
空元素：meat、link、input、img、br
32.em和rem的区别
em相对于父元素
rem相对于根元素
r表示root
