前端试题——HTML+CSS部分

1. 页面导入样式时，使用link和@import的区别

• 本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
• 加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
• 兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
• 使用DOM控制样式时的差别：当使用JavaScript控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的。

2. box-sizing的常用属性

/* 默认值，标准盒子模型。 width 与 height 只包括内容的宽和高，不包括border，padding，margin */
box-sizing: content-box; 
/* width 和 height 属性包括内容，padding 和 border，但不包括margin */
box-sizing: border-box;
/* 从父元素继承 box-sizing 属性的值 */
box-sizing: inherit;

3. 浮动的特性

• 块元素在一行显示
• 内联元素支持宽高
• 默认内容撑开宽度
• 脱离文档流
• 阻止margin叠压

4. 常用的清除浮动的方法

• 父级元素加高度
     缺点：1）不利于维护
         2）在内容不确定高度时，无法使用
• inline-block
     缺点：1）会产生空格间隙
         2）无法使用margin左右居中
• 加空标签
     缺点：1）必须为非内联元素
         2）但凡使用到浮动都要加空标签
• 以浮制浮
     缺点：1）所有父级元素都要加浮动
         2）最终要加到html上就无法继续清除浮动
• br标签
     缺点：不符合W3C规范（结构、样式、行为三者分离）
• 父级元素overflow: hidden
     缺点：溢出的部分会被隐藏
• after伪类（推荐）

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

5. BFC

BFC(Block Fomatting Context)为块级格式化上下文的简称。实质上可以理解为盒子内部一套自己的渲染规则，而这种渲染规则会影响着元素的定位以及与其兄弟元素之间的相互作用。一般当我们进行盒子布局的时候，形成BFC模式的盒子就会按自己的渲染规则布局和定位而不影响其他环境中的布局（常见的浮动元素脱离标准文档流，其内部子元素则按照其相应的渲染规则布局，而浮动元素之间则互不影响，其自身就像一个独立的容器）。

BFC作用：

• 阻止父子元素兄弟元素的margin传递
• 包含浮动元素
• 不被浮动元素覆盖

BFC触发条件：

• float的值不为none
• position的值不为static或者relative
• display的值为 table-cell、table-caption、inline-block、flex、inline-flex中的其中一个
• overflow的值不为visible

6. img标签上title属性与alt属性的区别

alt：

• 倘若图片加载不成功未能显示出来，就会在图片未显示的地方出现一段文字。这一作用是为了给未加载出来的图片提供信息，方便用户浏览网页，同时也方便开发人员维护网页
• 搜索引擎可以通过这个属性的文字描述获取图片

title：

• 当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释

通俗来讲，alt属性的实质是通过文字来代替图片的内容，而title属性的实质是对图片的描述或者注释。

7. 请说出至少5个html5新增的标签，并说明其语义和应用场景

• section：定义文档中的一个章节
• nav：定义只包含导航链接的章节
• header：定义页面或章节的头部，它经常包含 logo、页面标题和导航性的目录
• footer：定义页面或章节的尾部，它经常包含版权信息、法律信息链接和反馈建议用的地址
• aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理

另外还有article、time、audio、video、canvas、mark等等。

8. iframe的优缺点
优点：

• iframe能够原封不动的把嵌入的网页展现出来。
• 如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改，方便快捷。
• 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe嵌套，可以增加代码的可重用。
• 如果遇到加载缓慢的第三方内容，如图标或广告，这些问题可以由iframe来解决。
• iframe会堵塞主页面的Onload事件。
• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

缺点：

• 会产生很多的页面，不容易管理
• iframe框架结构个数多的话，可能会出现上下左右滚动条，会分散访问者的注意，用户体验度差。
• 代码复杂，无法被一些搜索引擎索引到，搜索引擎爬虫还不能很好的处理iframe中的内容，所以不利于搜索引擎优化。
• 很多移动设备无法完全显示框架，设备兼容性差
• iframe框架页面会增加服务器的http请求，对于大型网站是不可取的

9. 简述一下对HTML语义化的理解

• HTML 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
• 即使在没有样式 CSS 的情况下也能以一种文档格式显示，并且是容易阅读的
• 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，有利于 SEO
• 使阅读源代码的人更容易将网站分块，便于阅读、维护和理解

10. CSS选择器有哪些

• id选择器
• 类选择器
• 标签选择器
• 群组选择器
• 包含选择器
• 属性选择器
• 伪类选择器

11. CSS选择器优先级

• !important 优先级最高
• 对于选中器中给定的ID属性值，100
• 对于选择器中给定的类属性值，属性选择或伪类，10
• 对于选择器中给定的元素选择器和伪元素，1
• 通配符选择器对特殊性没有任何贡献，0

12. CSS3新增伪类

• :first-of-type 选择属于其父元素的首个元素
• :last-of-type 选择属于其父元素的最后元素
• :only-of-type 选择属于其父元素唯一的元素
• :only-child 选择属于其父元素的唯一子元素
• :nth-child(2) 选择属于其父元素的第二个子元素
• :enabled :disabled 表单控件的禁用状态
• :checked 单选框或复选框被选中

13.display: none与visibility: hidden的区别

• display：none 不显示对应的元素，在文档布局中不再分配空间
• visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间