前端知识点乱炖之一（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與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：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