HTML/CSS面试题

盒模型

1.概念：盒模型就是把一个元素表示成一个矩形盒子，包括content（内容），padding（内边距），border（边框），margin（外边距）

• 两种盒模型：标准盒子模型和IE盒模型的区别
  标准盒模型的内容大小就是content
  IE盒模型的大小是content+padding+border
• 切换盒模型
  通过设置box-sizing属性。标准盒模设置为content-box（默认）IE盒模型设置为border-box

BFC

1.概念： BFC就是一个特殊的块，内部元素和外部元素不会相互影响。

2.应用场景：

• 清除浮动（计算BFC高度的时候，内部浮动元素高度也会计算在内）
• 防止外边距重叠
• 自适应布局，消除文字环绕
  原理：BFC不与浮动元素重叠

3.创建BFC
float属性（不为none）、overflow属性（不为visible）、position属性（absolute，fixed）、display属性（inline-block，table-cell，table-caption，flex，inline-flex）

margin重叠/高度塌陷

1.概念：
相邻多个块状元素，如果设置的外边距，在垂直方向上，margin会产生重叠，以绝对值大的为准显示
2.防止margin重叠：
创建BFC元素
3.margin重叠应用：
多个段落垂直排列，第一段与上边距离显示一个大小，剩下的段落之间距离显示另一个大小

position属性

规定元素定位类型

1.脱离文档流：元素显示位置与代码排版不一致
2.属性值

• static默认值，无定位
• relative 不脱离文档流，相对自身位置定位
• absolute脱离文档流，相对父级第一个有定位属性的元素定位
• fix相对浏览器定位
• inhert继承腹肌元素的定位方式

3.z-index属性：
使用了relative、absolute、fixed三种定位后，控制元素显示的优先级，其值是一个整数值，默认为0，数值越大表示拥有的优先级越高，（*该属性只对使用了定位的元素有效）

display属性

规定元素应该生成的框的类型

1.常用属性值

• none 不显示
• block显示为块级元素
• inline-block行内块元素，元素按行内排列，内容按块显示
• inline显示为内联元素(默认值)
• list-item：元素像块元素一样显示，并添加样式列表标记。
• table：元素会作为块级表格来显示。
• table-caption：元素会作为一个表格标题显示。
• inherit：从父元素继承display属性。

2.display:inline-block元素显示间隙
消除方法：

• 移除标签间空格
• 父级元素font-size设置为0

伪类/伪元素

1.伪类：为已经存在的元素，在某个状态时候，添加样式

2.伪元素：建不存在于DOM树中的元素，并添加样式

页面导入样式link和@import区别

• link属于XHTML标签，除了加载CSS外，还能用于定义RSS，@import是css提供的，只能加载css
• 页面加载时，link会同时加载，而@import要等到页面加载完才加载
• link兼容上好，@import兼容IE5以上
• link引入的样式支持js修改，@import不支持

overfow属性

定义元素溢出时的显示状态

属性值；

• visible 默认值 内容不修剪，显示在元素框之外
• hidden 内容被修剪，超出部分不显示
• scroll 内容被修剪，滚动条可查看剩余内容
• auto 如果超出，滚动条查看剩余内容
• inhert 继承父元素的overfow属性

href和src的区别

（1）href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的连接，用于超链接
（2）src是执行外部资源的位置，指向的内容会嵌入到文档中当前标签所在位置

为什么将CSS样式放在头部，将JS脚本放在底部

• 为了更好的用户体验,尽快在网页显示内容，将css放在头部引入，与html渲染同步进行
• js具有阻塞性，当执行到script标签是，会先暂停html的解析

script标签的async和defer属性

• async：解析到script标签，与HTML解析并行下载js文件，下载完成，暂停HTML解析，执行脚本
• derfer： 解析到script标签，与HTML解析并行下载js文件，直到解析完html，再执行脚本

常用的浏览器及内核

• IE：Trident内核
• firefox火狐：Gecko内核
• Oprera欧朋：Presto
• webkit:国产大部分双核浏览器其中一核）Safari（苹果），Chrome

DOCTYPE作用？严格模式与混杂模式

1.声明位于HTML文档中的第一行，处于标签之前，告知浏览器的解析器用什么文档标准解析这个文档。
2.严格模式下，排版和JS以浏览器支持的最高标准运行；混杂模式下，页面以宽松向后兼容的方式显示
3.如何触发混杂模式：DOCTYPE不存在或格式不正确，会导致文档以混合模式呈现

优雅降级和渐进增强

1.渐进增强（progressive enhancement）：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2.优雅降级（graceful degradation）：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

cookie、localStorage、sessionStorage的区别

• cookie每次会在同源请求中携带，webStorage只保存的客户端本地
• cookie存储量只有4kb，webStorage能达到5mb
• cookie在设置的过期时间内有效，lcoalStorage长期存储在客户端，除非人为清除，sessionStorage在浏览器窗口关闭前有效

对标签语义化的理解

• 用正确的标签做正确的事
• HTML语义化让页面内容结构化，便于浏览器，搜索引擎解析
• 没有CSS样式也能以一种文档格式显示
• 阅读源码更方便，便于理解
• 利于SEO优化

清除浮动的方式

1.父级元素给固定高度height
2.父级元素创建BFC(float属性不为none、overflow属性不为visible)
3.浮动元素结尾添加空div，设置属性clear：both
4.父级元素定义伪类

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

重排和重绘

重排：元素几何变化，元素增减，操作DOM，导致渲染树需要重新计算
重绘：单纯外观变化，如背景，颜色变化

避免重排的方式：
尽量减少DOM操作

RGB和opacity

区别：RBG属性设置透明的时候只对元素本身生效，opacity会继承到子元素

RGB对IE6~8的兼容：

filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#AARRGGBBAA,endColorstr=#AARRGGBBAA);

opacity对IE6~8的兼容；

filter:alpha(opacity=50); /*对应于opacity:0.5;*/