前端开发面试题之 CSS_html/css_WEB-ITnose

“每18至24个月，前端都会难一倍”

——赫门 “2015深JS大会《前端服务化之路》主题演讲”

知识点

布局、盒子模型、选择器优先级、CSS3、Flexbox、浮动元素、Sass、Less......

题目&答案

• 介绍一下CSS的盒子模型。

  (1)有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading；(2)盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)。

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

  (1)id选择器（#classId）(2)类选择器（.className）(3)标签选择器（div，h1，p，span，table）(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

• CSS 如何计算优先级？

  就近原则，同权重情况下以样式定义最近者为准；载入样式以最后载入的定位为准；优先级：  !important > id > class > tag  important 比 内联优先级高

• CSS3 新增的伪类有哪些？

  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> 元素。  :enabled        :disabled 控制表单控件的禁用状态。  :checked        单选框或复选框被选中。

• 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？给 div 设置一个宽度，然后添加 margin: 0 auto 属性

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

  居中一个浮动元素

  确定容器的宽高（500*300）设置层的外边距.element{  width: 500px;  height: 300px;               //高度可以不设  margin: -150px 0 0 -250px;  position: relative;          //相对定位  background-color: red;       //显示效果  left: 50%;  top: 50%;}

  让绝对定位的 div 居中

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

• display 有哪些值？各有何作用？

  block 象块类型元素一样显示。none 缺省值。象行内元素类型一样显示。inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。list-item 象块类型元素一样显示，并添加样式列表标记。

• position 中的 relative 和 absolute 的定位原点是什么？

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

• CSS3 有哪些新特性？

  圆角-半径（border-radius:8px），阴影（box-shadow:10px），文字特效（text-shadow、），线性渐变（gradient），旋转（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜增加了更多的CSS选择器多背景 rgba

• 解释一下 CSS3 的 Flexbox （弹性盒布局模型），以及适用场景？

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

  把上、左、右三条边隐藏掉（颜色设为 transparent）#demo {  width:0;  height: 0;  border-width: 20px;  border-style: solid;  border-color: transparent transparent red transparent;}

• 如何设计一个满屏“品”字布局？

  简单的方式：  上面的div宽100%，  下面的两个div分别宽50%，  用float或inline使其不换行。

• 常见兼容性问题有哪些？

  (1)png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8。(2)浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。(3)IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。(4)IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性；解决方法:统一通过getAttribute()获取自定义属性。(5)IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性；解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。(6)Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

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

• 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

• 为什么要初始化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; }

• 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

• CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下有什么区别？

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

• 谈谈你对 BFC 规范（块级格式化上下文：block formatting context）的理解？

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

• 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{}//如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

• 请解释一下为什么会出现浮动？什么时候需要清除浮动？以及清除浮动的方式是什么？

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

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

• 浏览器是怎样解析 CSS 选择器的？

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

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

• 抽离样式模块怎么写？说出思路，有无实践经验？（阿里）

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

• 全屏滚动的原理是什么？用到了 CSS 的哪些属性？

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

• 视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

• ::before 和 :after 中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用。

• 如何修改 Chrome 记住密码后自动填充表单的黄色背景？

• 你对 line-height 是如何理解的？

• 设置元素浮动后，该元素的 display 值是多少？（自动变成display:block）

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

• 让页面里的字体变清晰、变细用 CSS 怎么做？（-webkit-font-smoothing: antialiased;）

• font-style 属性可以让它赋值为“oblique”，oblique 是什么意思？

• position: fixed; 在 Android 下无效怎么处理？

• 如果需要手动写动画，你认为最小时间间隔是多久？为什么？（阿里）

  多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小时间间隔为 1/6*1000ms = 16.7ms

• overflow: scroll 时不能平滑滚动的问题怎么处理？

• png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp、jpg-large？

• 什么是 Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

  如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。

• 介绍一下 Sass 和 Less 是什么？它们有何区别？

  Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。区别：(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

---

系列：前端开发面试题之HTML

---

资料搜集整理自 网络同时发布在 GitHub-前端开发面试题之CSS、GitBook-《WEB-DE》前端开发面试题之CSS