css相关

说下盒模型

盒模型由四个部分组成：margin、border、padding、content
标准(IE)盒模型：width = content （box-sizing:content-box;）
怪异盒模型：width = content + padding + border （box-sizing:border-box;）

display有哪些值？说明他们的作用

none: 元素不显示，并从文档流中移除
inline: 行级元素
block: 块级元素
inline-block: 行级块元素
flex: 弹性盒子
inherit: 规定继承父元素的display值

position有哪些值？区别是什么

relative：相对定位，相对元素本身位置进行定位，不脱离文档流
absolute：绝对定位，相对最近的有定位属性的父级进行定位，否则相对文档定位，并且脱离文档流
fixed：绝对定位，相对文档定位，脱离文档流
static：默认值，没有定位
inherit：规定继承父元素的定位属性

对BFC的理解

块级格式化上下文，一个元素形成了 BFC 之后，它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到 它的内部元素。它就像是一个隔离区域，和其他区域互不影响
触发BFC：设置浮动（float）、设置绝对定位（fixed、absolute） 、display=inline-block|flex|table-cell…、overflow=hidden|auto|scroll…

解释一下为什么需要清除浮动？清除浮动的方法

浮动带来的问题：
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式利用clear属性，可以在块级元素上定义clear：both或者在浮动元素的伪元素上定义display：block；clear：both

权重

!important > 行间样式 > id > class|属性 > 标签 > 通配符

页面居中方式

1. position:absolute; top:50%; left:50%; margin-top:-元素一半;margin-left:-一半 （知道元素宽高的情况）
2. position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) （不知道元素宽高）
3. position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;
4. display:flex;flex-direction:row;justify-content:center;align-items:center

css3新增的属性

border-raduis、伪类（:nth-child…）、transform（scale、rotate、skew、translate）、animation、transition、box-shadow、text-shadow…

常见的兼容性问题

不同浏览器的标签默认的margin和padding不一样。解决办法是加一个全局的*{margin:0;padding:0;} 来统一；