转载自 前端面试常考五
一、DIV元素是什么
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
简单来说：就是指定渲染 HTML 的容器。
二、如何居中一个元素
非浮动元素居中设置 margin:0 auto 令其居中, 定位 ,父级元素。 text-align:center
浮动元素居中方法一:
使用position定位。
方法二:
父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%。
方法三:
设置当前div的宽度，然后设置margin-left:50%;position:relative; left:-250px;其中的left是宽度的一半。
三、浮动的工作原理是什么
浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流（文档流），即脱离了文档流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。
四、浮动元素会引起哪些问题
问题一与浮动元素同级的非浮动元素会跟随其后。
问题二父元素的高度无法被撑开，影响与父元素同级的元素。
问题三若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
五、清除浮动常用的方法有哪些
方法一父级div定义 伪类:after和zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。
父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。
六、如何调整元素的布局级别
方法一display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline-block
简言之就是将对象呈现为inline对象，但是对象的内容作为block对象呈现，后面的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
方法三display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
七、如何理解优雅降级和渐进增强
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，达到能够在旧式浏览器上以某种形式降级体验的目的。
渐进增强：以所有浏览器支持的基本功能为基础，逐步添加一些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能。当浏览器支持时，会自动地呈现出来并发挥作用。
八、如何优化性能
方法一当需要设置的样式很多时设置className而不是直接操作style。
方法二少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
方法三图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
方法四用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
方法五减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
方法六前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
方法七避免使用css表达式即动态属性。
九、CSS样式分为哪几种
1、内联css样式内联式css样式表就是把css代码直接写在现有的HTML标签中。
2、嵌入式css样式嵌入式css样式，就是可以把css样式代码写在标签之间。
3、外部式css样式外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）。
十、为什么要初始化css样式
1、浏览器的兼容问题不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
2、提高编码质量初始化CSS样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。
十一、如何理解css中的刻度
在CSS中刻度用于设置元素尺寸的单位。
特殊值0可以省略单位。例如：margin:0px可以写成margin:0
一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
长度单位包括：相对单位和绝对单位。
相对长度单位有：em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位有：cm, mm, q, in, pt, pc, px
绝对长度单位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
十二、em与rem的区别是什么
em文本相对长度单位。相对于当前对象内，文本字体的尺寸。如果当前对象内，文本字的体尺寸未设置，则相对于浏览器默认字体的尺寸(默认16px)。(相对父元素的字体大小倍数)
em（font size of the element）是指相对于父元素字体大小的单位。
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数，只相对于根元素的大小。rem（font size of the root element）是指相对于根元素的字体大小的单位。
作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化。
em的计算规则依赖父元素，rem的计算规则依赖根元素。
一、DIV元素是什么
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
简单来说：就是指定渲染 HTML 的容器。
二、如何居中一个元素
非浮动元素居中设置 margin:0 auto 令其居中, 定位 ,父级元素。 text-align:center
浮动元素居中方法一:
使用position定位。
方法二:
父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对左移动-50%。
方法三:
设置当前div的宽度，然后设置margin-left:50%;position:relative; left:-250px;其中的left是宽度的一半。
三、浮动的工作原理是什么
浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流（文档流），即脱离了文档流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。
四、浮动元素会引起哪些问题
问题一与浮动元素同级的非浮动元素会跟随其后。
问题二父元素的高度无法被撑开，影响与父元素同级的元素。
问题三若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
五、清除浮动常用的方法有哪些
方法一父级div定义 伪类:after和zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减少CSS代码。
父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
结尾处加空div标签 clear:both
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法。
六、如何调整元素的布局级别
方法一display:block
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline-block
简言之就是将对象呈现为inline对象，但是对象的内容作为block对象呈现，后面的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
方法三display:inline
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
七、如何理解优雅降级和渐进增强
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，达到能够在旧式浏览器上以某种形式降级体验的目的。
渐进增强：以所有浏览器支持的基本功能为基础，逐步添加一些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能。当浏览器支持时，会自动地呈现出来并发挥作用。
八、如何优化性能
方法一当需要设置的样式很多时设置className而不是直接操作style。
方法二少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
方法三图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
方法四用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
方法五减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
方法六前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
方法七避免使用css表达式即动态属性。
九、CSS样式分为哪几种
1、内联css样式内联式css样式表就是把css代码直接写在现有的HTML标签中。
2、嵌入式css样式嵌入式css样式，就是可以把css样式代码写在标签之间。
3、外部式css样式外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）。
十、为什么要初始化css样式
1、浏览器的兼容问题不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
2、提高编码质量初始化CSS样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。
十一、如何理解css中的刻度
在CSS中刻度用于设置元素尺寸的单位。
特殊值0可以省略单位。例如：margin:0px可以写成margin:0
一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
长度单位包括：相对单位和绝对单位。
相对长度单位有：em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位有：cm, mm, q, in, pt, pc, px
绝对长度单位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
十二、em与rem的区别是什么
em文本相对长度单位。相对于当前对象内，文本字体的尺寸。如果当前对象内，文本字的体尺寸未设置，则相对于浏览器默认字体的尺寸(默认16px)。(相对父元素的字体大小倍数)
em（font size of the element）是指相对于父元素字体大小的单位。
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数，只相对于根元素的大小。rem（font size of the root element）是指相对于根元素的字体大小的单位。
作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化。
em的计算规则依赖父元素，rem的计算规则依赖根元素。
