前端面试大全（CSS篇——1/2）

面试系列

后续更新分类将同步更新系列目录：

• 前端面试大全（序篇）：https://blog.csdn.net/cainiaoyihao_/article/details/116518423
• 前端面试大全（HTML篇）：https://blog.csdn.net/cainiaoyihao_/article/details/116519021
• 前端面试大全（CSS篇——1/2）：https://blog.csdn.net/cainiaoyihao_/article/details/116521551
• 前端面试大全（CSS篇——2/2）：https://blog.csdn.net/cainiaoyihao_/article/details/117020429
• 前端面试大全（Ajax篇）：https://blog.csdn.net/cainiaoyihao_/article/details/116979060
• 前端面试大全（jQuery篇——含移动端常见问题）:https://blog.csdn.net/cainiaoyihao_/article/details/117281709
• 前端面试大全（JavaScript篇——面试利器值得拥有！）：https://blog.csdn.net/cainiaoyihao_/article/details/117355120

内容介绍

  前端面试大全（CSS篇——1/2）。

1、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

• 有两种，IE 盒子模型、W3C 盒子模型；
• 盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
  （3）区别：IE的content部分把border 和padding计算了进去；
• color=#f40 size=3>项目情况

2、CSS选择符有哪些？哪些属性可以继承？

1. id选择器（# myid）
2. 类选择器（.myclassname）
3. 标签选择器（div, h1, p）
4. 相邻选择器（h1 + p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（* ）
8. 属性选择器（a[rel = “external”]）
9. 伪类选择器（a:hover, li:nth-child）

• 可继承的样式：font-size font-family color, UL LI DL DD DT
• 不可继承的样式：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、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

1. 给div设置一个宽度，然后添加margin:0 auto属性

div{
width:200px;
margin:0 auto;
}

2. 居中一个浮动元素

• 确定容器的宽高宽500 高300 的层
• 设置层的外边距

.div {
width:500px ; height:300px;//高度可以不设
margin: -150px 0 0 -250px;
 position:relative;         //相对定位
background-color:pink;     //方便看效果
left:50%;
top:50%;
 }

3. 让绝对定位的div居中

position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;

6、display有哪些值？说明他们的作用。

block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit规定应该从父元素继承display 属性的值

flex布局、grid布局等 ……

7、position的值relative和absolute定位原点是？

1. absolute生成绝对定位的元素，相对于值不为static的第一个父元素进行定位。
2. fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
3. relative 生成相对定位的元素，相对于其正常位置进行定位。
4. static 默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right z-index 声明）。
5. inherit 规定从父元素继承position 属性的值。

8、CSS3有哪些新特性？

• 新增各种CSS选择器
  （: not(.input)：所有class 不是“input”的节点）
• 圆角
  （border-radius:8px）
• 多列布局
  （multi-column layout）
• 阴影和反射
  （Shadow\Reflect）
• 文字特效
  （text-shadow）
• 文字渲染
  （Text-decoration）
• 线性渐变
  （gradient）
• 旋转
  （transform）
• 增加了旋转,缩放,定位,倾斜,动画，多背景

transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

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

  把上、左、右三条边隐藏掉（颜色设为transparent）

#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}

10、一个满屏品字布局如何设计?

简单的方式：

• 上面的div宽100%，
• 下面的两个div分别宽50%，
• 然后用float或者inline使其不换行即可

11、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

• 行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

12、为什么要初始化CSS样式。

• 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

• 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法：* {padding: 0; margin: 0;} （强烈不建议）

淘宝的样式初始化代码：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

13、absolute的containing block(容器块)计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的position 值不为static 的元素，然后再判断：

1. 若此元素为inline 元素，则containing block 为能够包含这个元素生成的第一个和最后一个inline box 的padding box (除margin, border 外的区域) 的最小矩形；
2. 否则,则由这个祖先元素的padding box 构成。
   如果都找不到，则为initial containing block。

补充：

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
2. absolute: 向上找最近的定位为absolute/relative的元素
3. fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block

14、对BFC规范(块级格式化上下文：block formatting context)的理解？

• （W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
• 一个页面是由很多个Box 组成的,元素的类型和display 属性,决定了这个Box 的类型。
• 不同类型的Box,会参与不同的Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

创建规则：

• 根元素
• 浮动元素（float不是none）
• 绝对定位元素（position取值为absolute或fixed）
• display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
• overflow不是visible的元素

作用：

• 可以包含浮动元素
• 不被浮动元素覆盖
• 阻止父子元素的margin折叠

15、css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/ div{}
/*权重为10*/ .class1{}
/*权重为100*/ #id1{}
/*权重为100+1=101*/ #id1 div{}
/*权重为10+1=11*/ .class1 div{}
/*权重为10+10+1=21*/ .class1 .class2 div{}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

16、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1. 使用空标签清除浮动。
   这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。
2. 使用overflow。
   给包含浮动元素的父标签添加css属性overflow:auto; zoom:1; zoom:1用于兼容IE6。
3. 使用after伪对象清除浮动。
   该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

17、浮动元素引起的问题和解决办法？

浮动元素引起的问题：

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素（内联元素）会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法：

1. 额外标签法

<div style="clear:both;"></div>
<!-- （缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。） -->

2. 使用after伪类

#parent:after{
 content:"."; height:0; visibility:hidden; display:block; clear:both;
}

3. 浮动外部元素
4. 设置overflow为hidden或者auto

18、移动端的布局用过媒体查询吗？

css的媒体查询允许通过@media标签为特定媒体的浏览器设定样式，其中包含众多筛选，功能强大。

19、使用CSS 预处理器吗？喜欢那个？

SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS)

20、CSS优化、提高性能的方法有哪些？

• 将样式表放到页面顶部
• 不使用CSS表达式
• 不使用@import
• 不使用IE的Filter

---

标签：前端面试，CSS

---

更多演示案例，查看 案例演示

---

欢迎评论留言!