html&&CSS面试

HTML

1. HTML5的离线储存怎么使用，工作原理是什么？
   在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
   工作原理：HTML5的离线存储是基于一个新建的.appcache文件缓存机制（不是存储技术），通过这个文件上的解析清单离线存储，这些资源如何使用：1、页面头部像下面一样加入一个manifest的属性；2、在cache.manifest文件的编写离线存储的资源；3、在离线状态时，操作window.applicationCache进行需求实现
2. 浏览器是怎么对HTML5的离线存储资源进行管理和加载的呢？
   在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
   离线的情况下，浏览器就直接使用离线存储的资源。
3. 请描述一下cookies，sessionStorage和localStorage的区别？
   cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
   cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递
   sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
   存储大小：
   cookie数据大小不能超过4k
   sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更大
   有效时间：
   localStorage:存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
   sessionStorage数据在当前浏览器窗口关闭后自动删除
   cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
4. iframe有哪些缺点？
   iframe会阻塞主页面的onload事件；搜索引擎的检索程序无法解读这种页面，不利于SEO；iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
   使用iframe之前需要考虑这两个缺点，如果需要使用iframe，最好通过javascript动态给iframe添加src属性值，这样可以绕开上面两个问题
5. Label的作用是什么？是怎么用的？
   label标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
6. HTML5的form如何自动完成功能？
   给不想要提示的form或某个input设置为autocomplete=off
7. 如何实现浏览器内多个标签页之间的通信？
   WebSocket、ShareWorker;
   也可以调用localstorage、cookies等本地存储方式；
   localstorage另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；
   注意quirks：Safari在无痕模式下设置localstorage值时会抛出QuoaExceededError的异常
8. webSocket如何兼容低浏览器？
   Adobe Flash Socket、ActiveX HTMLFile(IE)、基于multipart编码发送XHR、基于长轮询的XHR
9. 页面可见性（Page Visibility API）可以有哪些用途？
   通过visibilityState的值检测页面当前是否可见，以及打开网页的时间等；
   在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放
10. 如何在页面上实现一个圆形的可点击区域？
    map+area或者svg；border-radius；纯js实现：需要求一个点在不在圆上简单算法、获取鼠标坐标等等
11. 实现不使用border画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果
    < div style=”height:1px;overflow:hidden;background:red” >< /div >
12. title与h1的区别、b与strong的区别、i与em的区别？
    title属性没有明确意义只是表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
    strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：< strong >会重读，而< b >是展示强调内容
    i内容展示为斜体，em表示强调的文本。
    自然样式标签：b，i，u，s，pre；语义样式标签：strong，em，ins，del，code；应该准确使用语义样式标签，但不能滥用，如果不能确定时首选使用自然样式标签

CSS

1、介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
有两种模型：IE盒子模型、W3C模型
盒模型：内容（content）、填充（padding）、边界（margin）、边框（border）；
区别：IE的content部分把border和padding计算了进去
13. 什么是盒子模型？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content）、元素的内边距（padding）、元素的外边距（margin）、元素的边框（border）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，有的部分只用来分隔相邻的区域或区域。四个部分一起构成了css中元素的盒模型
14. CSS选择符有哪些？哪些属性可以继承？
id选择器（#myid）、类选择器（.myclassname）、标签选择器（div，h1，p）、后代选择器（li a）、通用选择器（*）、相邻选择器（h1+p）、子选择器（ul>li）、属性选择器（a[rel=”external”]）、伪类选择器（a：hover）
可继承的样式：font-size、font-family、color、ul、li、dl、dd、dt
不可继承的样式：border、padding、margin、width、height
15. CSS优先级算法如何计算？
优先级就近原则，同权重情况下样式定义最近者为准；载入样式以最后载入的定位为准
优先级为：
同权重：内联样式表（标签内部）>嵌入样式表（当前文件中）>外部样式表（外部文件中）。
!important>id>class>tag
important比内联优先级高
16. CSS新增伪类有哪些？
举例：
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 在元素之前添加内容
: disabled 控制表单控件的禁用状态
：checked 单选框或复选框被选中
17. 如何居中div？
水平居中：给div设置一个宽度，然后添加margin：0 auto属性
让绝对定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
水平垂直居中
确定容器的宽高 宽500 高 300 的层
设置层的外边距

div {
    position: relative;     /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */
    background-color: pink;     /* 方便看效果 */

  }

