HTML&css相关问题

• IE8/IE7/IE6支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：
  

<!--[if lt IE 9]>
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

• cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
• cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
  存储大小：
• cookie数据大小不能超过4K。
• sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  有期时间：
• localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage：数据在当前浏览器窗口关闭后自动删除
• cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

6.如何实现浏览器内多个标签页之间的通信？

• 调用localstorage,cookies等本地存储方式
• WebSocket、SharedWorker
• localstroge另一个浏览器上下文被添加、删除或修改时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
• 注意quirks:Safari在无痕迹模式下设置localstorge值抛出QuotExceededError的异常。

7.HTML5为什么只需要写！DOCTYPE HTML？

• HTMl5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)；
• 而HTMl4.01基于SGMA，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

8.Doctype作用？标准模式与兼容模式各种什么区别？

• ！Doctype声明位于HTML文档的第一行，处于html标签之前。告知浏览器的解析器用什么文档标准解析这个文档。doctype不存在或格式不正确会导致文档以兼容模式呈现。
• 标准模式的排版和JS运作模式都是该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式来显示，模拟老式浏览器的行为以防止站点无法工作。

9.Doctype？严格模式与混杂模式如何触发这两种模式，区分它们有何意义？

• 用于声明文档使用哪种规范（html/Xhtml）一般为严格过渡基于框架的html文档。
• 加入XML声明可触发，解析方式更改为IE5.5拥有IE5.5的Bug。

10、html document是干嘛的？

• HTML即：超文本标记语言，标准通用标记语言的一个应用，“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。
• HTML Document即：HTML Document对象，每个载入浏览器的HTML文档都会成为Document对象
• 由于Document对象是window对象的一部分，所以可通过window.document属性对其进行访问。

11、html5哪些操作可以SEO优化

• title标签；meta标签；header标签；footer标签
• 元标签（meta标签）；导航标签（nav标签）；文章标签（article标签）；左或右侧标签（aside标签）

12、css盒模型有哪些及区别content-box border-box padding-box

Q1

• IE盒子模型box-sizing:border-box;（怪异模式）

• W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式

• content-box:这是默认样式指定CSS标准。测量width和height属性只包括的内容，但不是border, margin, 或者 padding。
• padding-box:width和height属性包括padding的大小，不包括border和margin
• border-box:width和height属性包括padding和border，但不是margin。这是盒模型的文档时，Internet Explorer使用Quirks模式。

• content-box不包含padding，border-box包含padding。所以如果你设置的大小是一样的，content-box看起来，会比border-box大

13、行内元素和块状元素的区别？行内快元素的兼容性使用？（IE8以下）

• 行内元素：会在水平方向排列，不能包含快级元素，设置width无效，height无效（可以设置line-height），margin上下无效，padding上下无效
  
• 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行
• 兼容性：display:inline-block;
  display:inline;
  zoom:1;

14、页面导入样式时，使用link和@import有什么区别？

• 1.link属于HTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供，只能加载CSS;
• 2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
• import是CSS2.1提出的，只在IE5以上才能被识别，而link是HTML标签，无兼容问题；

• link支持使用js控制DOM去改变样式，而@import不支持;

15、介绍以下你对浏览器内核的理解？

• 1、主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎。
• 2、渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）、以及计算网页的显示方式、然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同、所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核
• 3、JS引擎则：解析和执行javascript来实现网页的动态效果。
• 4、最开始渲染引擎和JS引擎并没有区分得很明确，后来JS引擎越来越独立，内核九倾向于只指渲染引擎。

16、清楚浮动有哪些方式？比较好的方式是哪一种

• 1、父级div定义height。
• 2、结尾处加空div标签clear：both。
• 3、父级div定义伪类：after和zoom。
• 4、父级div定义overflow：hidden。
• 5、父级div也浮动，需要定义宽度。
• 6、父级div定义display：table。

推荐大家使用的方法第3之种！

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:both; 
}
.clearfix { 
    *zoom:1; 
}

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；

5）zoom：1 触发IE hasLayout。

通过分析发现，除了clear：both用来闭合浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

17、iframe的作用？

用法

• 1、iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。

  优点

