前端面试题之css篇（附答案）

css经典面试题

• 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
• box-sizing属性？
• 请列举一下你所知道的css 隐藏元素的方法？
• CSS 常见的伪类和伪元素有哪些，他们的区别？
• CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？
• 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？如何居中一个img（position定位）
• display 有哪些值？说明他们的作用?
• position 的值？
• CSS3有哪些新特性？
• 用纯CSS创建一个三角形的原理是什么？
• 为什么要初始化 CSS 样式
• position 跟 display、overflow、float 这些特性相互叠加后会怎么样？
• 为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？
• 设置元素浮动后，该元素的 display 值是多少？
• 移动端的布局用过媒体查询吗？
• 什么是CSS 预处理器 / 后处理器？大家为什么要使用他们？
• CSS优化、提高性能的方法有哪些？
• 在网页中的应该使用奇数还是偶数的字体？为什么呢？
• margin 和 padding 分别适合什么场景使用？
• 元素竖向的百分比设定是相对于容器的高度吗？
• 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
• 怎么让Chrome支持小于12px 的文字？
• 让页面里的字体变清晰，变细用CSS怎么做？
• 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
• CSS属性overflow属性定义溢出元素内容区的内容会如何处理?
• 有哪项方式可以对一个 DOM 设置它的CSS样式？
• CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
• 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
• px、em、rem的区别
• 前端页面有哪三层构成，分别是什么?
• CSS引入的方式有哪些？使用Link和@import有什么区别？
• 介绍一下你对浏览器内核的理解
• 如何水平并且垂直居中一张背景图
• 强制换行的css是什么？

css面试题解析

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

盒子模型就是 元素在网页中的实际占位，有两种：标准盒子模型和IE盒子模型

• 标准(W3C)盒子模型：内容content+填充padding+边框border+边界margin
  宽高指的是 content 的宽高
• 低版本IE盒子模型：内容（content+padding+border）+ 边界margin，
  宽高指的是 content+padding+border 部分的宽高

问题的拓展：
CSS 如何设置这两种模型？

box-sizing : content-box  box-sizing : border-box

JS 如何设置获取盒模型对应的宽和高？

dom.style.width/height;//设置获取的是内联样式dom.currentStyle.width/height;//只有IE支持window.getComputedStyle(dom).width/height;//兼容性好dom.getBoundingClientRect().width/height;//适用场所：计算一个元素的绝对位置

box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box

• context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
• border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 content + border + padding 部分的高/宽

请列举一下你所知道的css 隐藏元素的方法？

• display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
• visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

CSS 常见的伪类和伪元素有哪些，他们的区别？

• 伪元素主要是用来创建一些不存在原有dom结构树种的元素
• 伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式
• 伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。
  伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里
• 常见的伪类：
  :link 应用于未被访问过的链接
  :visited 应用于被访问过的链接
  :hover 应用于鼠标悬停到的元素
  :first-child 选择某元素第一个子元素
  :last-child 选择最后一个。。。。。
  :disabled 表单元素禁用
  :enabled 匹配没有被禁用的元素
• 常见的伪元素：
  ::first-letter 选择元素文本的第一个字
  ::first-line 选择元素文本的第一行
  ::before 在元素内容的最前面添加新内容。
  ::after 在元素内容的最后面添加新内容。

CSS选择器有哪些？哪些属性可以继承？CSS优先级算法如何计算？

• 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，dt，dd；
  不可继承的样式：border, padding, margin, width, height
  优先级（就近原则）：!important > [ id > class > tag ]
  !important 比内联优先级高

• 优先级算法计算
  优先级就近原则，同权重情况下样式定义最近者为准
  !important>id >class>tag
  important比内联优先级高
  元素选择符的权值：元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000
  !important声明的样式优先级最高，如果冲突再进行计算。
  如果优先级相同，则选择最后出现的样式。
  继承得到的样式的优先级最低。

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？如何居中一个img（position定位）

• 水平居中div：

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

