前端面试之CSS篇
1、三种基本引入方式
外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">内部样式表
内联
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
2、CSS的引入方式中link和@import的区别
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
3、CSS选择器
选择器优先级为!important >内联 > id > 伪类 = 类class > 属性 > tag >通配
3.1 基本选择器
类选择器 .className
ID选择器 #idName
元素选择器 elementName
通配选择器 * (效率最低，不推荐用)
属性选择器 element[attr=value]
3.2 权重计算
内联样式表的权值最高 1000；
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
3.3 计算法则
选择器都有一个权值，权值越大越优先；
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
继承的CSS 样式不如后来指定的CSS 样式；
在同一组属性设置中标有"!important"规则的优先级最大；示例如下：
3.4组合选择符
后代选择器（空格符）选取所有后代 A B
子元素选择器 （大于号）选择某一类型 A>B
相邻兄弟选择器 （加号）A+B
普通兄弟选择器 （波浪号）A~B
4、伪元素与伪类
4.1 伪类
CSS伪类匹配被用户激活的元素,接伪类先后顺序被称为LVHA顺序:
:link:visited:hover:active4.2 伪元素
伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式（CSS3使用双冒号）
::after::before::first-letter::first-line::selection5、盒式模型
margin/border/padding/content
margin:a,b,c,d 上/右/下/左 margin:a,b,c 上/左右/下 margin:a,b 上下/左右 margin:a 上下左右6、定位的几种方式：absolute/relative/fixed/static/sticky
absolute
绝对定位的元素的位置相对于最近的已定位父元素（也就是非static定位），如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。relative
相对定位是相对其正常位置。相对于其在普通流中的位置进行定位。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。经常被用来做绝对定位的容器块。fixed
元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关，因此不占据空间。static
HTML元素的默认值，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到 top, bottom, left, right影响。sticky
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
可以知道sticky属性有以下几个特点：
该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量7、清除浮动
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
额外标签
添加<div style="clear:both;"></div>使用overflow
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。使用after伪对象
#parent:after{ /*注意content要有内容*/ content:"."; height:0; visibility:hidden; display:block; clear:both;} 8、display: none;和visibility: hidden;的区别
都是隐藏元素，但是前者文档布局中不占用空间，后者仍占用空间
display：none隐藏产生reflow和repaint（回流与重绘）
前者有株连性，即父元素设置display: none后子元素不管怎样设置都不能显示，而后者的子元素通过设置visibility: visible后还是能显示出来的
9、float和absolute的异同
相同点：都使元素脱离文档流，可以设置宽高
不同点：float仍然占用空间，absolute可以覆盖
10、box-sizing
属性作用：主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box
元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高border-box
让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + contentinherit
继承父元素的box-sizing属性
11、左右布局：左边定宽、右边自适应，不少于3种方法
//方法一（使用CSS3的flex布局）.container { width: 100%; display: flex; flex-flow: row nowrap;}.left { width: 200px; height: 200px; background: green;}.right { flex: 1; height: 200px; background: red;}//方法二(使用CSS3的calc()，注意clac表达式中的减号前后有空格).left { float: left; width: 200px; height: 200px; background: green;}.right { float: left; width: calc(100% - 200px); height: 200px; background: red;}//方法三（不设置宽度，默认填充满）.left { float: left; width: 200px; height: 200px; background: green;}.right { margin-left: 200px; height: 200px; background: red;}//方法四（绝对定位，注意right部分）.left { position: absolute; width: 200px; height: 200px; background: green;}.right { position: absolute; left: 200px; right: 0px; height: 200px; background: red;}//方法五(百分比width，这个方法不是很好使，百分比不好确定).left { float: left; width: 200px; height: 200px; background: green;}.right { float: left; width: 85%; height: 200px; background: red;}//方法六（表格方式，不推荐使用） 12、div水平垂直居中实现方式
/*方法一：使用flex布局*//*加入边框和宽高便于浏览器测试*/.parent { border: 1px solid black; display:flex; justify-content: center; align-items: center;}.child { border: 1px solid black; width: 400px; height: 400px;}/*方法二：绝对定位，左右都是50%，margin-left和top分别为自身一半值的负数*/.parent { position: relative;}.child { border: 1px solid black; width: 400px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -100px;}/*方法三：还是绝对定位，但使用transform*/.parent{ position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}