水平垂直居中二
未知容器的宽高，利用“transform”属性
水平垂直居中三
利用flex布局，实际使用时应考虑兼容性，详情参考阮大神博客
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
18. display有哪些值？说明他们的作用
block：块类型。默认宽度为父元素宽度，可设置宽高，换行显示
none：缺省值。像行内元素类型一样显示
inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示
inline-block：默认宽度是内容宽度，可以设置宽高，同行显示
list-item：像块类型元素一样显示，并添加样式列表标记
table：此元素会作为块级表格来显示
inherit：规定应该从父元素继承display属性的值
19. positon的值relative和absolute定位原点是？
absolute：生成绝对定位的元素，相对于值不为static的第一个父元素进行定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
relative:生成相对定位元素，相对于其正常位置进行定位
static：默认值。没有定位，元素出现在正常的流中
inherit：规定从父元素继承position属性的值
20. CSS3有哪些新特性？
新增各种CSS选择器（：not（.input）:所有class不是“input“的节点）
圆角 （border-radius）
多列布局（multi-column layout）
阴影和反射（Shadow\Reflect）
文字特效（text-shadow）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
缩放，定位，倾斜，动画，多背景
21. 请解释一下CSS3中的Flexbox（弹性盒布局模型），以及适用场景？
一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间。
22. 用纯CSS创建一个三角形的原理是什么？
首先设置width：0，height：0。再去设置border-width宽度值，以及对应边的颜色，该隐藏的隐藏。
比如#main{
width:0;
height:0;
border-width:10px;
border-style:solid;
border-color:transparent transparent red transparent;
}
23. 一个满屏“品”字布局如何设计？
上面的div设置为100%；
下面的两个分别宽50%；
然后使用float或者inline使其不换行即可
24. css多列等高如何实现？
利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow：hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
25. 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？
*png24位的图片在ie6浏览器上出现背景，解决方案是做成PNG8.
*浏览器默认的margin和padding不同。解决方案是加一个全局的 {margin：0；padding：0 }来统一。
*IE6双边距bug：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大，解决方案是在float的标签样式中加入display：inline，将其转化为行内属性
*IE下，只能使用常规属性的方法来获取自定义属性，也可以使用getAttribute（）获取自定义属性；Firefox下，只能使用getAttribute（）获取自定义属性。解决方法：统一通过getAttribute（）获取自定义属性
*IE下，even对象有x，y属性，但是没有pageX，pageY属性
Firefox下，event对象有pageX，pageY属性，但是没有x，y属性
解决方案：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数
*Chrome中文界面下默认会将小于12px的文本强制按照12px显示，解决方案：可通过加入CSS属性-webkit-text-size-adjust：none；解决
26.li和li之间有看不见的空白间隔是什么原因引起的？有什么解决方法？
行框的排列会受到中间空白（回车/空格）等的影响，因为空格也属于字符，这些空白也会被应用样式，占据空间，所以会有间隔。
解决方案：移除空格：元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了
使用margin负值
让闭合标签吃胶囊<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血</a>
</div>
使用font-size:0
使用letter-spacing
使用word-spacing
27.absolute的containing block（容器块）计算方式跟正常流有什么不同？
无论属于哪种，都要先找到其祖先元素中最近的position值不为static的元素，然后再判断：
1、若此元素为inline元素，则containing block为能够包含这个元素生成的第一个和最后一个inline box的padding box（除margin和border之外的区域）的最小矩形
2、否则，则由这个祖先元素的padding box构成
如果都找不到，则为initial containing block
补充：static（默认的）/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
absolute：向上找最近的定位为absolute/relative的元素
fixed：它的containing block一律为根元素（html/body），根元素也是intial containing block
28.CSS里的visibility属性里有个collapse属性值是干嘛用的？在不同浏览器下以后有什么区别？
对于普通元素visibility：collapse，会将元素完全隐藏，不占据页面布局空间，与display：none表现相同。如果目标元素为table，visibility：collapse；将table隐藏，但是会占据页面布局空间，仅在Firefox下起作用。在IE下会显示元素。在Chrome下会将元素隐藏，但是会占据空间
29.position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
如果元素的display为none，那么元素不被渲染，position，float不起作用。如果元素拥有position：absolute或者position：fixed；属性那么元素将为绝对定位，float不起作用。如果元素float属性不是none，元素会脱离文档流，根据float属性值来显示，有浮动。margin不会和垂直方向上的其他元素margin折叠
30.对BFC规范（块级格式化上下文：block formatting context）的理解？
W3C CSS 2.1规范中的一个概念，它是一个独立容器，决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。
一个页面是由很多个box组成的，元素的类型和display属性，决定了这个box的类型。
不同类型的box，会参与不同的Formatting Context（决定如何渲染稳当的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。
31.请解释一下为什么需要清除浮动？清除浮动的方式？
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度塌陷使我们页面后面的布局不能正常显示
解决方法一：添加空元素
解决方法二：浮动的父容器
解决方法三：浮动元素的自动clearing
解决方法四：CSS语句中有一个:after伪选择符，就可以在父容器的尾部自动创建一个子元素
/* For modern browsers */
.cf:before,
.cf:after {
　　content:”“;
　　display:block;
}
.cf:after {
　　clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
　　zoom:1;
}
详情http://www.ruanyifeng.com/blog/2009/04/float_clearing.html
32.什么是外边距合并？
外边距合并是指，当两个垂直的外边距相遇时，它们将形成一个外边距
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
33.zoom：1的清除浮动原理？
zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决IE下比较奇葩的bug。
譬如外边距（margin）的重叠，浮动清除，触发IE的haslayout属性等
来龙去脉：当设置了zoom值以后，所设置的元素就会扩大或缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
zoom属性是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。
目前非IE由于不支持这个属性，它们又是通过什么属性来实现这个元素的缩放呢？
可以通过CSS3里的动画属性scale进行缩放
34.移动端的布局用过媒体查询吗？
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示。CSS就是为文档提供在不同媒介上展示的适配方法。
当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规则被应用。当媒体查询返回为假时，标签上带有媒体查询的样式表仍被下载（只不过不会被应用）
包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围
35. CSS优化、提高性能的方法？
CSS压缩
gzip压缩
合写CSS
抽离、拆分CSS，不加载所有的CSS
CSS放在head中，减少repaint和reflow
不用CSS表达式
不乱用CSS reset或属性设置
避免适用通配符或隐式通配符
避免层级或过度限制的CSS
详情 http://www.cnblogs.com/dolphinX/p/3508657.html
补充：使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）
36.浏览器是怎么样解析CSS选择器的？
样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。
只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃改规则
37.margin和padding分别适用什么场景使用？
margin是用来隔开元素与元素的间距，padding是用来隔开元素与内容的间隔
margin用于布局分开元素使元素与元素互不相干
padding用于元素与内容之间的间隔，让内容与元素之间有一段间隔