• 水平垂直居中一个浮动元素（position定位）
  第一种：未知元素宽高

<div class="outer">
    <span>我想居中显示</span>
</div>
<style>
    .outer{
        width:300px;
        height:300px;
        position:relative;
        background-color:#ccc;
    }
    span{
        float:left;
        position:absolute;
        backgroond-color:red;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
</style>

第二种：已知元素宽高的

<div class="outer">
    <span>我想居中显示</span>
</div>
<style>
    .outer{
        width:300px;
        height:300px;
        position:relative;
        background-color:#ccc;
    }
    span{
        float:left;
        position:absolute;
        backgroond-color:red;
        width:150px;
        height:50px;
        top:50%;
        left:50%;
        margin:-25px 0px 0px -75px;
    }
</style>

• 绝对定位的div水平垂直居中：

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: auto;
left: 0;
right: 0; 
top:0;
bottom:0;

• 如何垂直居中一个img（display : table-cell 或者 position定位）

<div class="outer">        
    <img src="nz.jpg" alt="">    
</div>
<style>        
    .outer{            
        width: 300px;           
        height: 300px;            
        border: 1px solid #cccccc;            
        display: table-cell;            
        text-align: center;            
        vertical-align: middle;        
    }        
    img{            
        width: 150px;            
        height: 150px;        
    }    
</style>

display 有哪些值？说明他们的作用?

• inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
• block 此元素将显示为块级元素，此元素前后会带有换行符。
• none 此元素不会被显示（隐藏）。
• inline-block 行内块元素。（CSS2.1 新增的值）
• list-item 此元素会作为列表显示。
• table 此元素会作为块级表格来显示（类似table），表格前后带有换行符

position 的值？

• absolute
  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• fixed
  生成固定定位的元素，相对于浏览器窗口进行定位。（老IE不支持）
  元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• relative
  生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流。
  因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
• static
  默认值。没有定位，元素出现在正常的文档流中（忽略 top, bottom, left, right 或者 z-index 声明）。
• inherit: 规定应该从父元素继承 position 属性的值。

CSS3有哪些新特性？

• 新增各种 CSS 选择器 :not(p) 选择每个非p的元素； p:empty 选择每个没有任何子级的p元素（包括文本节点）
• border-radius //用于设置圆角
• 背景 background-clip（规定背景图的绘制区域），background-origin，background-size
• 线性渐变 （Linear Gradients） 向下/向上/向左/向右/对角方向
• 文本效果 阴影text-shadow，textwrap，word-break，word-wrap；
• 2D 转换 transform:scale(0.85,0.90) | translate(0px,-30px) | skew(-9deg,0deg) |rotate()
• 3D转换 perspective()；transform是向元素应用 2D 或者 3D 转换；
• 过渡 transition
• 动画
• 多列布局 （multi-column layout）
• 盒模型
• flex 布局
• 多媒体查询 定义两套css，当浏览器的尺寸变化时会采用不同的属性

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

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

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

为什么要初始化 CSS 样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

• display 属性规定元素应该生成的框的类型；
• position属性规定元素的定位类型；
• float属性是一种布局方式，定义元素在哪个方向浮动。
  类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？

• 出现浮动的原因：
  浮动元素碰到包含它的边框或者浮动元素的边框停留。在CSS规范中，浮动定位不属于正常的页面流，而是独立定位的，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
• 关于css的定位机制：普通流，浮动，绝对定位（position：fixed是position：absolute的一个子类）。浮动的框可以左右移动，直到它的外边缘遇到包含框或者另一个浮动框的边缘，所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以，只含有浮动元素的父容器在显示时不需要考虑子元素的位置，就造成显示父容器像空容器一样。
• 浮动带来的问题：
  父元素的高度无法被撑开，影响与父元素同级的元素
  与浮动元素同级的非浮动元素（内联元素）会跟随其后
  若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
• 清除浮动的方式：
  1.父级div定义height
  2.最后一个浮动元素后加空 div 标签 并添加样式 clear:both。（理论上能清除任何标签，增加无意义的标签）
  3.包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto。

设置元素浮动后，该元素的 display 值是多少？

自动变成display:block

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

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

• <head>里边

<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">

• CSS :

@media only screen and (max-device-width:480px) {
    /css样式/}

什么是CSS 预处理器 / 后处理器？大家为什么要使用他们？

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

其它 CSS 预处理器语言：

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

为什么要使用它们？

• 结构清晰，便于扩展。
• 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

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

• 避免过度约束

• 避免后代选择符

• 避免链式选择符

• 使用紧凑的语法

• 避免不必要的命名空间

• 避免不必要的重复

• 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

• 避免！important，可以选择其他选择器

• 尽可能的精简规则，你可以合并不同类里的重复规则

• 修复解析错误

• 避免使用多类选择符

• 移除空的css规则

• 正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
  display:inline后不应该再使用width、height、margin、padding以及float。
  display:inline-block后不应该再使用float。
  display:block后不应该再使用vertical-align。
  display:table-*后不应该再使用margin或者float。

• 不滥用浮动：虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。

• 不滥用web字体
  对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

• 不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。

• 不在选择符中使用ID标识符，主要考虑到样式重用性以及与页面的耦合性。

• 不给h1~h6元素定义过多的样式

• 全站统一定义一遍heading元素即可，若需额外定制样式，可使用其他选择符作为代替。

• 不重复定义h1~h6元素

• 值为0时不需要任何单位

• 标准化各种浏览器前缀：通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：

.foo{
    -moz-border-radius: 5px;
    border-radius: 5px; 
}

• 使用CSS渐变等高级特性，需指定所有浏览器的前缀
• 避免让选择符看起来像正则表达式
• CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。
• 遵守盒模型规则（Beware of broken box models）

在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

margin 和 padding 分别适合什么场景使用？

◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

◆浏览器兼容性问题
在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。

元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

• 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
• 基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
• 页面头部必须有meta声明的viewport。

<meta name=’viewport’ content=”width=device-width, initial-scale=1. maximum-scale=1,user-scalable=no”>

怎么让Chrome支持小于12px 的文字？

p{
    font-size:10px;
    -webkit-transform:scale(0.8);//0.8是缩放比例
} 

让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing 在 window 系统下没有起作用，但是在 IOS 设备上起作用
-webkit-font-smoothing：antialiased 是最佳的，灰度平滑。

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

• 参数是 scroll 时候，必会出现滚动条。
• 参数是 auto 时候，子元素内容大于父元素时出现滚动条。
• 参数是 visible 时候，溢出的内容出现在父元素之外。
• 参数是 hidden 时候，溢出隐藏。

有哪项方式可以对一个 DOM 设置它的CSS样式？

外部样式表，引入一个外部css文件
内部样式表，将css代码放在 <head> 标签内部
内联样式，将css样式直接定义在 HTML 元素内部

CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

最基本的：设置 display 属性为 none，或者设置 visibility 属性为 hidden
技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在 -1000

行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

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

内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的）。

px、em、rem的区别

px 像素 固定单位 它的大小是固定的
em 相对单位 em的值并不是固定的 em会继承父元素的字体大小 会根据父
元素字体大小的变化而变化 一般1em等于16px
rem 他的值也是不固定的 他会根据根元素的大小而变化

前端页面有哪三层构成，分别是什么?

结构层 Html 表示层 CSS 行为层 js

CSS引入的方式有哪些？使用Link和@import有什么区别？

内联，内嵌，外链，导入

• link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；
• 页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；
• import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

介绍一下你对浏览器内核的理解

主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。

• 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。
• JS引擎则：解析和执行JavaScript 来实现网页的动态效果；
  最开始渲染引擎和 JS 并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎。

如何水平并且垂直居中一张背景图

设置 background-position:center;

强制换行的css是什么？

Word-break:break-all;

持续更新中......