16 - css 面试题梳理

1. 请列出你所知道的使用 css 让元素上下居中方案(最好包含 flex 的方法)；

1）利用定位：先给父元素加一个定位属性，然后给子元素一个绝对定位，四个方向设置0，然后用 margin 居中

pisition:absollute;
top:0;bottom:0;left:0;right:0;
margin:auto;

这个是水平垂直居中，同理水平和垂直只需要设置对应方向为0 就可以 2）通过 line-height 实现垂直居中 大概就是line-height=height的值 3) 通过 transform, 让元素居中 给该元素设置相对定位

position:relative;
top:50%;
transform:transtlateY(-50%);

4) 使用 padding 值之类的属性使得元素居中 5) 使用 css3 样式属性 display:flex 设定水平垂直居中，父元素样式属性 display:flex; 子元素使用 margin:auto; 未知子元素高度的时候依然可以使用。一般 chrome 和火狐都能很好地支持。ie 不支持 Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模

2. css 中 box-sizing 的作用 / css 有哪些盒子模型？它们对应的样式是什么？

1) box-sizing 的属性为三个值之一

2) 标准盒模型 + IE 盒模型 具体理解就是 标准盒子模型：width / height = 实际宽高 IE盒模型：width / height = 实际宽高 + padding + border

3. 如让适配不同大小的手机屏幕；

1) 使用 meta 标签中的viewport：视口,快捷键meta:vp+tab键 2）使用媒体查询 media screen and (最大宽度){变化的内容} 3）使用移动端开发单位 rem

4. 请罗列常见的清除浮动方案 / CSS 清除浮动的方法（至少两种） / HTML 中浮动塌陷问题如何解决

1) 给父元素设置固定高度 2) 给父级加上 overflow:hidden 3) 利用伪元素 after，来使用clearfix. (前三个比较重要，后边可加可不加)

{display:block;
content:"";
clear:both;
overflow:hidden
font-size:0;
height:0;
visibility:hidden
}
.clearfix{
*zoom=1
}

5. CSS 中表示长度的单位有哪些；

我只列出常用的

1) 绝对单位 cm 厘米 ,mm 毫米,px 像素 2.54cm = 25.4mm = 96px 2) 相对单位长度 emx 相对文本尺寸，ex 字体高度的一半，rem 相对根元素 html来计算，一般给根元素 视口单位长度（作为了解） vw / vh[相对视口宽高，1vw / vh 相当于视口宽高的1%] vmax / vmin[相对于视口宽高但是被均分成100个 单位]

6. CSS 中那个属性用来定位元素；

position

• static: 默认值不脱离文档流
  
• relative：相对定位，不脱离文档流，结合四个方位相对于自己的左上角进行定位
  
• absolute：绝对定位，脱离文档流，结合四个值相对于离他最近的元素进行定位，注意：脱离文档流
  
• fixed：固定定位，脱离文档流，相对于可视窗口进行定位，出现滚动条也不会随之滚动
  
• z-index：提高层级（这个不是定位的属性）
  

7. HTML5 中新增的属性有哪些 / html5 你用过哪些？

在此总结常用的

h5 中 header 头部，nav 导航，canvas 定义图片，audio 音频，video 视频，footer 页尾，section 相当于div，dialog定义对话，time 时间，figure 图片 / figcaption 图片文字。 input中 tel 电话，emali 邮件，number 数字，color 颜色，file 文件选择框，search 搜索框 form 中 placeholder 框里不输入东西会弹出提示 autofoucs 自动获取焦点

8. 举例并简述块级元素与行内元素的区别 / 块级和行内元素有哪些，他们有什么区别；

行内元素

• span
  
• a
  
• em / i
  
• strong / b
  
• sub / sup
  

块元素

• div
  
• dl / dd / dt
  
• p
  
• ul / ol / li
  
• table
  
• h1-h6
  

行内块元素

• img
  
• textarea
  
• input

区别

行内 (1) 设置宽高无效 (2) 对 margin 仅设置左右方向有效，上下无效；padding 设置上下左右都有效，即会撑大空间,行内元素尺寸由内含的内容决定，盒模型中 padding, border 与块级元素并无差异，都是标准的盒模型，但是 margin 却只有水平方向的值，垂直方向并没有起作用。 (3) 不会自动进行换行

