1、常用那几种浏览器测试？有哪些内核(Layout Engine)?
- 浏览器：IE，Chrome，FireFox，Safari，Opera。
- 内核：Trident，Gecko，Presto，Webkit。
2、常见的块标签和内联标签以及内联块标签的区别
- 块级标签：单独占一行，可以设置宽高等样式h1 h2 h3 h4 h5 h6 p div ul li ol dl dt dd
- 内联标签（行内标签）在同一行显示，不可以设置宽度，宽高由内容撑开strong b em i span
- 内联块标签（行内块标签），在同一行显示，可以设置宽高等样式，img
3、清除浮动有哪些方式？
（1）父级div定义height。
（2）结尾处加空div标签clear:both。
（3）父级div定义伪类:after和zoom。
（4）父级div定义overflow:hidden。
（5）父级div定义overflow:auto。
（6）父级div也浮动，需要定义宽度。
（7）父级div定义display:table。
（8）结尾处加br标签clear:both。
4、B和strong的区别，em和i的区别
b标签是一个实体标签，它所包围的字符被设为bold（粗体)，而strong标签是一个语义标签，作用是加强字符的语义（都是内联标签， strong更具有强调的意义）
em标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。（都是内联标签，em更具有强调的意义）
i标签仅仅将文字规定为斜体，并无特殊语义。
5、谈谈你对语义化的理解
简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析，有利于SEO，便于团队开发和维护。
6、如何合并表格单元格
rowspan="2"表示从设置的td单元格开始向下合并两个单元格
colspan="2"表示自左向右合并两个单元格。
7、Thead,tbody,tfoot的作用
thead 表格的头 用来放标题之类的东西
tbody 表格的身体 放数据本体
tfoot 表格的脚 放表格的脚注之类
8、 常见表单元素有哪些
1). form: 定义供用户输入的表单。
2). input: 定义输入域，常用。可设置type属性，从而具有不同功能。
3). select: 定义一个选择列表，即下拉列表。
4). option: 定义下拉列表中的选项。
5). textarea: 定义文本域(一个多行的输入控件)，默认可通过鼠标拖动调整大小。
6). legend：定义域的标题，即边框上的文字。
7). button: 定义一个按钮。
8). datalist : 元素为 <input> 元素规定预定义选项列表
9). label: 定义一个控制的标签。如输入框前的文字，用以关联用户的选择。
10). fieldset: 定义域。即输入区加有文字的边框。
11). output: 标签作为计算结果输出显示(比如执行脚本的输出)。
9、引入css的方式有几种，分别是什么
（1）内嵌式
通过<style></style>来书写CSS代码。
只能应用于当前网页，不能被其它网页共享。
注意：<style>标记可以放在网页的任何地方，但一般放在<head>。
（2）外联式
通过<link>标记来引入外部的CSS文件(.css)。
可以被其它网页共享。
格式：<link rel="stylesheet" href="style.css" type="text/css">
rel="stylesheet" 被引入文件和当前文件之间的关系是引入了外部样式表
href=“” css文件的路径
注意：<link>标记只能放在<head>中
（3）行内样式
通过style的属性来书写CSS代码。写在标签的开始标签里
在开始的标签里写style=“ ” <div style="width:100px;height:100px;"></div>
什么时候使用：只有这么一个标签需要这个样式的时候
10、html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
(1)绘画 canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5)语意化更好的内容元素，比如 article、footer、header、nav、section;
(6)表单控件，calendar、date、time、email、url、search;
IE8/IE7/IE6支持通过document.createElement方法产生的标签
11、简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
12、什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
13、display:none和visibility:hidden的区别？
display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
14、单行文本水平垂直如何实现居中
（1）水平居中
text-align:center:控制单行文字水平居中
（2）垂直居中
设置行高，line-height：元素的高度，如果元素的高度是50px，则line-height:50px
15、选择器优先级如何计算
a.内联样式表的权值为1000
b.ID选择器的权值为100
c.class类选择器的权值为10
d.HTML标签选择器的权值为1
我们可以把选择器中规则对应多加法，比较权值，如果权值相同那就后面的覆盖前面的。
通常情况下 行间>内部> 外部（内部外部优先级看先后顺序）遵循就近原则
!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。
16、Css中哪些属性是可以继承的
1）、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格 italic;倾斜 normal;不倾斜
line-height：行高
2）、文本系列属性
text-indent：文本首行缩进
text-align：文本水平对齐 left左 center居中 right 右
color：文本颜色
text-decoration：文本修饰 overline 上划线 line-through 中划线 underline 下划线 none 去掉线 solid 实线 dotted 点状 dashed 虚线 wavy 波浪线 double 双线
text-decoration： 什么位置的线 线的样式 线的颜色
字母与字母之间的距离（文字与文字之间的距离）letter-spacing:
.单词与单词之间的距离word-spacing:
17、盒模型是由什么组成的
盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
标准盒模型
元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；
元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
18、CSS3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient）
19、谈谈你对重构的理解
网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，
在扩展的同时保持一致的UI。
20、对web标准以及w3c的理解和认识
答:标签闭合，标签小写，不乱嵌套，提高搜索机器人搜索几率。使用外链css和js脚本，结构行为表现分离，内容能被更多广泛的设备所访问,更少的代码和组件，容易维护，改版方便，不需要变动页面内容。
21、Html和xhtml有什么区别?
XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。
22、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);
标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样
标准的css盒子模型宽高就是内容区宽高；
IE css盒子模型宽高 内边距﹢边界﹢内容区；
23、媒体查询怎么使用？
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示；即响应式布局
@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
24、margin和padding分别适合什么场景使用？
◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
25、如何修改chrome记住密码后自动填充表单的黄色背景
关闭浏览器自带填充表单功能 ，设置表单属性 autocomplete="off/on" 关闭自动填充表单，自己实现记住密码
<form autocomplete="off" method=".." action="..">
<input type="text" name="textboxname" autocomplete="off">
26、请写出html5新增的标签，并说明其语义和应用场景
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
27、描述一下 cookies、sessionStorage 和 localStorage的区别
cookie 数据始终在同源的http请求中携带，即会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅会在本地保存。
存储大小：
cookie 数据大小不能超过 4k
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M
有效期（生命周期）
localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage：数据在当前浏览器关闭后自动删除
cookie：设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
28、如何实现浏览器内多个标签页之间的通信?
调用localstorge、cookies等本地存储方式
29、title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响;
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。
i内容展示为斜体，em表示强调的文本；
30、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
31、CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。
32、position的值？
static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。
33、css3中制作动画有几个属性？
css3中的变形（transform）、过渡（transition）、动画（animation）
34、常见的兼容性问题：
1.不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同
解决方案：css里增加通配符{margin：0；padding：0}
2.IE6双边距问题；在IE6中设置了float，同时又设置margin，就会出现边距问题
解决方案：设置display：inline；
3.当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow：hidden，或者设置line-height的值小于你的设置高度
4.图片默认有间距
解决方案：使用float为img布局
5.IE9以下浏览器不能使用opacity
解决方案：opacity：0.5；filter：alfha（opacity=50）；filter：progid： DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);
35、伪元素选择器有哪些？
::selection
设置元素已选中内容的样式（高亮显示）
::first-line
设置元素中内容第一行的样式
::first-letter
设置元素中内容第一个字符的样式
36、Margin常见问题及解决办法
1）父子元素margin合并问题
在父元素里面有子元素时，若父元素在没有设置overflow:hidden或者是border属性，则父元素的margin-top的值为父元素和子元素中的margin-top的最大值。
父子元素margin合并问题解决办法
方法一：设置父元素的overflow属性为hidden。
方法二：设置父元素的border属性，如：border:1px solid red;
2）兄弟元素margin合并问题
当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。
兄弟元素margin合并问题解决方法
使兄弟元素不在同一个BFC区域下，具体做法如：将兄弟元素分别触发BFC或将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。
37、浮动产生的问题，清除浮动的方案
浮动元素引起的问题：
浮动元素脱离文档流之后在文档流中不占位，父元素的高度无法被撑开，影响与父元素同级的元素
清楚浮动的方法：
（1）给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）
（2）在结尾处添加空div标签clear:both。具体做法：添加一个div标签并定义一个cl的类名，给cl类名添加样式clear:both，将该div标签放到父元素内容结束前的位置（缺点：会多加CSS和HTML标签）。
（3）给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）
（4）给父级div定义伪类：after和zoom（推荐使用）
/清除浮动代码*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1}
然后父级元素添加clearfloat类名即可
（5）给父级元素添加浮动（缺点：会产生新的浮动问题）
38、如何让盒子水平垂直居中
方案1、margin 负间距
1.必需知道该div的宽度和高度，
2.然后设置位置为绝对位置，
3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指盒子左上角顶点距离页面左、上边界的50%，
4.最后将该div分别左移和上移，使整个盒子居中，左移和上移的大小就是该DIV(包括border和padding)宽度和高度的一半。
方案2、margin:auto实现绝对定位元素的居中（该方法兼容ie8以上浏览器）
此方案代码关键点：
1、上下左右均0位置定位；
2、margin: auto;
39、如何生成BFC
（1）根元素 html
（2）float的值为left或right
（3）overflow的值为hidden或scroll或auto
（4）display的值为inline-block
（5）position的值为absolute或fixed
40、BFC规则
（1）内部的标签会在垂直方向上一个接一个的放置
（2）垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
（3）每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
（4）BFC的区域不会与float的标签区域重叠
（5）计算BFC的高度时，浮动子标签也参与计算
（6）BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然
41、BFC能解决什么问题
（1）外边距重叠
（2）自适应两栏或三栏布局
（3）防止字体环绕
（4）清除浮动
42、图片间隙问题如何解决
两个图片之间和图片下方多出的空白间隙可以使用以下方式解决。
方法 1：将图片显示为块：解决下方间隙
img{
display:block;
}
方法 2：改变图片的 vertical-align :解决下方间隙
img{
vertical-align:middle;
}
除了 middle值，还可以设置为 top / bottom / middle
方法 3：设置图片父级标签的 font-size:0;line-height:0; 水平间隙，图片下方间隙都能解决
这个办法不仅可以解决图片下面的小空白，也能解决图片与图片之间的小空白
缺点是让父元素里的文字的字号和行高都变成了0，文字看不见了，需要重新定义文字的字号和行高
.imgwrap{
font-size:0;
line-height:0;
}
43、说说常见浏览器的兼容问题
1. 小高度问题
在ie6及以下版本，会有小高度问题
解决办法：给这个元素设置
font-size: 0;
line-height: 0;
overflow: hidden;
2. 双边距问题
在ie6及以下版本，给元素设置浮动，再设置margin-left，最左侧的元素会出现双倍的margin-left值
解决办法：给元素设置
_display:inline;
3. 块转内联块不在同一行显示
在ie7及以下版本，给块元素设置转内联块，不在同一行显示
解决办法：给元素设置
*display:inline;
*zoom:1;
4. 子元素相对定位，父元素溢出隐藏失效问题
在ie6 7里 ，给子元素设置相对定位，给父元素设置溢出隐藏，溢出隐藏失效
解决办法：给父元素也设置
position: relative;
5. li的子元素里有两个或两个以上浮动的时候，会出现空白间隙问题
ie7及以下
解决办法：给li设置vertical-align: top/middle/bottom;
6. 图片外面蓝圈问题
ie8及以下，图片外面包a标签，图片就会出现蓝圈
解决办法：给图片设置border: none;
7. 不透明度
opacity和rgba 在ie8及以下都不兼容
opacity兼容的处理办法：
opacity: 0.5;
filter: alpha(opacity=50);
opacity 是整个元素都半透明
rgba是背景颜色或者文字颜色半透明，不会让整个元素都半透明
44、等高布局实现原理及代码
一、 等高布局第一种
以三栏等高布局为例：
第一栏宽度30% 第二栏宽度40% 第三栏宽度30%
- 几栏就写几个容器，这里需要3个容器，分别是爷爷爸爸和儿子，宽度是100%
- 使用相对定位把爸爸向左侧移动30%，漏出爷爷的30%
- 使用相对定位把儿子向左侧移动40%，漏出爸爸的40%
- 在儿子里面写左中右三栏，给这三栏设置浮动，让他们在同一行显示
- 使用相对定位，把第三栏定位到和爷爷漏出的部分重叠到一起
- 使用相对定位，把第二栏定位到和爸爸漏出的部分重叠到一起
- 使用相对定位，把第一栏定位到和儿子漏出的部分重叠到一起
- 由于左中右三栏浮动，所以儿子的高度为0，需要清除浮动，可以使用float：left，然后给爸爸也设置float：left清除浮动，给爷爷设置overflow：hidden清除浮动
三栏等高，儿子爸爸爷爷是等高的
二、 等高布局方法二
利用padding和margin互怼的办法
以三栏等高布局为例 - 给三栏设置同样的padding-bottom:9999px
- 给三栏设置同样的margin-bottom：-9999px
- 给三栏的父元素设置overflow：hidden(清除浮动，溢出隐藏)
三、 等高布局方法三
利用边框设置等高
只能设置两栏或者三栏等高布局
以三栏等高布局为例
第一栏宽度300px
第二栏宽度400px
第三栏宽度300px - 设置一个盒子，宽度是第二栏的宽度400px
- 给这个盒子设置左边框是第一栏的宽度300px
- 给这个盒子设置右边框是第三栏的宽度300px
- 在这个盒子里设置三栏，注意顺序：中-左-右
- 给这三栏设置浮动
- 利用margin的负值，把左侧一栏移动到和盒子的左边框重叠的位置
- 利用margin的负值，把右侧一栏拽到第一行的位置
- 再利用相对定位，把右侧一栏定位到和右边框重叠的位置
等高看的是盒子的高度和左右边框的高度
45、圣杯布局实现原理及代码
三栏布局
左右两侧宽度固定
中间一栏宽度自适应
以左侧宽度300px，右侧宽度是200px为例 - 写结构，注意顺序：中——左——右
- 中间一栏宽度设置成100%；
- 给左中右三栏设置浮动
- 给左侧一栏加margin-left：-100%，让左侧盒子移动到第一行的最左边的位置
- 给右侧盒子设置margin-left：-200px(右侧盒子的宽度)，让右侧盒子移动到第一行的最右边的位置
- 给他们的父元素设置左右两边的padding值：padding：0 200px 0 300px; 让所有子元素向中间移动
- 使用相对定位把左右两侧的盒子定位到空白区域
- 给父元素设置最小宽度
46、双飞翼布局实现原理及代码 - 写结构，注意顺序：中——左——右
- 中间一栏宽度设置成100%；
- 给左中右三栏设置浮动
- 给左侧一栏加margin-left：-100%，让左侧盒子移动到第一行的最左边的位置
- 给右侧盒子设置margin-left：-200px(右侧盒子的宽度)，让右侧盒子移动到第一行的最右边的位置
- 在中间一栏里在加一个盒子，给这个盒子设置左右两侧margin或者padding，让内容往中间挤
- 给大盒子设置清除浮动和最小宽度
47、精灵图的原理及优缺点
英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，
“background- repeat”，“background-position”的组合进行背景定位，background-position 用数字能精确的定位出背景图片的位置。适用于一般小图标，不适合大背景大布局背景
优点：
（1）减少网页的 http 请求，从而大大的提高页面的性能
（2）图片命名上的困扰
（3）更换风格方便
缺点：
（1）必须要限定容器大小符合背景图元素位置，需要计算
48、网页中常见图片格式及特点
1. psd
photoshop的专用格式，网页上一般是不用这种格式的，它一般被用来辅助我们做网页，ui设计师给我们的就是这种格式的图片。
优点：完整保存图像的信息，包括未压缩的图像数据，图层，透明等信息，方便图像的编辑。
缺点：应用范围窄，图片容量相对比较大。
2. jpg
网页制作及日常使用最普遍的图像格式，如果网页中不需要透明背景，一般就会用这种图。
优点：图像压缩率高，图像容量相对最小
缺点：有损压缩，图像会丢失数据而失真，不支持透明背景，不能制作成动画。
3.gif
制作网页小动画的常用图像格式，比如平时经常发的动态的表情一般都是gif格式的。
优点：无损压缩，图像容量小，可以制作成动画，支持透明背景。
缺点：图像色彩范围最多只有256色，不能保存为色彩丰富的图像，不支持半透明，支持透明图像但是图像边缘有锯齿
4. png
网页制作及日常使用比较普遍的图像格式，如果能支持动画则它完全可以取代gif。
优点：无损压缩，图像容量小，支持透明背景和半透明背景，透明图像的边缘是光滑的，这是和gif相比它的一大优点缺点：不能制作成动画。
5. webp
将要取代jpg的图像格式。
优点：和jpg格式相同，但是容量相对比jpg还要小。
缺点：和jpg格式相同，但是目前只有极少数的浏览器支持，像一些主流的浏览器谷歌，火狐，IE等都不支持这种格式。
总结：
在网页制作中，如何选择合适的图片格式呢？ - 使用大幅面图片时，如果要使用不透明背景时，首选jpg图片，因为它的容量相对最小；如果要使用透明或半透明背景的图片时，就使用png图片。
2.使用小幅面图片或图标图片时，如果图片含多种颜色，可以使用gif或png图片；如果图片的色彩很单一，而且要求有很好的显示效果放大不失真，可以使用svg图片；如果要求图片是动画的，可以使用gif
49、为什么要初始化css样式？哪些样式需要初始化
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
50、Display：none和visibility：hidden的区别
1、作用不同
visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无，即在网页中不占任何的位置。
2、使用后HTML元素有所不同
visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。
3、定义不同
visibility 属性指定一个元素是否是可见的。
display这个属性用于定义建立布局时元素生成的显示框类型。
51、标签应该如何合理嵌套
合理嵌套HTML标签，ul和li是固定嵌套，ul的直接子元素必须是li标签，ol和li是固定嵌套，ol的直接子元素必须是li。Dl,dt，dd是固定嵌套，dl的直接子元素必须是dt和dd,dt和dd是兄弟元素，
块标签可以套其他的标签，但是p标签除外，p标签不能嵌套其他的块标签，内联标签不能嵌套块标签(a标签特殊)，a标签不允许嵌套a标签和其他有交互作用的标签。.块级元素与块级元素并列、内嵌元素与内嵌元素并列：
52、项目中你是如何做图片优化的
（1). 降低图片的大小、选择适当的图片宽度尺寸，压缩图片，选择更小kb的图片格式，以达到最优的显示效果
（2). 考虑CSS Sprites(背景精灵图/雪碧图)，将同类型的图标或按钮等背景图合到一张大图中，减少HTTP的网络资源请求
（3. Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等(可去比特虫网站下载. Ico图片
53、html5的新特性 - 内容结构更加简洁
（1） 声明文档更加简洁
（2） 编码格式更加简洁
（3） html head body都可以省略不写
（4） 有的标签的结束标签可以省略不写
（5） 属性名和属性值是相同的时候可以把属性值省略不写
（6） 属性值是true的时候也可以省略不写
（7） 属性值的引号可以省略不写 - 新增了结构元素
- 新增了表单相关内容
- 网页媒体特性更好的支持音、视频
支持网页端的Audio、Video等多媒体功能 - canvas
- 地图
- 拖放
- 对本地离线存储有更好的支持
54、HTML5的兼容如何处理
html5 ie8及以下兼容处理办法
办法一：
创建标签（通过JS创建DOM元素）
<script>
document.createElement('header');
document.createElement('footer');
</script>
再给标签转块
header,footer{
display: block;
}
问题：标签过多，操作复杂。
办法二：引入html5shiv.js文件
答. ie6 7 三角形设置transparent的边框是黑色
解决办法：把边框样式设置成虚线
55、Css3新增的选择器
结构伪类选择器
p:first-child p标签的父元素里面的第一个子元素，还得看看这个标签是不是p，是p才能被选中
p:first-of-type p标签的父元素里的第一个p
p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素
p:nth-child(n) n 可以是数字也可是数学公式 odd奇数 even偶数
p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素
p:nth-last-child(n) 从最后一个子元素开始计数
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素
:nth-of-type(n) n 可以是数字也可是数学公式 odd奇数 even偶数
p:last-of-type 指定父元素的最后一个 p 的元素
p:nth-last-of-type(n) 规定属于其父元素的第二个 p 元素的每个 p，从最后一个子元素开始计数
p:only-of-type 指定属于父元素的特定类型的唯一子元素的每个 p 元素
属性选择器
[attribute^=value] attribute 属性名 value属性值 含有xx属性并且是以XX为开头的
[attribute$=value] 含有xx属性并且是以XX为结束的
[attribute*=value] 含有xx属性并且是只要属性值里含有xx就能选中
状态伪类选择器
:enabled 启用的表单元素
:disabled 禁用的表单元素
:checked 选中的表单元素（只用在单选框和复选框里的）
56、Css3的新特性
1）CSS3 实现圆角（border-radius:8px;）
2）阴影（box-shadow:10px）
3）对文字加特效（text-shadow）
4）线性渐变（gradient）
5）旋转（transform）
6）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转，缩放，定位，倾斜
7）增加了更多的 css 选择器 ,
8）多背景 rgba
.......
57、什么是less
css预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
57、Less有什么好处
(1)结构清晰，便于扩展，适应性强，可读性强
(2)可以方便地屏蔽浏览器私有语法差异
(3)可以轻松实现多重继承
(4)完全兼容 CSS 代码
(5)减少重复的机械劳动，便于维护
58、常见的移动端布局有哪些方式？原理是什么？
（1）固定布局: 在里把viewport加好，根pc端一样，设想整个网页的宽度为320px居中即可，超出部分留白。
优点：思路沿用PC端，上手简单。
缺点：大屏幕手机及手机横屏时，两边是留白较大，且大屏幕手机下看起来页面会特别小，操作的按钮也很小，用户体验较差
（2）流式布局:重点就是使用百分比来代替传统px，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，。
优点：流动布局可以很好解决自适应需求
缺点：通过大量的百分比布局，会出现兼容性的问题，且更适用于对横向拉伸的设计元素，设计的时候存在很多局限性。
（3）响应式做法:根据目标用户的访问设备的主要类型做三种或四种布局。 每种布局有一个区间即可利用媒体查询@media，可以为不同分辨率的设备加载不同的样式。
优点：可以相对精确的控制显示效果
缺点：可能需要对同一个类书写不同的样式会导致代码比较繁复，后期维护困难。
（4）rem布局 rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
59、简述rem布局原理
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。
比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
rem布局实现步骤 ：
（1）设置页面的viewport 动态计算并设置html的fontsize值
（2）按照pc端布局方式正常布局，把px单位换算成rem（较小的长度比如1px的边框就不需要转换成rem,直接设置px）
60、响应式
一个网站可以兼容多个终端。
页面的设计与开发应当根据用户行为以及设备环境进行相应的响应和调整。 响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。
响应式布局是根据设备屏幕宽度不同适当调整标签显示布局，在每种设备屏幕宽度的设备下呈现的界面是不同的。
响应式原理：
媒体查询是响应式的核心，它根据条件告诉浏览器如何为指定视图宽度渲染页
优点：
- 减少工作量，设计，代码，内容都只需要一份，多出来的工作量只是js脚本，css样式做一些改变
- 节省时间
- 每个设备都能得到正确的设计
缺点： - 会加载更多的样式和脚本资源
- 设计比较难精准定位和控制
- 老版本浏览器兼容不好
