CSS面试题总结[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

前面的话

小柒前面总结了与HTML相关的面试题，这篇文章总结CSS相关面试题。

题目

(1) 盒子模型的理解？

盒模型分为两种：标准模式与混杂模式（IE模式）

• 标准盒子模型
  
• IE盒子模型

一般的我们所说的width、height都是指标准盒子模型下的width(也就是content)。

(2) CSS 中哪些属性可以同父元素继承 ?

• 字体系列：font-family，font-size，font-style，font-weight，font-stretch，font-size-adjust；

• 列表相关：list-style，list-style-image，list-style-position，list-style-type，list-style-color；

• 文本系列：text-indent，text-align，line-height，word-spaceing，letter-spacing，text-transform，direction，color；

• 元素可见性：visibility；

• 表格布局：caption-side，border-collapse，border-spacing，empty-cells，table-layout；

• 光标属性：cursor；

(3) box-sizing 常用的属性有哪些 ？分别有什么作用 ？

box-sizing用于告诉浏览器如何计算一个元素总宽度和总高度。

属性：content-box、 border-box、inherit

• box-sizing：content-box
  表示标准盒模型，width = content，总宽度 = content+ padding+border
• box-sizing: border-box
  表示IE盒模型，总宽度 = width = content+ padding+border

(4) 页面导入样式时，使用 link 和 @import 有什么区别 ？

• link是XHML标签，除了能加载css文件，还可以定义rel连接属性；@import只能加载css
• link标签引入的css文件被同时加载；@import引入css将在页面加载完毕之后被加载
• link无兼容性问题，@import只用IE5以上能识别

总的来说link标签优于@import标签。

(5) a标签的4个伪类样式的正确顺序是怎样的？

正确的伪类样式的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

(6) 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 ？

如果一个块级元素没有设置height，那么其高度由子元素撑开，如果子元素使用了浮动，脱离了标准的文档流，那么父元素的高度将不能被其撑开。表现出高度塌陷的现象。

这时我们要避免这种情况发生，就需要清除浮动, 就算子元素浮动了，其父元素也不出现高度塌陷 现象。

清除浮动的方式：

• 父级元素定义height。 但这样定死的高度，往往不是我们想要的。
• 父级结尾处添加一个空div,设置css样式clear:both。 原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度。
• 父级定义伪元素:after和zoom(推荐使用)。 原理：元素生成伪元素的作用和效果相当于方法2中的原理，（使用伪元素生成一个看不见的块级元素，并且设置clear:both样式）但是IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决ie6,ie7浮动问题
  
• 父级div添加css属性：overflow:hidden

(7) position 、float 和 display 的取值和各自的意思和用法

• position 属性取值：static(默认)、relative(处于文档流)、absolute（脱离文档流）、fixed（脱离文档流）、inherit

  注意： z-index只对脱离文档流的元素有效

• float：left (或 right)，向左（或右）浮动。（脱离文档流）

• display 属性取值：none、inline、inline-block、block、table 相关属性值、flex、inherit。

(8) css3的相关动画属性?

CSS3动画三兄弟：transition、transform、animation。

• transition过渡

  	 1、transition-property：指定元素的哪些属性进行过渡，比如width、color等。
  	 2、transtion-duration: 指定属性过渡的持续时间。
  	 3、transition-timing-function: 指定渐变的速度。（如ease、linear、ease-in、 ease-out、）
  	 4、transition-delay: 指定延迟的时间。经过多长时间开始过渡。
  	 这些属性可以分开写，也可以合着写。
  

• transform转换

  transform-origin 属性： 定义元素的中心点。接受三个参数（x-axis y-axis z-axis）

  2D转换方法（常见）：

      1、 translate(x,y)	    定义 2D 转换，沿着 X 和 Y 轴移动元素
  	2、 rotate(angle)	    定义 2D 旋转， 在参数中规定角度
      3、 scale(x,y)	        定义 2D 缩放转换，改变元素的宽度和高度
      4、 skew(x-angle,y-angle)， 定义 2D 倾斜转换，沿着 X 和 Y 轴
  

  3D转换方法（常见）：

  	1、 translate3d(x,y,z)	定义 3D 转换。	
  		translateX(x)	定义转换，只是用 X 轴的值。	 
  		translateY(y)	定义转换，只是用 Y 轴的值。	 
  		translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
  	2、rotate3d(x,y,z)  rotateX(angle)	 rotateY(angle)	 rotateZ(angle)
  	3、scale3d(x,y,z)	scaleX(x)	     scaleY(y)	    scaleZ(z)
  

• animation动画

  共有8个属性，可分开写，可也以合着

  animation-name:myfirst; // 规定 @keyframes 动画的名称
  animation-duration:5s; // 规定动画完成一个周期所花费的秒或毫秒
  animation-timing-function:linear; // 规定动画的速度曲线
  animation-delay:1s; // 规定动画何时开始 
  animation-iteration-count:infinite; // 规定动画被播放的次数,infinite无限次
  animation-direction:alternate;// 规定动画是否在下一周期逆向地播放
  animation-play-state:running;// 规定动画是否正在运行或暂停 
  

  用keyframes定义动画序列。配置了动画执行时间后 利用keyframes配置动画的样子。from 代表 0% 开始动画样式 to 代表 100% 动画结束的样子 中间可以自己配置额外的keyframes ，写法如下：

  @keyframes slidein { 
       
    from { 
       
      margin-left: 100%;
      width: 300%;
    }
      to { 
       
      margin-left: 0%;
      width: 100%;
    }
  }
  

(9) css文件有几种引入方式？

• 外链式（link引入）
• 内联式
• 行内式
• @import引入

  <style type="text/css">
  @import url(my.css);
  </style>
  

(10) CSS Sprite 是什么，谈谈这个技术的优缺点。

CSS Sprite将多张图片合并在一张图上。

优点：

• 利用CSS Sprite 能很好的减少网页的请求次数，提高页面的性能
• 能减少图片总字节

缺点：

• 合并图片时，要把多张图片有序合理的合并在一张图上，制作起来比较麻烦

(11) 浏览器标准模式和怪异模式之间的区别是什么？

• 标准模式：浏览器按W3C标准解析执行代码；
• 怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
• 浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

(12) 如何解决多个元素重叠问题？

使用z-index属性可以设置元素的层叠顺序,适用于定位元素。

(13) CSS 选择符有哪些 ？哪些属性可以继承 ？优先级算法如何计算 ？新增伪类有那些 ？

• id 选择器（ #myid）

• 类选择器（.myclassname）

• 标签选择器（div, h1, p）

• 相邻选择器（h1 + p）

• 子选择器（ul > li）

• 后代选择器（li a）

• 通配符选择器（ * ）

• 属性选择器（a[rel = “external”]）

• 伪类选择器（a: hover, li: nth – child）

优先级：

• 优先级为: !important > id > class > tag , important 比 内联优先级高
• 优先级就近原则，同权重情况下样式定义最近者为准;

(14) 为什么要初始化 CSS 样式 ?

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

(15) 说说你对边距折叠的理解?

外边距折叠（margin塌陷）： 相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）

什么时候会造成margin塌陷？

• 相邻的元素都在普通流中。
• 相邻的元素之间没有其他非空内容隔开

如何解决margin塌陷？

• 浮动元素、inline-block元素、绝对定位元素不会与垂直方向上的其他元素造成margin塌陷
• 创建BFC（块级格式化上下文）的元素，不会造成margin塌陷。

(16) 何时应当时用 padding 和 margin ？

• margin 是用来隔开元素与元素的间距；
• padding 是用来隔开元素与内容的间隔，让内容（文字）与（包裹）元素之间有一段 距离。

(17) ::before 和 :before 中双冒号和单冒号有什么区别 ？

• 起初，伪元素是用:表示的，但在css3中，伪元素的语法被修改为双冒号。这里的::before 和 :before表示的意思一样，都是伪元素。放在主体内容之前作为一个子元素，并不才能在dom之中，只存在页面之中。
• 一般:表示伪类，比如:hover等。

(18) CSS 里的 visibility 属性有个 collapse 属性值 ？在不同浏览器下有什么区别

• 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，被行或列占据的空间会留给其他内容使用
• 在Chrome中，如果此值在非表格元素上使用，与hidden值没有什么区别。
• 在Firefox、Opera和IE中，如果此值在非表格元素上使用，与display:none没有什么区别。

(19) 用 position: absolute 跟用 float 有什么区别吗 ？

• 都是脱离标准流。position: absolute定位时，可以精准的将元素放在各个位置；而float只能向左、右两侧浮动。
• 各自都有自己的优点。在菜单栏，或者一些图标的横向排列时， 一个 float 就解决了，而且每个元素之间不会有任何间距(所以可以用 float 消除元素间的距离)；

(20) line-height: 150%与line-height: 1.5的区别。

 <div class="parent" style="line-height: 150%; font-size:16px;">
        父元素内容
        <div class="son" style="font-size:40px;">
            子元素<br/>
            line-height问题
        </div>
    </div>

• line-height: 150% : 父元素先根据自身的字体计算出行高：16*150% = 24px。然后子元素继承这个行高。
  
• line-height: 1.5：子元素根据自己的字体乘以1.5来计算行高：30 * 1.5 = 45px
  

(21) 任意高度元素的展开收起动画

使用height + overflow：hidden实现比较生硬。好的方式使用max-height

.element { 
   
	max-height: 0;
	overflow:hidden;
	transition: height .25s;
}
.element:active { 
   
	max-height: 666px;
}

(22) 轻松实现hover图片变成另外一张图片

img:hover { 
   
	content: url(xxx.jpg);
}

(2) css中的常见布局

推荐文章：css布局