块级 (1) 能够识别宽高 (2) margin 和 padding 的上下左右均对其有效 (3) 可以自动换行 (4) 多个块状元素标签写在一起，默认排列方式为从上至下

行内块 (1) 不自动换行 (2) 能够识别宽高 (3) 默认排列方式为从左到右 在 HTML5 中，程序员可以自定义标签，在任意定义标签中，加入 display:block; 即可，当然也可以是行内或行内块状。

9. html 中的 doctype 的作用是什么？ 你知道多少种文档类型

• 作用
  • 1. doctype 的作用是文档声明
       
• 类型
  • 1. html5 html4 xhtml
       

       10. 请解释一下什么是语义化的 html / 简述什么叫做标签语义化；日常工作中怎样遵循标签语义化:

语义化 html 语义化的 HTML 就是写出的 HTML 代码，符合内容的结构化（内容语义化），选择合适的标签（代 码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析.

标签语义化

1. 有利于 SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页

的权重。

1. 在没有 CSS 的时候能够清晰的看出网页的结构，增强可读性。
2. 便于团队开发和维护，语义化的 HTML 可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
3. 支持多终端设备的浏览器渲染
4. 以上就是扯淡简单理解就是：合理的标签做合理的事情

遵循方法

• 尽量减少使用无意义标签，例如 span 和 div;
  
• 尽量不使用标签本身的 css 属性，例如 b
  
• font、s 等标签，如果需要这些样 式，那么使用
  
• css 样式来进行添加;
  
• 在需要强调的部分，使用 strong、em，但是样式尽量使用 css 样式来描述;
  
