前端面试题之CSS(2021持续更新ing...)

1、说一说盒子模型
盒模型分为标准盒模型和怪异盒模型（IE）

box-sizing : content-box //标准盒模型
box-sizing : border-box  //怪异盒模型

标准盒模型:这种盒模型设置width的时候的值是内容区的宽度,如果再设置padding和margin,border的话盒子的实际宽度会增大；
怪异盒模型:这种盒子的width设置的值为盒子实际的宽度,border和padding的设置不会影响盒子的实际宽度和高度

2、CSS新特性

transition //过渡
transform //旋转、缩放、移动或者倾斜
animation //动画
gradient //渐变
shadow //阴影
border-radius //圆角

3、什么是BFC
BFC是格式化上下文，它是一个独立的渲染区域，让处于BFC内部的元素和容器外的元素布局不会相互影响。

4、显示省略号样式

display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/
-webkit-box-orient: vertical; /*值必须为vertical*/
-webkit-line-clamp: 2; /*值为数字，表示一共显示几行*/
overflow: hidden;

5、display:none 和 visbility:hidden的区别
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，
就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

6、link 和 @import 的区别
①link属于HTML标签，而@import是CSS提供的。
②页面加载的时候，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
③import只在IE5以上才能识别，而link是HTML标签，无兼容问题。
④link样式的权重高于@import样式的权重。

7、CSS选择器（符）有哪些？
id选择器、类选择器、类型选择器、伪类选择器、通配符、群组选择器、包含选择器、属性选择器