前端知识点乱炖之一（HTML/CSS）_html/css

前面面试知识总结之HTML/css篇

1.行内元素、块级元素和空（void）元素有哪些？

行内元素：a 、b、span、img、input、strong、select、label、em、button、textarea。

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote。

空元素(没有内容的HTML元素): br、meta、hr、link、input、img。

2. css实现垂直水平居中的方法？

方法一：使用绝对定位+margin使其垂直水平居中；

<html><head><meta charset="utf-8"><title>垂直水平居中</title><link rel="stylesheet" href="index.css"></head><body><div><div></div></div></body></html>

Copy after login

.container{     position:relative;    height: 100vh;}.content{        position: absolute;          width:200px;        height:200px;         background-color:#26A9DF;            top: 50%;        left: 50%;        margin-top:-100px ;          margin-left: -100px;}

Copy after login

方法二：使用绝对定位+css3 tansform转换使其使其垂直水平居中；

.container{     position:relative;    height: 100vh;    width:100%;}.content{    position: absolute;    width:200px;    height:200px;     background-color:#26A9DF;      top:50%;    left:50%;    transform: translate(-50%,-50%); }

Copy after login

方法三：使用flex布局使其垂直水平居中；

html, body {  height: 100%;  margin: 0;} .container {  -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;  justify-content: center;  display: -webkit-flex;  display: flex;  height: 100%;  margin: 0;}.content{    width:200px;    height:200px;     background-color:#26A9DF;  }

Copy after login

方法四：使用flex布局使其水平居中；

第一种方式：

.container{   display: -webkit-flex;  display: flex;}.content{    width:200px;    height:200px;     background-color:#26A9DF;      margin:auto;}

Copy after login

第二种方式：

.container{   display: -webkit-flex;  display: flex;  justify-content: center;}.content{    width:200px;    height:200px;     background-color:#26A9DF;  }

Copy after login

方法四：使用table布局水平居中元素；

.container{   display: table;  margin: 0 auto;}.content{    width:200px;    height:200px;     background-color:#26A9DF;  }

Copy after login

3. em、px还是%？

如今页面功能变得越来越多，用来访问页面的设备越来越多，页面的布局就是一个颇具挑战的事情，而页面当中的元素的尺寸和字体、图片的大小等也跟布局息息相关。鉴于此，前端开发开始重视如何提高页面布局，核心思想是将页面元素的尺寸和字体大小设置为相对值。字体相对单位包括：em、ex、ch、rem。

（1）尽量设置相对尺寸

所谓设置相对尺寸，并不是说页面整体的布局是自适应的，整体的尺寸可以是固定尺寸也可以是自适应的尺寸，这取决于页面的设计。

（2）只有在可预知元素尺寸的情况下才使用绝对尺寸

比如设计上要求使用绝对宽度，比如整体宽度，侧边栏宽度，页头页尾的高度固定等，在展示图片、视频的时候，合适的固定尺寸会让这些多媒体元素展示获得最佳的效果。

（3）使用em设置字体大小

使用px设置字体大小的可扩展性不好，使用百分比设置字体大小也不符合习惯，最佳方式是使用em设置字体大小，但随着字体设置的层级增多，这种方式反而增加了维护的成本，对于此，css3引入了rem单位，是相对于根元素的字体大小计算的，就避免了这个问题，目前除了IE8及以下，大部分浏览器都支持它。

px的值是固定的，指定是多少就是多少，计算比较容易。

em的值不是固定的，并且em会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

rem是通过根元素进行适配的，网页的中的根元素指的是html。网页html设置根元素为10px，那么1rem=10px，12px = 1.2rem。

4.优雅降级与渐进增强？

要说这2个随css3流传开来的概念，首先得定义一个基准线，在此之上的增强为渐进增强，在此之下的兼容为优雅降序，这个基准线每一个开发者根据需求都不一样，主要是基于低版本的浏览器，这儿就以为IE8浏览器举例。

优雅降级（graceful degradation）：

是向下兼容，一开始就构建完整的功能，然后针对低版本浏览器进行兼容。一个简单的示例是使用24位alpha-transparent png。这些图像能显示在现代浏览器是。IE5.5 IE6将显示图像,但透明效果会失败(必要时它可以使工作)。老的浏览器不支持PNG将显示alt文本或一个空的空间。开发人员通常采用优雅降级指定浏览器支持的水平,如一级浏览器(最好的经验)和二级浏览器(退化的经验)。

渐进增强（progressive enhancement）:

‍‍渐进增强是一个网页设计,强调战略的可访问性,语义HTML标记,和外部样式表和脚本技术。渐进增强使用web技术以分层的方式,允许每个人都访问一个web页面的基本内容和功能,使用任何浏览器或网络连接,同时也提供了一个增强的页面版本与更先进的浏览器软件或更大的带宽。渐进增强是向上兼容，简单地说是针对低版本浏览器进行构建页面，保证最基本的功能，然后针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的需求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。‍‍

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

下面有一个css3的例子：

.transition{    -webkit-transition: all .5s;     -moz-transition: all .5s;       -o-transition: all .5s;          transition: all .5s; }.transition{ 　　     transition: all .5s;　　  -o-transition: all .5s;  　-moz-transition: all .5s; -webkit-transition: all .5s;}

Copy after login

参考资源：

前端乱炖- 《web前端最佳实践》—高维护性css 作者：灵感_idea ；

伯乐在线- 2016年Web前端面试题目汇总作者：_燎原之火；

StackOverflow- What is the difference between Progressive Enhancement and Graceful Degradation?

CSDN-渐进增强、优雅降级作者：xiongzhengxiang