• 表格搭建时，使用表格头部 表格身体 表格尾部`;
  
• 列表搭建时，使用无序列表有序列表 定义列表 ;
  

11. 实现页面的三栏布局，左右均为定宽，高度可以自适应；（双飞翼布局 、圣杯布局）

https://www.cnblogs.com/woodk/p/5147085.html 这个是渔人码头的博客，还是很好理解的

12. 请描述 css 选择器的优先级原则?

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。 作为 style 属性写在元素内的样式

• id选择器
  
• 类选择器
  
• 标签选择器
  
• 通配符选择器
  
• 浏览器自定义或继承
  

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

13. 解释 CSS sprites(雪碧图)如何使用？

CSS Sprites 是 CSS 图像合成技术，有的称 CSS 精灵有的称雪碧图，他的作用就是把网页上很多小图标放到一张图片里面，然后通过 CSS 里面的 background-position 来控制每个图片的坐标，再利用 CSS 的“background-image”，“background- repeat”的组合来精确的定位出背景图片的位置。 使用场景

• 1.静态图片，不随用户信息的变化而变化
  
• 2.小图片，图片容量比较小
  
• 3.加载量比较大
  

14. CSS 中的 animation 动画如何使用 / transition animation 什么区别？

使用方法 由”@keyframes”开头，后面是 “动画的名称”加上 “{}”，括号中就是一些不同时间段样式规则。可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，比如说移动，改变元素颜色，位置，大小，形状等

div{
animation: box 1s ease 2s infinite alternate forwards;
}
@keyframes box {
0%{transform: translateX(0)}
100%{transform: translateX(1000px)}
}

区别 a、transition 需要一个触发事件 (hover,checked,focus) 才会随时间改变其CSS属性；animation 在不 需要触发任何事件的情况下，也可以显式的随时间变化来改变元素 CSS 属性。 b、transition 是一次性的，除非不停的触发；animation: 可以设置循环次数或 (infinite) 不停的执行动 画 c、transition 只能定义开始状态和结束状态，不能定义中间状态，只有两个状态。 animation 通过控制 keyframes(关键帧) 来控制动画的每一步，类似 flash 的关键帧来声明动画。 （0%,10%,70%,100%），或(from,to) d、一条 transition 规则，只能定义一个属性的变化，不能涉及多个属性。

15. 使用 css,让一个 div 消失在视野中；发挥想象力?

这个就比较重要了，认真试试吧

display: none;隐藏不占位 visibility: hidden;隐藏占位 transform: translate(-9999px); margin-top: -9999px; position: absolute;top:-9999px; opacity: 0; width:0;overflow: hidden; height: 0;overflow: hidden; background-color:transparent;透明 transform: scale(0);缩放 clip-path: polygon(100% 100%);裁剪

16. 至少写出3种 css3 新增的属性?

• border-radius: 圆角
  
• box-shadow：阴影
  
• border-image：边框图片
  
• text-shadow: 文字阴影
  
• transform
  • translate 位移
    
  • rotate 旋转
    
  • scale 缩放
    
  • skew 转动时给定的角度
    
  • rotateX/rotateY/rotateZ：3D 旋转属性
    
• box-sizing 父级宽高不变，内容随便折腾
  

17. 如何用 css 绘制一个三角(不允许使用图片)？

<style type="text/css">
.trangle{
width: 0;
border-width: 100px 100px 100px 100px;
border-style: solid;
border-color: transparent transparent red transparent;
} 
</style>
<div class="trangle">

绘制左右三角形的时候适当调整height:0 <br />border-height:边框高度 border-width 边框线宽度 border-style 边框线的类型 solid 实线 dashed 虚线 dotted 点状线 border-color 颜色 需要什么方向 保留当前方向的颜色 其他方向为透明

18. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

Webkit 内核(v8引擎)：谷歌浏览器(chrome) 、 safari、大部分国产浏览器(360、搜狗、QQ、UC、猎豹、百度…)、安卓和IOS大部分手机浏览器… Gecko 内核：火狐浏览器(firefox) Presto 内核：欧朋浏览器(opera) Trident 内核：IE浏览器（IE6 - IE11）

19. div + css 的布局较 table 布局有什么优点？

div+css 布局的好处： 1.符合 W3C 标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。 2.布局精准，网站版面布局修改简单。 3.加快了页面的加载速度（最重要的）（在 IE 中要将整 个table 加载完了才显示内容）。 4.节约站点所占的空间和站点的流量。 5.用只包含结构化内容的 HTML 代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。 table 布局的好处（table 布局也不是一点用的没有，这点是毋庸置疑的） 1.容易上手。 2.可以形成复杂的变化，简单快速。 3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

20. img 的 alt 与 title 有何异同？ strong 与 em 的异同？

• alt 属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方
  
• title 属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似 jQuery 的 hover
  
• 但从视觉上效果观看 b 与 strong、i 与 em 是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strong、em 标签、而不能识别 b 与 i 标签
  建议：为了符合 CSS3 的规范，b 应尽量少用而改用 strong ,i 应尽量少用而改用 em
  

  21. 对 BFC 规范的理解?

我反正不是很理解

BFC 即 Block Formatting Contexts (块级格式化上下文)，它是指一个独立的块级渲染区域，只有块级参与，该区域拥有一套渲染规则来约束块级盒子的布局，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。 通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 有点像 box-sizing

22. 你能描述一下渐进增强和优雅降级之间的不同吗?

• 渐进增强（progressive enhancement）

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强

.box{
-webkit-border-radius:10px;
-moz- border- radius: 10px;
border- radius: 10px;
}

• 优雅降级（graceful degradation）

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。也就是以高要求，高版本为基准，向下兼容。同样以 css 为例，优雅降级的写法如下

.box{
border- radius: 10px;
-moz- border- radius: 10px;
-webkit- border- radius: 10px;
}

• 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
  话很难理解，然并卵···就是一个兼容顺序
  

23. 为什么利用多个域名来存储网站资源会更有效？

• 1. CDN 缓存更方便
• 1. 突破浏览器并发限制（一般每个域名建立的链接不超过6个）
     
• 1. Cookieless，节省带宽，尤其是上行带宽一般 - 比下行要慢
     
• 1. 对于 UGC 的内容和主站隔离，防止不必要的安全问题(上传 js 窃取主站 cookie 之类的)。正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
     
• 1. 数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事。这个可能被用的不多。
     PS: 关于 Cookie 的问题，带宽是次要的，安全隔离才是主要的。关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做 dns 解释也是耗时间的，而且太多域名，如果要走 https 的话，还有要多买证书和部署的问题。
     

24. csshack 问题：

https://www.zhangxinxu.com/wordpress/2013/05/css3-box-shadow-animation-loading-ie10-css-hack/

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

作为了解吧，谁也背不下来

• 网页的结构层：

（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息

• 对“如何显示有关内容”的问题做出了回答。
  
• 网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

网页的表示层和行为层总是存在的，即使我们未明确地给出任何具体的指令也是如此。此时， Web 浏览器将把它的默认样式和默认事件处理函数施加在网页的结构层上。例如，浏览器会在呈现“文本段”元素时留出页边距，有些浏览器会在用户把鼠标指针悬停在 某个元素的上方时弹出一个显示着该元素的 title 属性值的提示框，等等。

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

这个题就比较有意思了

先看看’display’、’position’ 和 ‘float’ 的相互关系

• ‘display’ 的值为 ‘none’
  如果 ‘display’ 的值为 ‘none’，那么 ‘position’ 和 ‘float’ 不起作用。在这种情况下，元素不产生框。因此浮动和定位无效
  
• 就是说，当元素是绝对定位时，浮动失效，’display’ 会被按规则重置
  
• ‘float’ 的值不是 “none”。
  按照规则，span 是行内元素，因此不能够设置其宽度和高度。但是浮动后’display’ 成为block
  

position 跟 display、overflow、float 下的 margin collapse。 margin collapse 我觉得这里的意思应该是 Collapsing margins，即外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。 其中所说的 margin 毗邻，可以归结为以下两点： •这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。 •这些 margin 都处于普通流中。

折叠问题 1、两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。 折叠后 margin 的计算 1) 参与折叠的 margin 都是正值 取其中 margin 较大的值为最终 margin 值 2) 参与折叠的 margin 都是负值 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移 3) 参与折叠的 margin 中有正值，有负值 毗邻的 margin 中有正值，同时存在负值会怎样呢？有正有负，先取出负 margin 中绝对值中 最大的，然后，和正 margin 值中最大的 margin 相加。 4) 相邻的 margin 要一起参与计算，不得分步计算 要注意，相邻的元素不一定非要是兄弟节点，父子节点也可以，即使不是兄弟父子节点也可 以相邻。 而且，在计算时，相邻的 margin 要一起参与计算，不得分步计算。

2、浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折 叠.

3、创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠

4、元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

27. px 和 em 的区别？

• px

1. 表示“绝对尺寸”（并非真正的绝对），实际上就是 css 中定义的像素，利用px设置字体大小及元素宽高等比较稳定和精确。
2. 它是绝对单位，不会因为其他元素的尺寸变化而变化。
3. px 的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

• em

1. 表示相对尺寸，值并不是固定的，其相对于当前对象内文本的 font-size（如果当前对象内文本的 font-size 计量单位也是 em，则当前对象内文本的 font-size 的参考对象为父元素文本 font-size）。
2. 使用 em 可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的 font-size 及当前对象内文本的 font-size，如有遗漏可能会导致错误。
3. 当使用 em 单位时，像素值将是 em 值乘以使用 em 单位的元素的字体大小。

• rem

1. 也表示相对尺寸，其参考对象为根元素的 font-size，因此只需要确定这一个 font-size。
2. 当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。

28. CSS 中 link 和 @import 的区别是？

• link 和 @import 虽然都是引入外部的 css 文件，但是他们是有天差地别的区别的;
  
• link 是 html标签，@import 完全是 css 提供的方- 式，要写在 css 文件或者 style 标签中;
  他们的加载顺序也是有区别的，当一个页面被加载的时候，link 引用的 css 文件会被同时加载，而 @import 引入的 css 文件会等页面全部下载完后再加载;
  
• 当使用 javascript 控制 DOM 去改变 css 样式的时候，只能使用 link 标签，因为 @import 是不能被 DOM 控制的;
  

29. 为什么要初始化样式？

一般引用 reset 样式表，了解一下

CSS 初始化是指重设浏览器的样式。由于浏览器的兼容的问题，不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。如果没对 CSS 初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化 CSS 样式的属性，为我们将用到的 CSS 或 html 标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少 CSS 代码量，节约网页下载时间。 弊端：初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

30. Sass、LESS 是什么？大家为什么要使用他们？

• SASS 是一种 CSS 开发工具，是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。提供了许多便利的写法，大大节省了设计者的时间，使得 CSS 的开发变得简单和可维护，后缀名 .scss

• Less 是一门 CSS 预处理语言，也是一种动态样式语言. 对 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。它扩展了CSS 语言，增加了变量，Mixin，函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或者浏览器端。后缀名.less

为什么使用它们？

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