HTML&CSS复习笔记三（Sun）

九 行内元素有哪些？块级元素有哪些？空元素有哪些？
块级元素：div、p、h1-h6、ol、ul、table、form
行内元素：span、a、img、input、select、small
空元素：没有内容的元素、 br、 hr

                                 

十 doctype的作用是什么？严格模式与混合模式如何进行区分？它们之间有什么样的意义？
doctype的作用是<!DOCTYPE> 声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范来渲染文档。
在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
它们之间的意义是可以根据不同的模式显示在浏览器当中，DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。

 

十一 html5的新特性有哪些？
用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素新的内容元素，比如 article、footer、header、nav、section、menu新的表单控件，比如 number、date、time、email、url、search、color、range、month、week、datetime、datetime_local

 

十二 html5的存储类型有什么区别？
cookies:服务器和客户端都可以访问，大小只有4KB左右，有有效期，过期后将会删除；

localStorage:将数据保存在本地的硬件设备，没有时间限制，关闭浏览器也不会丢失。永久保存

sessionStorage:将数据保存在session对象中，关闭浏览器后数据也随之销毁。临时保存

1）cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
2）存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
3）作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享。

 

十三 对于HTML语义化的理解？
根据内容的结构化、选择合适的标签，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好的解析。对于语义化的好处是：
1）有利于SEO和搜索引擎之间的沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
2）在没有CSS的情况下，页面也能呈现出很好地清晰内容结构。
3）便于团队开发和维护，语义化更加具有可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
4）支持多终端设备的浏览器渲染。

 

十四  BFC是什么

一、什么是BFC 
BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）

二、 形成 BFC 的条件 
1、浮动元素，float 除 none 以外的值； 
2、绝对定位元素，position（absolute，fixed）； 
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions； 
4、overflow 除了 visible 以外的值（hidden，auto，scroll）

三、BFC常见作用 
1、包含浮动元素 
问题案例：高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用bfc来清除浮动了。

 

2、不被浮动元素覆盖 
问题案例： div浮动兄弟遮盖问题：由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给蓝色块加 overflow: hidden，触发bfc来解决遮挡问题。 

3、 BFC 会阻止外边距折叠 
问题案例：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决

十五 CSS选择器优先级

！Important > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

 

十六 清除浮动的方法

为什么要清除浮动？

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

四种方法：

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

通过触发BFC方式，实现清除浮动

3.使用after伪元素清除浮动（推荐使用）

4.使用before和after双伪元素清除浮动