• 1、便于修改，模拟分离，像一些信息管理系统会用到。

• 2、但现在基本不推荐使用。除非特殊需要，一般不推荐使用。

  缺点

• 1、iframe的创建比一般的DOM元素慢了1-2个数量级
• 2、iframe标签会阻塞页面的的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好，在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞。

• 3、iframe对于SEO不友好，替换方案一般就是动态语言的Incude机制和ajax动态填充内容等。

18、选择器优先级是怎样的？

• 1、！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承
• 2、权重算法：(0,0,0,0)==》第一个0对应的是important的个数，第二个0对应的是id选择器的个数，第三个0对应的类选择器的个数，第四个0对应的是标签选择器的个数，就是当前选择器的权重

• 3、比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推。

19、有一个导航栏在Chrome里面样式完好？在IE里文字都聚到一起了，是哪个兼容性问题？

• 用了display：flex属性，在IE10以下都是无效的。

20.CSS实现垂直水平居中

• 方法一：position加margin 
  
• 方法二： diaplay:table-cell 
  
• 方法三：position加 transform 
  
• 方法四：flex;align-items: center;justify-content: center 
  
• 方法五：display:flex;margin:auto 
  
• 方法六：纯position 
  
• 方法七：兼容低版本浏览器，不固定宽高
  

方法一：position加margin

/**html**/
<div class="wrap">    
    <div class="center"></div>
