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

时间 2019-11-06

标签前端知识之一 html css 栏目 HTML 繁體版

原文原文链接

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

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

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

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

空元素(没有内容的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>

.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;
}

方法二：使用绝对定位+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%); 
}

方法三：使用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;  
}

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

第一种方式：css3

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

第二种方式：web

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

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

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

3. em、px仍是%？

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

（1）尽可能设置相对尺寸

所谓设置相对尺寸，并非说页面总体的布局是自适应的，总体的尺寸能够是固定尺寸也能够是自适应的尺寸，这取决于页面的设计。浏览器

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

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

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

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

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

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;
}

参考资源：

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

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

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

CSDN-渐进加强、优雅降级做者：xiongzhengxiang

转载时请注明：来自w-rain的我的博客