整理后删除#

• 目录

  1. position有几种，absolute和relative的区别

  2. display的几个属性，及其区别

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

  4. 浏览器清除浮动的方式及其原理

  5. 元素垂直居中和水平居中的方法

  6. CSS盒子模型

  7. BFC

  8. src与href的区别

  9. CSS选择器的优先级

  10. 每个HTML的Doctype有什么作用

  11. 如何理解web语义化

  12. SEO

  13. 几种常见的布局的方式及其实现

  14. flex布局

  15. px、em、rem的区别

  16. 为什么要使用css sprites

1. MDN：CSS position属性

   定位类型

   • 定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed或 sticky 的一个元素。

   • 相对定位元素（****relatively positioned element）是计算后位置属性为 relative的元素。

   • 绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。

   • 粘性定位元素****（stickily positioned element）是计算后位置属性为 sticky 的元素。

• static

  该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index属性无效。

• relative

  该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。

• absolute

  不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

  相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。

• fixed

  不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

  固定定位与绝对定位相似，但元素的包含块为 viewport 视口。

• sticky

  盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky对 table 元素的效果与 position: relative相同。

  粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。

  inherit 就不说了

2. • inline 一个或多个行内元素盒

   • block 块元素盒

   • list-item 该元素生成一个容纳内容和单独的列表行内元素盒的块状盒。 (加黑点)

   • inline-block 一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）

   • inline-table inline-table值在HTML中没有对应元素。它的行为就像一个HTML中的table元素，但是作为内联框，而不是块级框。 表格框内是一个块级上下文。

   • table

   • table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group

   • Flexbox模型值

     • flex

     • inline-flex

   • 栅格盒模型值

     • grid

     • inline-grid

   • Ruby（东亚文字注音或注释）格式化模型值

   • run-in

   • contents

   • box:在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。

   • flow-root

3. display:none关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在。

   visibility: visible隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。

4. 清除浮动的四种方式及其原理理解

   几种常用的清除浮动方法

5. 元素垂直居中和水平居中的方法

   知乎

   博客

6. CSS盒子模型

   框模型

   外边距合并

   box-sizing

   CSS栅格系统与弹性盒模型：实践比较

7. 块格式化上下文

   块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

   下列方式会创建块格式化上下文：

   • 根元素或包含根元素的元素

   • 浮动元素（元素的 float 不是 none）

   • 绝对定位元素（元素的 position 为 absolute 或 fixed）

   • 行内块元素（元素的 display 为 inline-block）

   • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）

   • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）

   • 匿名表格单元格元素（元素的 display为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）

   • overflow 值不为 visible 的块元素

   • display 值为 flow-root 的元素

   • contain 值为 layout、content或 strict 的元素

   • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）

   • 网格元素（display为 grid 或 inline-grid 元素的直接子元素）

   • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 ``column-count 为 1）

   • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

   创建了块格式化上下文的元素中的所有内容都会被包含到该BFC中。

   块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

8. HTML中href、src区别

   1.src 是指向物件的来源地址，是引入。在 img、script、iframe 等元素上使用。 2.href 是超文本引用，指向需要连结的地方，是与该页面有关联的，是引用。在 link和a 等元素上使用。

   使用区别： src通常用作“拿取”（引入），href 用作 "连结前往"（引用）。

   [图片上传失败...(image-f2be04-1526063599539)]

9. CSS选择器的优先级

   优先级

   还有书上的

   下面列表中，选择器类型的优先级是递增的：

   1. 类型选择器（type selectors）（例如, h1）和 伪元素（pseudo-elements）（例如, ::before）

   2. 类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如, [type="radio"]），伪类（pseudo-classes）（例如, :hover）

   3. ID选择器（例如, #example）

   通配选择符（universal selector）(*), 关系选择符（combinators） (+, >, ~, '') 和 否定伪类（negation pseudo-class）(:not()) 对优先级没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级）。

   给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。

   当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其他声明。虽然技术上!important与优先级无关，但它与它直接相关。

   使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

   一些经验法则：

   • 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important

   • 只有在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important

   • 永远不要在全站范围的 css 上使用!important

   • 永远不要在你的插件中使用 !important

     取而代之，你可以：

   1. 更好地利用CSS级联属性

   2. 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。

10. 每个HTML的Doctype有什么作用

## 定义和用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

11. 如何理解web语义化

**语义化**。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的**标题**就可以用标题标签，网页上的各个栏目的**栏目名称**也可以使用标题标签。文章中内容的段落就得放在**段落标签**中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。

讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

\1\. 更容易被搜索引擎收录。

\2\. 更容易让屏幕阅读器读出网页内容。

[知乎](https://www.zhihu.com/question/20455165)

[参考](https://blog.csdn.net/li2274221/article/details/25188497)

[参考2](http://www.html5jscss.com/html5-semantics-section.html)

## New Semantic Elements in HTML5

Many web sites contain HTML code like: <div id="nav">  <div class="header">  <div id="footer"> to indicate navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:

*   `<article>`

*   `<aside>`

*   `<details>`

*   `<figcaption>`

*   `<figure>`

*   `<footer>`

*   `<header>`

*   `<main>`

*   `<mark>`

*   `<nav>`

*   `<section>`

*   `<summary>`

*   `<time>`

[图片上传失败...(image-de67dd-1526063599539)] 

* * *

12. SEO(Search Engine Optimization)

[wiki](https://zh.wikipedia.org/wiki/%E6%90%9C%E5%B0%8B%E5%BC%95%E6%93%8E%E6%9C%80%E4%BD%B3%E5%8C%96)

[百度](https://baike.baidu.com/item/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E%E4%BC%98%E5%8C%96/3132?fr=aladdin)

[谷歌](https://support.google.com/webmasters/answer/35291?hl=zh-Hans)

但是经过多年的搜索引擎算法的调整，现在较重要的影响标签为：

*   `<title>`

*   `<meta>`

*   `<h1>`

*   `<img>`中的 alt属性

13. 几种常见的布局的方式及其实现

position

float

流动

网格

圣杯

flex

[圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例](https://blog.csdn.net/wangchengiii/article/details/77926868)

14. flex布局

[Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

15. px、em、rem的区别

[基于vw等viewport视区单位配合rem响应式排版和布局](http://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/)

px是固定像素，em是相对父元素字体大小的百分比,比如div设成15px，div的子节点1em就是15px,2em就是30px。 rem和em差不多，但是是相对于[html元素](https://www.baidu.com/s?wd=html%E5%85%83%E7%B4%A0&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dWm1Khm1wbmvnvuyRLrjnk0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHnsn1nYn1bLnHbYP1m4n164rf)(文档根元素document.documentElement)而不是父元素。

[彻底弄懂css中单位px和em,rem的区别](http://www.cnblogs.com/leejersey/p/3662612.html)

[综合指南: 何时使用 Em 与 Rem](https://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984)

16. 为什么要使用css sprites

CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

[翻译 – 高性能网站需避免的7个错误](http://www.zhangxinxu.com/wordpress/2011/11/seven-mistakes-that-make-websites-slow/)

**合并图片为Sprites**

CSS Spriting已经变成主流技术。其做法是将很多个公共图片合并为一个大的图片文件，然后你通过CSS控制位置让图片需要的地方显示。于是，告别N多图片，现在只有一个。

事先提醒一句，这个技术的维护是很折腾的，因为即使是个很小的更改也要更新整个图片以及CSS，甚至是HTML。幸运的是，CSS spriting自动化工具如[SpriteMe](http://spriteme.org/), [Compass](http://compass-style.org/help/tutorials/spriting/), [Yottaa](http://www.yottaa.com/web-performance-optimization)