首页 > 代码库 > Front End Developer Questions 前端开发人员问题（二）
Front End Developer Questions 前端开发人员问题（二）
问题来源：http://markyun.github.io/2015/Front-end-Developer-Questions/
二、CSS
1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
答：标准的CSS盒子模型：宽度=内容的宽度+边框的宽度+内边距宽度
低版本的盒子模型：指的是内容的宽度
2、CSS选择符有哪些？哪些属性可以继承？
答：（1）类选择符；id选择符；
（2）class属性，伪类a标签，列a表ul，li，dl，dd，dt
注：
优先级（就近原则）：!important > [ id > class > tag ]
Important 比 内联优先级高
3、CSS优先级算法如何计算？
答：元素选择符：0,0,0,1
一个class选择符：0,0,1,0
一个id选择符：0,1,0,0
一个元素标签：1,0,0,0,
注： 注意：
（1）!important声明的样式优先级最高，如果冲突再进行计算。
（2）如果优先级相同，则选择最后出现的样式。
（3）继承得到的样式的优先级最低。
4、CSS3新增伪类有那些？
答：p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
答：居中div：
margin：0 auto
浮动元素的居中：
（1）父级div设置固定宽度，加上margin：0 auto，子级div浮动
（2）在table中插入div，div设置浮动，在table上设置margin：0 auto，而table不要设置宽度。
绝对定位的居中：
（1）外层的相对定位的大div用margin：0 auto；然后这个绝对定位用left或者top来调。
6、display有哪些值？说明他们的作用。
答：常用的（显示）：
inline（默认）--内嵌
none--隐藏
block--块显示
table--表格显示
list-item--项目列表
7、position的值relative和absolute定位原点是？
答：static（默认）：按照正常文档流进行排列
relative（相对定位）参照父级的原始点为原始点，无父级则以BODY的原始点为原始点
absolute(绝对定位)原点：离自己这一级元素最近的一级postion的父元素的左上角，参照浏览器的左
上角，配合left，right，top，bottom。
8、CSS3有哪些新特性？
答：（1）选择器
（2）RGBA和透明度
（3）多栏布局 ：background-origin（图片定位区域）：content-box/padding-box/border-box
（4）多背景图：background-image：url...，url...
（5）word-wrap（对长的不可分割单词换行）word-wrap：break-world
（6）文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色
）
（7）font-face属性：定义自己的字体，@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
url(‘Sansation_Light.eot‘); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
（8）圆角（边框半径）：border-radius 属性用于创建圆角
（9）边框图片：border-image:url(border.png) 30 30 round;
（10）盒阴影：box-shadow: 10px 10px 5px #888888;
（11）盒子大小：background-size(图片尺寸大小)：63px 100px；background-repeat：no-repeat；
（设置百分比是拉伸）；
（12)媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性。
（13）语音
9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
答：称为弹性盒布局模型是css3规范中的一种新的布局方式，该布局模型的目的是提供一种更加高效的
方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方
向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限
制，可以由开发人员自由操作。
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持
10、用纯CSS创建一个三角形的原理是什么？
答：首先，需要把元素的宽度、高度设为0。然后设置边框样式。
{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}
11\一个满屏 品 字布局 如何设计?
答：第一种（真正的品字）思路：
（1）三块高宽是确定的；
（2）上面那块用margin: 0 auto;居中；
（3）下面两块用float或者inline-block不换行；
（4）用margin调整位置使他们居中。
第二种（全屏的品字布局）
基本思路：上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。
12、常见兼容性问题？
答：（1）问题一：不同浏览器的标签默认的margin和padding不同
hack：*{margin:0;padding:0;}
（2）问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
hack：display:inline;将其转化为行内属性
（3）问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度
13、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
答：因为代码之间的间距造成的
解决方法：（1）浮动li中float：left
（2）在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
14、为什么要初始化CSS样式。
答：每一个html标签都有自己的默认样式，而css就是可以改变html的样式。但是对于大量div设置就很
麻烦，所以初始化样式很重要。
15、absolute的containing block计算方式跟正常流有什么不同？
答：position属性：normalflow（一般流）；containing block（包含块）；bfc（）；margin
collapse（float引起元素塌陷）；base line（基线对齐）
一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的，这个长方形就被称之为元
素的 containing block。
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">This is text in the first paragraph…</P>
<P id="p2">This is text <EM id="em1"> in the
<STRONG id="strong1">second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>
产生盒子的元素 其包含块 C.B.（正常计算）
body initial C.B. (UA-dependent)
div1 body
p1 div1
p2 div1
em1 p2
strong1 p2
如果我们按如下方式放置 em1：
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
containing blocks 变成如下：
产生盒子的元素 其 包含块C.B. 为
body initial C.B.
div1 initial C.B.
p1 div1
p2 div1
em1 div1
strong1 em1
16、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
答：当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样
的。
（1）谷歌浏览器中，使用collapse值和使用hidden没有区别。
（2）火狐，opera和IE，使用collapse值和使用display：none没有什么区别，下面的内容会补充他的
内容。
17、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
答：display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种
布局方式，定义元素在哪个方向浮动。类似于优先级机制：position：absolute/fixed优先级最高，有
他们在时，float浮动不起作用，display值需要调整。浮动或者absolute定位的元素，只能是块元素或
表格。
18、对BFC规范(块级格式化上下文：block formatting context)的理解？
答：定位方案：（1）普通流（normal flow）按照html中的先后位置至上而下布局，行内元素水平排列
，当前行被占满后换行，块级元素会被渲染为完整的新行。
（2）浮动（floats）
元素首先按照普通流位置出现，然后根据浮动的方向尽可能的向左向右偏移，与印刷的文本环绕相似。
（3）绝对定位（absolute position）
绝对定位中，元素会整体脱离普通流
BFC正是属于普通流，因此对兄弟元素也不会造成什么影响。
具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并
且 BFC 具有普通容器没有的一些特性。
浮动元素，绝对定位元素，display，overflow会触发BFC。
特性：（1）会阻止外边距折叠
（2）会包含浮动元素
（3）阻止元素被浮动元素覆盖
19、CSS权重优先级是如何计算的？
答：标签的权重为1，class权重为10，id的权重为100.避免权重相同的发生。
20、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
答：（1）出现浮动之后，我们可以很好的进行页面布局
（2）在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或
right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外
面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理
，就叫CSS清除浮动
（3）第一种方式是不对浮动的文本和图像进行清理，而是选择浮动容器div：
第二种方式：利用overflow属性。应用值为hidden或auto的overflow属性有一个有用的副作用，这会自
动清理包含的任何浮动元素
第三种方式：结合使用:after伪类和内容声明在指定的现有内容的末尾添加新的内容：
.clear:after {
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
<div class="news clear">
...
</div>
21、移动端的布局用过媒体查询吗？
答：通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示
@media screen and （min-width：400px）and （max-width：700px）{...}
22、使用 CSS 预处理器吗？喜欢那个？
答：预处理器：less，sass等等（给css像其他程序语言一样，加入一些编程元素，让css能像其他程序
语言一样做一些预定的处理，然后就有了css预处理器）喜欢Sass，less，stylus。Sass 是采用 Ruby
语言编写的一款 CSS 预处理语言
李：$color:red
.test{
color：$color;s
}
执行结果：
.test{
color：red;
}
(1)Sass 语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
(2)SCSS 语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
编译出来的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
23\CSS优化、提高性能的方法有哪些？
答：（1）避免过度约束
// 糟糕
ul#nav{..}
// 好的
#nav{..}
（2）后代选择符不好
html div tr td {..}
（3）避免链式选择符
// 糟糕
.menu.left.icon {..}
// 好的
.menu-left-icon {..}
（4）使用复合（紧凑）语法
// 糟糕
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background: #000;
background-image: url(../imgs/carrot.png);
background-position: bottom;
background-repeat: repeat-x;
}
// 好的
.someclass {
padding: 20px 10px 20px 10px;
background: #000 url(../imgs/carrot.png) repeat-x bottom;
}
（5）避免不必要的命名空间
// 糟糕
.someclass table tr.otherclass td.somerule {..}
//好的
.someclass .otherclass td.somerule {..}
（6）避免不必要的重复
.someclass {
color: red;
background: blue;
font-size: 15px;
}
.otherclass {
color: red;
background: blue;
font-size: 15px;
}
// 好的
.someclass, .otherclass {
color: red;
background: blue;
font-size: 15px;
}
（7）最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
（8）避免！important，可以选择其他选择器
（9）尽可能的精简规则，你可以合并不同类里的重复规则
24、浏览器是怎样解析CSS选择器的？
答：而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render
Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要
为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 renderer。
25、在网页中的应该使用奇数还是偶数的字体？为什么呢？
答：使用的是偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的
点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px
时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
26、margin和padding分别适合什么场景使用？
答：何时使用margin：（1）需要在border外侧添加空白
（2）空白处不需要背景色
（3）上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：（1）需要在border内侧添加空白
（2）空白处需要背景颜色
（3）上下相连的两个盒子的空白，希望为两者之和。
兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通
过改变padding或者指定盒子的display：inline解决。
27、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
答：。。。。。。。。。。。。。
。。。。。。
。。。。。
28、元素竖向的百分比设定是相对于容器的高度吗？
答：PS：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的。
竖向距离的属性，如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它
们时，依据的也是父容器的宽度，而不是高度。
29、全屏滚动的原理是什么？用到了CSS的那些属性？
答：（1）原理：方法一是整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%
，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
（2）overflow：hidden；
transition：all 1000ms ease；
30、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
答：（1）响应式网站设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智
能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。
（2）基本原理: 媒体查询 @media
（3）兼容IE可以使用JS辅助一下来解决
31、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
答：。。。。。。。。。。。。。。。。。。。。。。。。。。。
。。。。。。。。。。。。。今天就看到这里
Front End Developer Questions 前端开发人员问题（二）