CSS学习

CSS学习笔记：

1. CSS类名定义最佳实践：

• 应该根据“它们是什么”来定义而不是“它们的外观如何”来定义。
• 定义类名时，多个单词间用连字符

2. 层叠：文档中的一个元素可能同时被多个CSS选择器选中，每个选择器都有一些CSS规则，这就是层叠。

层叠给每个样式分配一个重要度。重要度高的优先执行。层叠采用的重要度次序：

• 标有！important的用户样式
• 标有！important的作者样式
• 作者样式
• 用户样式（通过浏览器应用自己的样式）
• 浏览器/用户代理应用的样式

3. 继承：就是父元素的规则也会适用于子元素。

4. 特殊性：

　　针对一个html元素所定义的多个样式该执行哪一个？根据最特殊的定义来执行：

　　Style属性定义的样式 > ID选择器定义的样式 > 类选择器定义的样式 > 类型选择器 （如果两个样式定义的特殊性相同， 那么后定义的规则优先）

5. 基于最新的浏览器基准测试：导入样式表（@import url(/css/demo.css)）比链接式样式表（<link herf="/css/demo.css" rel="stylesheet" type="text/css" />）慢。

　　使用结构良好的单一css文件可以显著提高下载时间优化网页速度，原因: 影响下载时间的因素是多个文件下载的话会导致发送多个数据包，进而花费时间，而通常数据包的容量不十分会影响时间。

　　scss给出了很好的解决方案。对于不同的页面定义单独的scss文件，然后import到一个base scss。最终通过提供的工具进行合并输出一个css文件，并且可以输出去掉格式的css文件以减少文件容量，优化下载时间。

6. 盒模型：margin -> border -> padding -> content

7. 外边距叠加： 当两个或更多垂直外边距相遇时，它们将形成一个外边距，高度等于两个发生叠加的外边距中较大者。

8. 块级元素：（Div p）从上到下一个接一个地垂直排列。display: block; 行级元素：（span）在一行中水平排列 display: inline. 可以使用样式display: inline-block 对块级元素应用，使其具有行级元素的属性，即在一行中水平排列

9. CSS定位有三种机制：

　9-1. 普通流：当浏览器开始渲染 HTML 文档，它从窗口的顶端开始，经过整个文档内容的过程中，分配元素需要的空间。除非文档的尺寸被 CSS 特别的限定，否则浏览器垂直扩展文档来容纳全部的内容。每个新的块级元素渲染为新行。行内元素则按照顺序被水平渲染直到当前行遇到了边界，然后换到下一行垂直渲染。这个过程被成为普通文档流。

　9-2. 相对定位/绝对定位/固定定位：

• 相对定位：相对于元素在文档流中的初始位置做位移（position: relative）
• 绝对定位：应用了绝对定位(position: absolute)的元素, 就将从文档流中隔离。文档流中其他元素的布局就像绝对定位的元素不存在一样。绝对定位是相对于距离它最近得已定位祖先元素做位移。如果不存在已定位的祖先元素，那么相对于初始包含块。
• 固定定位：相对于浏览器的窗口定位，固定在窗口的某个位置不管滚动条是否滚动。（position: fixed）

　9-3. 浮动：float: left/right 元素应用浮动后则从普通流中脱离。文档流中其他元素的布局就像浮动的元素不存在一样。一个例外：如果浮动的元素后面有一个文本元素， 那么文本元素会给浮动元素让出位置，形成文字包围图片的效果。

 

 

 

 

 

 

转载于:https://www.cnblogs.com/nemoding/archive/2013/02/26/2920731.html