CSS选择器优先级问题
行内样式 1000
id 0100
类选择器、伪类选择器、属性选择器[type=“text”] 0010
标签选择器、伪元素选择器(::first-line) 0001
通配符*、子选择器、相邻选择器 0000
网页布局有哪几种，有什么区别
1. 静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
2. 自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
3. 流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
4. 响应式布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。
实现水平垂直居中
1.
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
2.
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
3.
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
4.
display:flex;
justify-content:center;
align-items: center;
position 四种定位的区别
1. static 是默认值
2. relative 相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中
3. absolute 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指position不是static的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以body元素为偏移参照基准, 完全脱离了标准文档流。
4. fixed 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙
回流和重绘
回流一定重绘，重绘不一定回流
画一个三角形
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg);
清除浮动
最好方式是给浮动的父元素的before和after添加：
// 父元素既有了高度，又清除了浮动
display: table;
content: "";
clear: both;
可继承的样式
font-size
font-family
color
不可继承的样式
border
padding
margin
width
height
px em rem
px固定单位，为电脑分辨率一像素
em是相对父元素的字体大小单位
rem是相对html的字体大小单位，可以理解成 'root em'';
sass/scss(sass3叫做scss) 和 less的区别
1.变量的定义
scss使用$ less使用@
2.变量插值
scss使用${xxx} less使用@{xxx}
CSS3有哪些新特性？
1. CSS3 实现圆角（border-radius:8px;），
2. 阴影（box-shadow:10px）,
3. 对文字加特效（text-shadow）,
4. 线性渐变（gradient），
5. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转，缩放，定位，倾斜 ,
6. 多背景 rgba ,
链接的4个伪类
// 顺序一定要按link、visited、hover、active来设置
link 未点时链接色
visited 已点过的链接色
hover 光标放入链接上的色
active 点击时的样式
响应式布局和媒体查询
响应式布局：实现页面自适应屏幕大小
媒体查询：@media给出不同宽高分辨率或设备下的不同展现样式
BFC & IFC & GFC & FFC
BFC
BFC(Block Formatting Contexts)直译为"块级格式化上下文"。
Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。
IFC
IFC(Inline Formatting Contexts)直译为"内联格式化上下文"，
IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
GFC
GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，
当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。
FFC
FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"，
display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道。
margin重叠问题？
水平：相加
垂直：两正取大 正负相加 两负取小
盒模型？
width：content
总宽：width+margin+border+padding
width：content+padding+border
总宽：margin+width
