1..介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒

（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE 的 content 部分把 border 和 padding 计算了进去;

2.CSS 隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。
此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

3.CSS 清除浮动的几种方法

清除浮动： 核心：clear:both;

1.使用额外标签法（不推荐使用

在浮动的盒子下面再放一个标签，使用 clear:both;来清除浮动
a 内部标签：会将父盒子的高度重新撑开
b 外部标签：只能将浮动盒子的影响清除，但是不会撑开盒子

2.使用 overflow 清除浮动（不推荐使用）

先找到浮动盒子的父元素，给父元素添加一个属性：overflow:hidden;就会清除子元素对页面的影响

3.使用伪元素清除浮动(用的最多)

伪元素：在页面上不存在的元素，但是可以通过 css 添加上去
种类：

:after(在。。。之后)
:before(在。。。之前)
//注意：每个元素都有自己的伪元素
~~~.clearfix:after {
content:'';
height:0;
line-height:0;
display:block;
clear:both;
visibility:hidden;  /_将元素隐藏起来_/

在页面的 clearfix 元素后面添加了一个空的块级元素
（这个元素的高为 0 行高也为 0 并且这个元素清除了浮动）
}
.clearfix {
zoom:1;/为了兼容 IE6/
}

4..页面导入样式时，使用 link 和@import 有什么区别

Link 属于 html 标签，而@import 是 CSS 中提供的
在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS

@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

5.伪元素和伪类的区别？

伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；
伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。
伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；
伪类是给页面中已经存在的元素添加一个类。
伪元素和伪类的区别？
伪元素使用 2 个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；
伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。
伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）
伪类是给页面中已经存在的元素添加一个类。

6.CSS 选择符有哪些？哪些属性可以继承？优先级算

1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul id > class > tag
important 比 内联优先级高
CSS 选择符有哪些？哪些属性可以继承？优先级算
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul id > class > tag
important 比 内联优先级高

7.CSS3新增伪类举例：

p:first-of-type 选择属于其父元素的首个 ‹p› 元素的每个 ‹p› 元素。
p:last-of-type  选择属于其父元素的最后 ‹p› 元素的每个 ‹p› 元素。
p:only-of-type  选择属于其父元素唯一的 ‹p› 元素的每个 ‹p› 元素。
p:only-child  选择属于其父元素的唯一子元素的每个 ‹p› 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 ‹p› 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 ‹p› 元素的每个 ‹p› 元素。
p:last-of-type  选择属于其父元素的最后 ‹p› 元素的每个 ‹p› 元素。
p:only-of-type  选择属于其父元素唯一的 ‹p› 元素的每个 ‹p› 元素。
p:only-child  选择属于其父元素的唯一子元素的每个 ‹p› 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 ‹p› 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。

8.行内元素和块级元素的具体区别是什么

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），就是里面文字或图片的大小。

9.什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin-collapse。
在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和

10.rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，
而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

11.css 中可以让文字在垂直和水平方向上重叠的两个

垂直方向：line-height
水平方向：letter-spacing
css 中可以让文字在垂直和水平方向上重叠的两个
垂直方向：line-height
水平方向：letter-spacing

12.px 和 em 的区别px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。

浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em, 10px=0.625em。

13.如何垂直居中一个元素？

方法一：绝对定位居中（原始版之已知元素的高宽）

.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
margin-top: -100px; /*设为高度的1/2*/
margin-left: -100px; /*设为宽度的1/2*/
}

方法二：绝对定位居中（改进版之一未知元素的高宽）

.content {
width: 200px;
height: 200px;
background-color: #6699ff;
position: absolute; /*父元素需要相对定位*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/
}

方法三：绝对定位居中（改进版之二未知元素的高宽）

.content {
width: 200px;
height: 200px;
background-color: #6699ff;
margin: auto; /*很关键的一步*/
position: absolute; /*父元素需要相对定位*/
left: 0;
top: 0;
right: 0;
bottom: 0; /*让四个定位属性都为0*/
}

方法四：flex 布局居中

body {
display: flex; /*设置外层盒子display为flex*/
align-items: center; /*设置内层盒子的垂直居中*/
justify-content: center; /*设置内层盒子的水平居中*/
.content {
width: 200px;
height: 200px;
background-color: #6699ff;
}
}
//那么问题来了，如何垂直居中一个 img（用更简便的方法。）
.content {
//img的容器设置如下
display: table-cell;
text-align: center;
vertical-align: middle;
}

15.什么是 BFC

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件
浮动元素，float 除 none 以外的值
定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-block，table-cell，table-caption
overflow 除了 visible 以外的值（hidden，auto，scroll）
BFC 的特性
内部的 Box 会在垂直方向上一个接一个的放置。
垂直方向上的距离由 margin 决定
bfc 的区域不会与 float 的元素区域重叠。
计算 bfc 的高度时，浮动元素也参与计算
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

16.用纯 CSS 创建一个三角形的原理是什么？

span {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
}

17.Sass、LESS 是什么？大家为什么要使用他们？

他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。

例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

Sass、LESS 是什么？大家为什么要使用他们？

他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

18.display:none 与 visibility:hidden 的区别是什么

display : node 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
display:none 与 visibility:hidden 的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

19.移动端 1px 问题的解决办法

推荐解决方法：媒体查询 + transfrom
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}

20.哪些 css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;哪些 css 属性可以继承？
可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;