CSS面试题总结

1.CSS盒模型

分为标准盒模型：box-sizing: content-box

　　width和height为content的width和height

　　元素的宽度等于width+margin+border+padding

怪异盒模型(IE模型)：box-sizing:border-box

　　width和height为除了margin的部分

　　元素的宽度等于width

在Web文档首部加了DOCTYPE声明，即使用标准盒模式，如果不加，则会由浏览器自己决定

2.px、em、rem

px是固定的像素，一旦设置了就无法因为适应页面大小而改变

em和rem是相对长度单位，更适用于响应式布局

em相对于父元素的font-size

rem相对于根元素的font-size

tips：有的浏览器有最小字体大小。如Chrome，为12px，如果只用em或rem转换为比12px小时，会强制显示为12px

3.CSS常用选择器

通配符：*

ID选择器：#id

类选择器：.class

元素选择器：p、a等

后代选择器：p、span、div、a等

伪类选择器：a：hover等

属性选择器：input[type="text"]等

选择器权重：!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认

4.CSS新特性

transition：过渡

transform：旋转、缩放、移动或倾斜

animation：动画

gradient：渐变

shadow：阴影

border-radius：圆角

5.行内元素和块级元素

行内元素（display：inline）

宽度和高度由内容决定，与其他元素共占一行的元素，如<span>、<i>、<a>等

块级元素（display:block）

默认宽度由父容器决定，默认高度由内容决定，独占一行并且可以设置宽高的元素，如<p>、<div>、<ul>等

经常使用CSS的display：inline-block，使他们拥有更多的状态

6.绝对定位和相对定位的区别

position：absolute

绝对定位：相对于元素最近的已定位的祖先元素

position：relative

相对定位：相对于元素在文档中的初始位置

7.flex布局

8.BFC

在正常的文档流中，块级元素是按照从上到下，内联元素从左到右的顺序排列的

Box：CSS布局的对象和基本单位，即一个页面是由很多个Box组成的，元素的类型和display属性，决定了这个Box的类型。不同的Box会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

常见的Formatting context

　　BFC：block formatting context，块级格式上下文，它是一个独立的渲染区域，只有块级元素参与，它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干

　　　　哪些元素会生成BFC：

1. 1. 根元素
   2. float属性不为none
   3. position为absolute或fixed
   4. display为inline-block、table-cell、table-caption、flex、inline-flex　　
   5. overflow不为visible（一般设定为BFC会使用overflow：hidden，因为像float可能会影响网页布局，但是overflow属性很大概率上不会影响网页布局）　

　　　　BFC布局规则：

1. 1. 属于同一个BFC的两个相邻Box的margin会发生重叠，解决方法：给相邻的元素外再套一个BFC使它们属于不同的BFC
   2. BFC区域不会与float box重叠
   3. BFC就是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素，外面的元素也不会影响到BFC里面的元素，如float属性(最关键的原理，所有实例的本质其实都是这条规则)　　　　　

　　IFC：Inline formatting context

 9.link和@import的区别

<style type="text/css">

　　@import url(CSS文件路径地址);

</style>

<link href="CSSurl路径" rel="stylesheet" type="text/css" /

link是html的一个标签，功能较多，可以定义RSS，定义Rel等作用；而@import是CSS的语句，只能用于加载CSS

link会在页面显示之前全部加载完成，所以不会出现闪烁的问题

但是@import所引用的CSS会等页面加载完成后再加载，所以可能会出现闪烁，即先没有样式，闪烁之后才出现@import引入的CSS样式