CSS面试题

1、CSS盒子模型有哪些？

CSS中的盒子模型分为IE盒子模型和标准W3C盒子模型，其中IE盒子模型也叫作“怪异盒子模型”，它们两者之前的一个区别在于盒子的宽度width的一个计算方式，IE盒子模型的宽度除了内容区content还包括border边框和padding内边距，而标准W3C模型的width仅仅只包含内容区content。

除了以上的两种盒子模型，还有一种现代化盒子模型，也就是CSS3模型，其盒子宽度的计算和标准W3C的计算一样。

实际开发中，通过设置box-sizing来指定你使用哪个盒子模型，其中IE盒子模型对应的box-sizing值是border-box，标准W3C盒子模型对应的box-sizing值是content-box

2、画一条0.5px的直线

由于目前设备的限制，直接使用CSS绘制0.5px直线是无法实现的，但是可以通过一些方式，实现视觉效果的0.5px直线。
第一种：通过transform.scale()的方式，将一个1px的线的宽度和高度缩放成原始宽度或者高度的一半
第二种：使用border-image设置渐变，让1px元素的一半为黑色，另外一半为透明。
第三种：使用background中的渐变，也是让一半为黑色，一半为透明

3、link标签和import标签的区别

link标签和import标签都是引入外部资源的一个手段，link标签是一个html标签，页面加载的时候进行一个加载，没有浏览器兼容问题，import是CSS中的规则，在CSS文件解析的时候进行一个加载，具有兼容性问题，IE5以上的浏览器才能进行识别。

4、transition和animation之间的区别

transition是过渡中的一个平滑过渡，通过属性设置起始和结束状态，有点单一。animation是CSS3中的动画，可以精确的控制每一帧，通过关键帧设置每一帧。

5、详细讲一下flex布局

flex布局也叫作弹性布局，使用display:flex ,使得父元素变成弹性容器，那子元素就成了弹性项目，针对父容器和子容器，flex提供了一系列相对应的属性，具体如下：

6、讲一下BFC

BFC也叫格式化上下文，它其实就是元素自带的一些特异功能，但是只有满足某些条件才会被激活。在实际开发中两个最实用的作用就是用来清楚浮动，防止margin塌陷，还有一个是子元素浮动，父元素高度塌陷问题

以下几种方式可以开启元素的BFC：


行内块元素	display:inline-block
表格单元格（table布局）	display：table
overflow的值不为visible的块元素	overflow：hidden
伸缩项目（弹性布局）	display：flex
多列容器	column-count：1
绝对定位、固定定位
column-span：all
display：flow-root

7、垂直居中的问题

垂直居中，可以分开来解释，就是垂直和居中，简单来说就是在最中心


margin的auto法	margin：50%(根据实际来) auto
margin的负值法	子绝父相，然后设置子元素的top和left
table-cell方法	父：display：table-cell vertical-align：middle 子：margin：0 auto
flex弹性布局	display：flex align-items：center justify-content：center

8、讲一下JS动画和CSS动画的差异性

JS动画	CSS动画
主线程和合成线程	合成线程独立完成
复杂动画、交互逻辑	简单动画效果
代码多、逻辑复杂	实现简单
性能会受到主线程负载影响	性能更优

9、说一下块元素和行元素

块元素：块头大，独占一行，所有属性都可以设置
行元素：同一行显示，无法设置宽高，设置内外边距会影响布局

10、多行元素的文本省略号

第一种方法	第二种方法
overflow：hidden	text-overflow：ellipsis overflow：hidden

11、讲一讲visiblity=hidden，opacity=0，display：none之间的区别

（1）visiblity=hidden：在布局中保留其空间，会影响其他元素布局，但元素本身是不可见的
（2）opacity=0：完全透明，保留空间，位置存在，不会影响其他元素布局
（3）display：none 完全移除布局，不占用空间，位置不再存在，不会影响其他元素布局

12、双边距重叠问题（外边距重叠问题）

都为正或负取绝对值较大的
一正一负的话，折叠结果是两者带着符号相加

13、Position属性的比较


固定：fixed	脱离文档流
绝对: relative	不脱离文档流
相对：absolute	相对于已定位父元素、脱离文档流
粘性：sticky	相对定位+固定定位的结合版
默认：static	没有定位

14、讲一讲清除浮动的方法

①给父元素指定高度

②让父元素也浮动，但会带来其他的影响

③给父元素设置overflow：hidden

④使用空的块级元素清除浮动（clearfix）
⑤ 使用额外的父元素清除浮动
⑥ 给浮动元素的父元素加上：display：table

15、讲一讲CSS3的新特性

①选择器方面：动态伪类选择器、目标伪类选择器

②视觉效果方面：圆角、阴影、渐变

③背景效果方面：支持多个背景图片

④布局方面：弹性盒子

⑤字体方面：可以显示用户电脑上没有安装的字体

⑥颜色方面：新增HSL、HSLA、RGBA几种新的颜色格式

⑦2D和3D变化：transform、transform+rotateX或rotateY

⑧动画与过渡效果： animation、transition

16、CSS选择器有哪些？优先级呢？

选择器类型	示例	优先级
单个选择器
元素选择器	`p`	1
类选择器	`.class`	10
ID选择器	`#id`	100
通用选择器	`*`	0 (通用选择器的优先级最低)
属性选择器	`input[type="text"]`	10
伪类选择器	`a:hover`	1
伪元素选择器	`p::first-line`	1
组合选择器
后代选择器	`div p`	1
子元素选择器	`ul > li`	1
相邻选择器	`h2 + p`	1 (相邻选择器本身不增加优先级)
群组选择器
群组选择器	`h1, h2, h3`	取其中最高的优先级