前端开发最常见面试题—css(含答案）

1、什么是盒子模型？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

2、CSS选择符有哪些?哪些属性可以继承?
id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div， h1， p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel = “external”]）
伪类选择器（a:hover， li:nth-child）
可继承的样式： font-size font-family color
不可继承的样式：border padding margin width height ；

3、CSS优先级算法如何计算?
优先级就近原则，同权重情况下样式定义最近者为准。
载入样式以最后载入的定位为准。
优先级为：!important > id > class > tag important比内联优先级高

4、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元素。
:after 在元素之前添加内容，也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled 控制表单可用
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

5、display有哪些值?说明他们的作用。
block：像块类型元素一样显示。
none：元素隐藏
inline-block：像行内元素一样显示，但其内容像块类型元素一样显示。 一般很少用到
list-item：像块类型元素一样显示，并添加样式列表标记。
table：此元素会作为块级表格来显示
inherit：规定应该从父元素继承 display属性的值

6、position包含几种属性?absolute和relative的区别?
static：默认状态、没有定位、正常流
inherit：从父元素集成position属性的值
fixed：生成绝对定位的元素(相对于浏览器窗口进行定位)
absolute：生成绝对定位的元素(相位与static定位以外的第一个父元素定位)
relative：生成相对定位的元素(相对于其正常位置定位)
absolute和relative区别：父元素的padding对relative的子元素布局有影响，absolute的子元素不受影响

7、CSS3有哪些新特性?
圆角：（border-radius:8px）
多列布局：（column-count/column-gap/column-rule） 不用，本身有bug
阴影和反射：（Shadow\Reflect）
文字特效：（text-shadow）
文字阴影文字渲染：（Text-decoration）
下划线之类的线性渐变（gradient）
转换 （transform）
过渡（transition）
动画（animation）

8、浮动元素引起的问题和解决办法?
浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决办法:
（1）使用空标签清除浮动。弊端就是增加了无意义标签。
style=“clear:both;
（2）使用overflow。给包含浮动元素的父标签添加css属性 overflow:auto
（3）使用after伪类：
#parent:after{
content：” "；
height：0；
visibility：hidden；
display：block；
clear：both；
}

9、css sprite是什么，有什么优缺点。
概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。
优点：减少HTTP请求数，极大地提高页面加载速度。增加图片信息重复度，提高压缩比，减少图片大小。更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。
缺点：图片合并麻烦，维护麻烦，修改一个图片可能需要从新布局整个图片，样式。

10、如何通过css 实现元素的垂直水平居中？注意：前提是元素没有固定的宽高
（实现方法有多种，以下是其中一种）
.ele{
/设置元素绝对定位/
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

11、px和em的区别
相同点：px和em都是长度单位；
异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

12、display与visibility有何异同？
display可以有很多值，visibility只有两个常用值：visible、hidden。
当display为none、visibility为hidden时都会隐藏元素。但display会隐藏掉元素空间，visibility会保留元素空间。

13、什么是响应式设计?响应式设计的基本原理是什么?
响应式设计就是为了实现根据不同设备环境自动响应及调整网页布局的一种设计方案。基本原理就是利用css的媒体查询功能更具不同屏幕的大小，向下兼容设备、移动优先，达到响应的效果。

14、响应式布局的原理?
Meta标签定义：
使用 viewport meta 标签在浏览器上控制布局
meta name=“viewport” content=“width=device-width，initial-scale=1，maximumscale=1” />
使用媒体查询Media Queries适配对应样式：
@media only screen and (min-width:768px)and(max-width:1024px){}
@media only screen and (width:320px)and (width:768px){}
百分比布局：宽度不固定，可以使用百分比
#head{width:100%；}
#content{width:50%；}
响应式图片
#wrap img{ max-width:100%； height:auto；}
字体设置
一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。css3引入了新的单位叫做rem，和em类似，但相对于Html元素，rem更方便使用，而em是相对于父级元素的：
html{font-size:100%；}
完成后，可以定义响应式字体：
@media (min-width:640px){body{font-size:1rem；}}
@media (min-width:960px){body{font-size:1.2rem；}}
@media (min-width:1200px){body{font-size:2rem；}}