</div> 
/**css**/
.wrap {    
    width: 200px;
    height: 200px;
    background: yellow;
    position: relative;
}
.wrap .center {
    width: 100px;
    height: 100px;
    background: green;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

兼容性：主流浏览器均支持，IE6不支持

方法二： diaplay:table-cell

<!-- html -->
<div class="wrap">
     <div class="center"></div>
</div> 
/*css*/
.wrap{
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.center{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background: green;
}

兼容性：由于display:table-cell的原因，IE6\7不兼容

方法三：position加 transform

<!-- html -->
<div class="wrap"> 
   <div class="center"></div>
</div> 
/* css */
.wrap {
    position: relative;
    background: yellow;
    width: 200px;
    height: 200px;
} 
.center {
    position: absolute;
    background: green;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    width: 100px;
    height: 100px;
}

兼容性：ie9以下不支持 transform，手机端表现的比较好。

方法四：flex;align-items: center;justify-content: center

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div> 
/* css */
.wrap {
    background: yellow;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
} 
.center {
    background: green;
    width: 100px;
    height: 100px;
}

移动端首选

方法五：display:flex;margin:auto

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div> 
/* css */
.wrap {
    background: yellow;
    width: 200px;
    height: 200px; 
    display: flex;
} 
.center {    
    background: green;
    width: 100px;
    height: 100px;
    margin: auto;
}

移动端首选

方法六：纯position

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div> 
/* css */
.wrap {
    background: yellow;
    width: 200px;
    height: 200px;
    position: relative;
}
/**方法一**/
.center {
    background: green;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50px;
    top: 50px; 　　
}
/**方法二**/
.center {
    background: green;
    position: absolute;
    width: 100px;
    height: 100px; 
   left: 50%;
    top: 50%;
　　margin-left:-50px;
　　margin-top:-50px;
}

兼容性：适用于所有浏览器

方法六中的方法一计算公式如下：

子元素（conter）的left值计算公式：left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px;
子元素（conter）的top值计算公式：top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;

方法二计算公式：
left值固定为50%;
子元素的margin-left= -（子元素的宽/2）=-100/2= -50px;
top值也一样，固定为50%

子元素的margin-top= -（子元素的高/2）=-100/2= -50px;

方法七：兼容低版本浏览器，不固定宽高

<!-- html -->
<div class="table">
    <div class="tableCell">
        <div class="content">不固定宽高，自适应</div>
    </div>
</div> 
/*css*/
.table {
    height: 200px;/*高度值不能少*/
    width: 200px;/*宽度值不能少*/
    display: table;
    position: relative;
    float:left;
    background: yellow;
}       
.tableCell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    *position: absolute;
    padding: 10px;
    *top: 50%;
    *left: 50%;
}
.content {    
    *position:relative;
    *top: -50%;
    *left: -50%;
     background: green;
}

暂时总结上面的七种，这种方法太多，其实只要习惯了其中的一两种也就够用了。

总结

如果是移动端，那么用方法四和方法五是比较方便的。而且支持不固定宽高的情况，快、准、狠

也就是用 flex; align-items: center; justify-content: center;

<!-- html --><div class="wrap">    <div class="center"></div></div> /* css */.wrap {    background: yellow;    width: 200px;    height: 200px;    display: flex;    align-items: center;    justify-content: center;} .center {    background: green;    width: 100px;    height: 100px;}

或者display:flex;margin:auto;

<!-- html --><div class="wrap">    <div class="center"></div></div> /* css */.wrap {    background: yellow;    width: 200px;    height: 200px;    display: flex;} .center {    background: green;    width: 100px;    height: 100px;    margin: auto;}

如果是PC端，要考虑兼容性的话。方法六是不错滴，也就是纯position。

<!-- html --><div class="wrap">    <div class="center"></div></div> /* css */.wrap {    background: yellow;    width: 200px;    height: 200px;    position: relative;}/**方法一**/.center {    background: green;    position: absolute;    width: 100px;    height: 100px;    left: 50px;    top: 50px;  　　}/**方法二**/.center {    background: green;    position: absolute;    width: 100px;    height: 100px;    left: 50%;    top: 50%; 　　margin-left:-50px; 　　margin-top:-50px;}

21.display有哪些值？说明它们的作用。

• block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
• none 缺省值。像行内元素类型一样显示。
• inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
• inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
• list-item 像块类型元素一样显示，并添加样式列表标记。
• table 此元素会作为块级表格来显示。
• inherit 规定应该从父元素继承display属性的值。

22.行内元素有哪些？块级元素有哪些？css的盒模型？

• 块级元素：div ,p,h1,form,ul,li
• 行内元素：span,a,label,input,img,strong,em;
• css盒模型：内容，border,margin,padding;

23、写一下audio标签中，如何实现音乐的暂停和播放

• play()开始,pause()暂停

23（1）、写出video标签中预加载视频用到的属性是什么

• preload

24、px、em、rem的区别？

• 1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
• 2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
• rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
• 4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。

25、CSS3新特性有哪些？

• 1、颜色：新增RGBA、HSLA模式
• 2、文字阴影(text-shadow)
• 3、边框：圆角（border-radius）边框阴影：box-shadow
• 4、盒子模型：box-sizing
• 5、背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局
• 6、渐变：linear-gradient、radial-gradient
• 7、过渡：transition可实现动画
• 8、自定义动画
• 9、在CSS3中唯一引入的伪元素是::selection
• 10、多媒体查询、多栏布局
• 11、border-image
• 12、2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
• 13、3D转换

26、标签上title与alt属性的区别是什么？

• Alt当图片不显示时，用文字代表
• Title为该属性提供信息

27、描述css reset的作用和用途？

• Reset重置浏览器的css默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一。

28、为什么要使用css sprites

• css精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
• css sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用css的"background-image","background-position"的组合进行背景定位，这样可以减少。
• 很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务器增加很大的压力。

29、在新窗口打开链接的方法是？

• target:_blank

30、简述对Web语义化的理解？

• 就是让浏览器更好的读懂你写的代码，在进行HTML结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简洁明了，易于进行web操作和网站SEO，方便团队的一种标准，以图实现一种“无障碍”的web开发。

31、display:none;与opacity: 0;与visibility:hidden的区别是什么？

（1）是否占据空间  

• display:none 不再占据空间，会引起重排和重绘
  
• visibility:hidden 占据空间，仅引起重绘 
  
• opacity:0 占据空间，引起重绘 
  

（2）是否可以被继承 

• display:none 不会被子元素继承，但是子元素不会显示
  
• visibility:hidden 会被子元素继承，子元素可以设置visibility:visible来进行反隐藏 
  
• opacity:0 会被子元素继承，但子元素不能通过opacity:1来进行反隐藏 
  

（3）transition属性是否有效 

• display:none 完全不受transition属性的影响，元素立即消失 
  
• visibility:hidden 元素消失的时间跟transition属性设置的时间一样，但是没有动画效果
  
• opacity:0 能够进行正常的动画效果 
  

（4）对事件的响应  

• display:none 由于元素消失，不能触发如click等事件，但可以通过js触发设置了display:none的元素的事件 
  
• visibility:hidden 由于元素隐藏了，也不能触发click等事件 
  
• opacity:0 可以触发事件，元素只是看不见而已。
  

32、请用css定义p标签，要求实现以下效果；字体颜色在IE6下为黑色（#000000）；IE7下为红色（#ff0000）;而其他浏览器下为绿色（#00ff00）

p{
    color:green;
    *color:blue;
    _color:black;
}

33、前端页面有哪三层构成，分别是什么？作用是什么？

• 结构层、表示层、行为层
• 结构层（structural layer）：由HTML或XHTML之类的标记语言负责创建。
• 表示层（presentation layer）:由css负责创建。
• 行为层（behaviorlayer）:负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

44、实现布局中间自适应宽度，左右两栏固定宽度

    <style>
        .box{
            display:flex;
        }
        .left{
            width: 200px;
            height: 600px;
            background:red;
        }
        .right{
            width: 200px;
            height: 600px;
            background:red;
        }
        .center{
            width: 100%;
            height:600px;
            background:green;
        }
    </style>
</head>
<body>
    <div class="box" >
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>

35、如何在页面上实现一个圆形的可点击区域？

• 1、map+area或者svg
• 2、border+radius
• 3、纯js实现需要求一个点在不在圆上简单算法，获取鼠标坐标等等

36、介绍一下标准css的盒子模型？低版本IE的盒子模型有什么不同的？

• 1、有两种：IE盒子模型、W3c盒子模型
• 2、盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)。
• 3、区别：IE的content部分把border和padding计算了进去

