coder

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。具有 BFC 特性的元素可以看作是一个隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。如果使容器触发 BFC，那么容器将会包裹住浮动元素，在计算 BFC 的高度时，浮动元素也参与计算。

rem 是 CSS3 新增的一个相对单位，rem 是相对于根元素 html 的字体大小（font-size）来计算的长度单位。如果你没有设置 html 的字体大小，就会以浏览器默认字体大小（16px）为基准，即 1rem = 16px。但如果此时将 rem 与 px 进行换算很麻烦，比如 0.75rem = 12px。为了更方便的进行换算（比如1：10），在做移动端页面时，业内流行用 62.5% 来初始化（16px * 62.5% = 10px）。

就算只用一个 ID 时也会大幅提升优先级，当需要覆盖这个选择器时，通常找不到另一个更有意义的 ID，于是就会复制原来的选择器，然后加上另一个类。如果两个声明的来源和优先级相同，那么后出现的样式（在样式表中出现较晚，或者位于页面较晚引入的样式表中）会覆盖先出现的样式。正确的做法是在包里包含一个样式表，这样用户就可以在使用这份样式表的同时，在不引入优先级竞赛的前提下，自定义其中的样式。子选择符的写法是在两个选择符之间添加大于号，与后代选择符不同，它只选择一个元素的直接后代，也就是子元素。important。

有时候我们想选择的页面区域不是通过元素来表示的（比如想选择一段话的第一个字），而我们也不想为此给页面添加额外的标记。有时候，我们想基于文档结构以外的情形来为页面添加样式，比如基于超链接或表单元素的状态。，它匹配的元素有一个 ID 属性，而且该属性的值出现在当前页面 URL 末尾的井号（#）后边。，专门用于排除某些选择符，可以配合各种放到括号中的选择符使用，不过伪元素和它自身除外。伪类选择符的语法是以有一个冒号开头，用于选择元素的特定状态或关系。就是页面锚点跳转后，给当前选中的元素增加样式。

盒模型是 CSS 的核心概念，描述了元素如何显示，以及元素之间如何相互作用、相互影响。

static（静态定位）对象遵循标准文档流，top，right，bottom，left 等属性失效。relative（相对定位）对象遵循标准文档流，使用 top，right，bottom，left 等属性相对于该对象在标准文档流中的位置进行偏移（相对于元素的正常位置进行定位），同时可通过 z-index 定义层叠关系。absolute（绝对定位）对象脱离标准文档流，使用 top，right，bottom，left 等属性进行绝对定位（相对于 static 定位以外的第一个父元素进行绝对定位。

使用 @import 引用的 CSS 文件只有在引用它的那个 css 文件被下载、解析之后，浏览器才会知道还有另外一个 css 需要下载，这时才去下载，然后下载后开始解析、构建 render tree 等一系列操作。在 IE 中，@import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 js 文件先于 @import下 载，并且打乱甚至破坏 @import 自身的并行下载。注意：网上常说的「link 引入的样式权重大于 @import 引入的样式权重」是不太合理的。