程序员web前端分享HTML5常见面试题集锦三

1、用线性渐变实现如下图的斜线？

答案：<div></div>

<style>

div{margin:50px auto; width:100px;height:100px;border:1px solid #333;

background:linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);

}

</style>

2、用CSS实现单行居中显示文字，多行居左显示效果，如图：

答案:<div><p>只有一行时居中显示文字，多行居左显示多行居左显示</p></div>

<style>

body,p{ margin: 0; padding: 0;}

div{text-align: center;width: 400px;height: 400px; background: #ddd; margin: 30px auto; font-size: 20px;}

p{display: inline-block;text-align: left;}

</style>

3、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

答案：标准的盒模型是基于 doctype 正确书写的情况下，并且是高于 IE6 的浏览器才会有的。

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

4、什么是外边距重叠？重叠的结果是什么？

答案：在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

3）两个外边距一正一负时，折叠结果是两者的相加的和。

5、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

答案：一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。在布局上有了比以前更加灵活的空间。

程序员web前端分享HTML5常见面试题集锦四

1、为什么要初始化CSS样式？

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

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

2、浮动元素引起的问题？

答案：a. 父元素的高度无法被撑开，影响与父元素同级的元素

b. 与浮动元素同级的非浮动元素会跟随其后

c. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

3、line-height三种赋值方式有何区别？（带单位、纯数字、百分比）？

答案：带单位：px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高

纯数字：把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px

百分比：将计算后的值传递给后代

4、:link、:visited、:hover、:active的执行顺序是怎么样的？

答案：L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜欢和讨厌两个词来概括

5、css属性content有什么作用？有什么应用？

答案：css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容，可以配合自定义字体显示特殊符号。。

6、文字超出显示为省略号？

答案：//单行：

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

//多行：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

7、HTML5有哪些新增的表单元素？

答案：datalist datetime output date month week time color number range email url

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

答案：首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

9、什么时候可以触发BFC？

答案：根元素，即html

float的值不为none（默认）

overflow的值不为visible（默认）

display的值为inline-block、table-cell、table-caption

position的值为absolute或fixed

10、style标签写在body后与body前有什么区别？

答案：页面加载自上而下 当然是先加载样式。

写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）