37、你如何对网站的文件和资源进行优化？期待的解决方案包括：

• 文件合并
• 文件最小化/文件压缩
• 使用CDN托管
• 缓存的使用

38、IE8以下版本的浏览器中盒模型有什么不同？

• IE8以下浏览器的盒模型中定义的元素的宽高不包括内边剧和边距

39、写出几种IE6 BUG的解决方法

• 1、双边距BUG float引起的 使用display
• 2、3像素问题使用float引用的使用display:inline -3px;
• 3、超链接hover后点击失效，使用正确的书写顺序 link visited hover active
• 4、le z-index问题给父级添加position:relative
• 5、png 透明使用js代码改
• 6、min-height最小高度 ！important解决
• 7、select 在ie6下遮盖 使用iframe嵌套
• 8、为什么没有办法定义1px左右的宽度器（IE6默认的行高造成的，使用over:hidden,zoom:0.08,line-height:1px）

40、css选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

• css选择符：类选择器、标签选择器、ID选择器、后代选择器（派生选择器）、群组选择器
• 可以继承：类选择器、标签名选择器、后代选择器（派生选择器）、群组选择器
• 优先级算法：
• 标签内直接定义：1000
• ID选择器：100
• 类选择器：1
• 内联和important中，important优先级高

41、css的基本语句构成是？

• 选择符、属性、值

42、CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child        选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:after          在元素之前添加内容,也可以用来做清除浮动。
:before         在元素之后添加内容
:enabled        
:disabled       控制表单控件的禁用状态。
:checked        单选框或复选框被选中

43、简述一下src与href的区别 

• href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
  
• src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
  

44、title与h1的区别、b与strong的区别、i与em的区别？

  title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；

  strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。

  i内容展示为斜体，em表示强调的文本；

  Physical Style Elements -- 自然样式标签
  b, i, u, s, pre
  Semantic Style Elements -- 语义样式标签
  strong, em, ins, del, code
  应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

45、position的值relative和absolute定位原点是？

    absolute
  	生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
    fixed （老IE不支持）
  	生成绝对定位的元素，相对于浏览器窗口进行定位。
    relative
  	生成相对定位的元素，相对于其正常位置进行定位。
    static
  	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
    inherit
  	规定从父元素继承 position 属性的值。