前端知识点乱炖之一（HTML/CSS）_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

前端知识点乱炖之一（HTML/CSS）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:53 AM

前面面试知识总结之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>

.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布局使其水平居中；

第一种方式：

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

第二种方式：

.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的值是固定的，指定是多少就是多少，计算比较容易。

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles