高频前端面试题html/css部分

1.前端需要注意哪些 SEO
1.合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可
2.语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
3.重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
4.重要内容不要用 js 输出：爬虫不会执行 js 获取内容
少用 iframe：搜索引擎不会抓取 iframe 中的内容
5.非装饰性图片必须加 alt
6.提高网站速度：网站速度是搜索引擎排序的一个重要指标

2.img的title和alt有什么区别
1.title是global attributes之一，用于为元素提供附加的 advisory information。通常当鼠标滑动到元素上的时候显示。
2.alt是img的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

3.html全局属性（global attribute）有哪些

• accesskey:设置快捷键，提供快速访问元素如aaa在 windows 下的 firefox 中按alt + shift + a可激活元素
• class:为元素设置类标识，多个类名用空格分开，CSS 和 javascript 可通过 class 属性获取元素
• contenteditable: 指定元素内容是否可编辑
• contextmenu: 自定义鼠标右键弹出菜单内容
• data-*: 为元素增加自定义属性
• dir: 设置元素文本方向
• draggable: 设置元素是否可拖拽
• id: 元素 id，文档内唯一
• lang: 元素内容的的语言
• hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
• style: 行内 css 样式
• title: 元素相关的建议信息
• tabindex: 设置元素可以获得焦点，通过 tab 可以导航
• translate: 元素和子孙节点内容是否需要本地化

4.什么是 web 语义化,有什么好处？

web 语义化是指通过 HTML 标记表示页面包含的信息，包含了 HTML 标签的语义化和 css 命名的语义化。 HTML 标签的语义化是指：通过使用包含语义的标签（如 h1-h6）恰当地表示文档结构 css 命名的语义化是指：为 html 标签添加有意义的 class，id 补充未表达的语义，如Microformat通过添加符合规则的 class 描述信息 为什么需要语义化：
去掉样式后页面呈现清晰的结构
盲人使用读屏器更好地阅读
搜索引擎更好地理解页面，有利于收录
便团队项目的可持续运作及维护

5.什么是渐进增强
渐进增强是指在 web 设计时强调可访问性、语义化 HTML 标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:

所有浏览器都必须能访问基本内容
所有浏览器都必须能使用基本功能
所有内容都包含在语义化标签中
通过外部 CSS 提供增强的布局
通过非侵入式、外部 javascript 提供增强功能
end-user web browser preferences are respected

6.CSS 选择器有哪些
通用选择器：选择所有元素，不参与计算优先级，兼容性 IE6+
#X id 选择器：选择 id 值为 X 的元素，兼容性：IE6+
.X 类选择器： 选择 class 包含 X 的元素，兼容性：IE6+
X Y 后代选择器： 选择满足 X 选择器的后代节点中满足 Y 选择器的元素，兼容性：IE6+
X 元素选择器： 选择标所有签为 X 的元素，兼容性：IE6+
:link，:visited，:focus，:hover，:active 链接状态： 选择特定状态的链接元素，顺序 LoVe HAte，兼容性: IE4+
X + Y 直接兄弟选择器：在X 之后第一个兄弟节点中选择满足 Y 选择器的元素，兼容性： IE7+
X > Y 子选择器： 选择 X 的子元素中满足 Y 选择器的元素，兼容性： IE7+
X ~ Y 兄弟： 选择X 之后所有兄弟节点中满足 Y 选择器的元素，兼容性： IE7+
[attr]：选择所有设置了 attr 属性的元素，兼容性 IE7+
[attr=value]：选择属性值刚好为 value 的元素
[attr~=value]：选择属性值为空白符分隔，其中一个的值刚好是 value 的元素
[attr|=value]：选择属性值刚好为 value 或者 value-开头的元素
[attr^=value]：选择属性值以 value 开头的元素
[attr$=value]：选择属性值以 value 结尾的元素
[attr=value]：选择属性值中包含 value 的元素
[:checked]：选择单选框，复选框，下拉框中选中状态下的元素，兼容性：IE9+
X:after, X::after：after 伪元素，选择元素虚拟子元素（元素的最后一个子元素），CSS3 中::表示伪元素。兼容性:after 为 IE8+，::after 为 IE9+
:hover：鼠标移入状态的元素，兼容性 a 标签 IE4+， 所有元素 IE7+
:not(selector)：选择不符合 selector 的元素。不参与计算优先级，兼容性：IE9+
::first-letter：伪元素，选择块元素第一行的第一个字母，兼容性 IE5.5+
::first-line：伪元素，选择块元素的第一行，兼容性 IE5.5+
:nth-child(an + b)：伪类，选择前面有 an + b - 1 个兄弟节点的元素，其中 n >= 0， 兼容性 IE9+
:nth-last-child(an + b)：伪类，选择后面有 an + b - 1 个兄弟节点的元素 其中 n >= 0，兼容性 IE9+
X:nth-of-type(an+b)：伪类，X 为选择器，解析得到元素标签，选择前面有 an + b - 1 个相同标签兄弟节点的元素。兼容性 IE9+
X:nth-last-of-type(an+b)：伪类，X 为选择器，解析得到元素标签，选择后面有 an+b-1 个相同标签兄弟节点的元素。兼容性 IE9+
X:first-child：伪类，选择满足 X 选择器的元素，且这个元素是其父节点的第一个子元素。兼容性 IE7+
X:last-child：伪类，选择满足 X 选择器的元素，且这个元素是其父节点的最后一个子元素。兼容性 IE9+
X:only-child：伪类，选择满足 X 选择器的元素，且这个元素是其父元素的唯一子元素。兼容性 IE9+
X:only-of-type：伪类，选择 X 选择的元素，解析得到元素标签，如果该元素没有相同类型的兄弟节点时选中它。兼容性 IE9+
X:first-of-type：伪类，选择 X 选择的元素，解析得到元素标签，如果该元素 是此此类型元素的第一个兄弟。选中它。兼容性 IE9+

7.css sprite 是什么,有什么优缺点
概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
减少 HTTP 请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式

8.display: none;与visibility: hidden;的区别
1.display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见。
2.display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点由于继承了 hidden 而消失，通过设置 visibility: visible，可以让子孙节点显示。
3.改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘。
4.读屏器不会读取 display: none;元素内容；会读取 visibility: hidden;元素内容。

9.specified value,computed value,used value 计算方法
specified value: 计算方法如下：

如果样式表设置了一个值，使用这个值
如果没有设值，且这个属性是继承属性，从父元素继承
如果没有设值，并且不是继承属性，则使用 css 规范指定的初始值

computed value: 以 specified value 根据规范定义的行为进行计算，通常将相对值计算为绝对值，例如 em 根据 font-size 进行计算。一些使用百分数并且需要布局来决定最终值的属性，如 width，margin。百分数就直接作为 computed value。line-height 的无单位值也直接作为 computed value。这些值将在计算 used value 时得到绝对值。computed value 的主要作用是用于继承

used value：属性计算后的最终值，对于大多数属性可以通过 window.getComputedStyle 获得，尺寸值单位为像素。以下属性依赖于布局，

background-position
bottom, left, right, top
height, width
margin-bottom, margin-left, margin-right, margin-top
min-height, min-width
padding-bottom, padding-left, padding-right, padding-top
text-indent

10.link与@import的区别

link是 HTML 方式， @import是 CSS 方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在 css 文件中引用其他文件
总体来说：link 优于@import

11.display: block;和display: inline;的区别

block元素特点：
1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align

inline元素特点

水平方向上根据direction依次布局 2.不会在元素前后进行换行 3.受white-space控制 4.margin/padding在竖直方向上无效，水平方向上有效 5.width/height属性对非替换行内元素无效，宽度由元素内容决定 6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定 6.浮动或绝对定位时会转换为block 7.vertical-align属性生效

12.PNG,GIF,JPG 的区别及如何选

gif

8 位像素，256 色
无损压缩
支持简单动画
支持 boolean 透明
适合简单动画

JPEG：

颜色限于 256
有损压缩
可控制压缩质量
不支持透明
适合照片

PNG：

有 PNG8 和 truecolor PNG
PNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画
适合图标、背景、按钮

13.CSS 有哪些继承属性
font
word-break
word-spacing
letter-spacing
text-align
text-shadow
text-transform
text-rendering
ling-height
color
visibility
cursor

14.容器包含若干浮动元素时如何清理(包含)浮动

1.容器元素闭合标签前添加额外元素并设置clear: both
2.父元素触发块级格式化上下文(见块级可视化上下文部分)
3.设置容器元素伪元素进行清理推荐的清理浮动方法

/**
* 在标准浏览器下使用
* 1 content内容为空格用于修复opera下文档中出现
*   contenteditable属性时在清理浮动元素上下的空白
* 2 使用display使用table而不是block：可以防止容器和
*   子元素top-margin折叠,这样能使清理效果与BFC，IE6/7
*   zoom: 1;一致
**/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
* IE 6/7下使用
* 通过触发hasLayout实现包含浮动
**/
.clearfix {
    *zoom: 1;
}

15.什么是 FOUC?如何避免\

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head

16.如何创建块级格式化上下文(block formatting context),BFC 有什么用

创建规则：

根元素
浮动元素（float不是none）
绝对定位元素（position取值为absolute或fixed）
display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素

作用：

可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的 margin 折叠

17.display,float,position 的关系

如果display为 none，那么 position 和 float 都不起作用，这种情况下元素不产生框

如果 position 值为 absolute 或者 fixed，框就是绝对定位的，float 的计算值为 none，display 根据下面的表格进行调整。

否则，如果 float 不是 none，框是浮动的，display 根据下表进行调整
否则，如果元素是根元素，display 根据下表进行调整
他情况下 display 的值为指定值 总结起来：绝对定位、浮动、根元素都需要调整display

18.外边距折叠(collapsing margins)

毗邻的两个或多个margin会合并成一个 margin，叫做外边距折叠。规则如下：

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
浮动元素/inline-block 元素/绝对定位元素的 margin 不会和垂直方向上的其他元素的 margin 折叠
创建了块级格式化上下文的元素，不会和它的子元素发生 margin 折叠
元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

19.如何确定一个元素的包含块(containing block)
根元素的包含块叫做初始包含块，在连续媒体中他的尺寸与 viewport 相同并且 anchored at the canvas origin；对于 paged media，它的尺寸等于 page area。初始包含块的 direction 属性与根元素相同。

position为relative或者static的元素，它的包含块由最近的块级（display为block,list-item, table）祖先元素的内容框组成

如果元素position为fixed。对于连续媒体，它的包含块为 viewport；对于 paged media，包含块为 page area

如果元素position为absolute，它的包含块由祖先元素中最近一个position为relative,absolute或者fixed的元素产生，规则如下：

如果祖先元素为行内元素，the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.
其他情况下包含块由祖先节点的padding edge组成
如果找不到定位的祖先元素，包含块为初始包含块

20.如何水平居中一个元素

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */

        background: purple;
    }


<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple;
    }
</style>


<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        left: 50%;
        margin-left: -400px;

        background-color: purple;
    }
</style>


<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;

        background-color: purple;
    }
</style>

21.如何竖直居中一个元素
需要居中元素为单行文本，为包含文本的元素设置大于font-size的line-height：

<p class="text">center text</p>

<style>
.text {
    line-height: 200px;
}
</style>