1.position的值， relative和absolute分别是相对于谁进行定位的？
absolute :生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。
§ fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
§ relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
§ static 默认值。没有定位，元素出现在正常的流中
§ sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出
2.浮动和清除浮动
https://www.cnblogs.com/jing-tian/p/10950277.html
浮动产生负作用：
1、背景不能显示
2、边框不能撑开父元素
3、margin padding设置值不能正确显示
浮动之后会使父元素内的子元素漂浮在父元素上方，造成父元素边框重叠。所以需要清除浮动来使子元素撑开父元素
如何清除：
1.clear:both清除浮动 <div class=“clear”></div>
2.使用after伪元素清除浮动 .aa:after{clear:both;overflow:hidden}
3.对父级设置适合CSS高度
4.对父级设置overflow:hidden，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏；
3display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
4.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
选择符：
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（lia）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li:nth-child）
优先级：!important > 行内样式>ID选择器 > 类选择器/属性/伪类 （即可）> 标签 > 通配符 > 继承 > 浏览器默认属性
新增伪类举例：
p:first-of-type选择属于其父元素的首个<p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:enabled :disabled控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
CSS中link 和@import的区别是？
(1) link属于HTML标签,引用css使用，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import被引用的CSS会等到引用它的CSS文件被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重 高于@import的权重.
position:absolute和float属性的异同
§ 共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
§ 不同点：盒子中的文本会环绕float，会被absolute覆盖；float仍会占据位置，absolute会覆盖文档流中的其他元素。
介绍一下box-sizing属性
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
§ content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
§ border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
什么是FOUC？如何避免FOUC？
FOUC即无样式内容闪烁（Flash Of Unstyled Content），是在IE下通过@import导入css文件引起的。
IE会首先加载整个HTML文档的DOM，然后再导入外部的css文件。因此，在页面DOM加载完成到css导入完成之间，有一段时间页面上的内容是没有样式的，这段时间的长短跟网速和电脑速度都有关系。
解决方法：在之间加入一个标签来导入css文件。
如何实现三角形
.arrow{
width:0;
height:0;
border: 10px solid transparent;//边框线为透明实线，transparent是透明
border-left-color: orange;
}实现水平垂直居中
块状元素：
利用绝对定位 + margin: auto实现，设置top left bottom right为0
利用绝对定位，设置top left为50%，并设置transform： translate（-50%，-50%）实现
行内元素：
使用text-align: center，并将line-height值设置为父元素高度
rem和em的区别？
rem是根据html根元素的字体大小进行换算的，而em是根据 *父元素的字体大小进行换算的
vh和vw单位是什么？
vw =view width
vh =view height
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值
缺点
利用视口单位实现，依赖于视口大小而自动缩放，失去了最大最小宽度的限制；
结合rem单位来实现布局，而rem正好可以动态改变根元素大小
浏览器编辑css的顺序，为什么
从右往左 eg.div ul li .test{ }
有机会一次选中目标元素（算法复杂度低）
从左开始，可能发生读取的内容和该元素实际样式不匹配
怎样显示溢出省略号
white-space: nowrap;//使文本不换行，知道遇到标签停止
overflow: hidden;//截去溢出部分
text-overflow: ellipsis;//溢出显示省略号圣杯布局和双飞翼布局
圣杯：借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，同一个杯子，非主要元素其只是占据了全部容器的padding值部分.
缺点：（main<left即会变形）
双飞翼：给主要部分main-wrap添加一个外层元素main，其他非主要元素所占据的空间是主要部分(main-wrap)的margin空间，像鸟的两个翅膀，与主要部分main脱离(main和main-wrap是下面双飞翼布局的元素id)。
块状元素和行内元素转换
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
行内元素、块状元素和块状行内元素区别
行内元素：
(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
块状元素
(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
行内块状元素
(1)不自动换行
(2)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)默认排列方式为从左到右
块状元素行内元素举例
块状元素：
div、selection、hx、ol、ul 、dl、table、<h1>…<h6>、p
行内元素：
<em>定义为强调的内容
<i>斜体文本效果
<img>向网页中嵌入一幅图像
<input>输入框
<label>标签为
<input> 元素定义标注（标记）
<q>定义短的引用
<samp>定义样本文本
<select>创建单选或多选菜单
<small>呈现小号字体效果
<span>组合文档中的行内元素
