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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了前端开发面试题之CSS_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9960字，纯文字阅读大概需要15分钟。

内容图文

“每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:last-of-type  选择属于其父元素的最后 
   元素的每个 
   元素。  p:only-of-type  选择属于其父元素唯一的 
   元素的每个 
   元素。  p:only-child    选择属于其父元素的唯一子元素的每个 
   元素。  p:nth-child(2)  选择属于其父元素的第二个子元素的每个 
   元素。  :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

内容总结

以上是互联网集市为您收集整理的前端开发面试题之CSS_html/css_WEB-ITnose全部内容，希望文章能够帮你解决前端开发面试题之CSS_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端