【读书笔记】精通CSS 第二版_html/css_WEB-ITnose

 

div和span：

div用来对块级元素分组，span用来对行级元素分组。div代表division，它可以将文档分隔为几个有意义的部分，应该只在没有现有元素能实现区域分隔的情况下使用div。

微格式（microformat）：

HTML中缺少相应的元素，很难突出显示人，地点，日期等类型的信息

参考：  微格式

文档类型定义DTD：

DTD是一组机器可读的规则，它们定义XML或HTML的特定版本中允许有什么不允许有什么，在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施

DOCTYPE当前有两种风格，严格（strict）和过渡（transitional）

浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性，他们创建了

标准模式

混杂模式（quirks mode）

几乎标准的模式（almost standard mode）

选择器（selector）：

元素选择器

后代选择器：由两个选择器之间的空格表示

ID选择器

类选择器

伪类选择器：

                             ：link 和：visited称为链接伪类，只能用于锚元素

                            ：hover ：active 和 ：focus称为动态伪类，理论上可以用于任何元素

通用选择器：*，可以用来对某个元素的所有后代应用样式，或者跳过一级后代

子选择器：>  ，只选择元素的直接后代，即子元素

相邻同胞选择器：+ ， 用于定位同一个父元素下某个元素之后的元素

属性选择器：根据某个属性是否存在或属性的值来寻找元素

层叠（cascade）和特殊性：

！important提高重要度。

作者的样式表即站点开发者最重要，用户其次，最后是浏览器或者用户代理使用的默认样式表

如果两个规则的特殊性相同，那么最后定义的优先

层叠采用以下重要度次序：

1. 标有！important的用户样式
2. 标有！improtant的作者样式
3. 作者样式
4. 用户样式
5. 浏览器/用户代理应用的样式

继承：

应用样式的元素的后代会继承样式的某些属性

直接应用于元素的任何样式总会覆盖继承而来的样式，这是因为继承而来的样式特殊性为空

规划组织和维护样式表：管理代码的方法

最近的浏览器基准测试已经表明：导入样式表比链接样式表慢

多个文件会导致从服务器发送更多的数据包，这些数据包的数量（而不是内容）会影响下载时间

浏览器只能从同一个域同时下载数量有限的文件（老式浏览器2个，现代浏览器8个）

CSS使用c风格的/* */注释，建议在每个注释头中添加一个标志@注释，便于搜索

链接：  CSSDoc项目：CSS模块化注释

CSS文档结构

/* @group general styles一般性样式

---------------------------------------------------------------------*/

1. 主体样式
2. reset样式
3. 链接
4. 标题
5. 其他元素

/* @group helper styles辅助样式

---------------------------------------------------------------------*/

 

1. 表单
2. 通知和错误
3. 一致的条目

/* @group page structures 页面结构

---------------------------------------------------------------------*/

 

1. 标题，页脚和导航
2. 布局
3. 其他页面结构元素

/* @group page components页面组件

---------------------------------------------------------------------*/

 

1. 各个页面

/* @group overrides 覆盖

---------------------------------------------------------------------*/

颜色参考值表

开发前在样式表头部以注释方式添加颜色查询表，完成后删除

/* Color Variables

@colordef #434343;  dark gray;

@………………………………………….

*/

CSS优化

删除注释，删除空白

链接：

服务器端压缩：Apache 的mod_gzip或者mod_deflate

盒模型

如果在元素上添加背景，那么背景会应用于由内容和内边距组成的区域，因此我们常常使用内边距在元素周围创建一个隔离带，使内容不会与背景混在一起，添加边框会在内边距的外边添加一条线，在边框外的是外边距，外边距是透明的，一般使用它控制元素之间的间隔。

css2.1还包括outline属性，与border属性不同，轮廓绘制在元素框之上，所以它们不影响元素的大小和定位，因此outline有助于修复bug，因为它们不影响页面布局，大多数现代浏览器（包括IE8）支持轮廓。

内边距，边框，外边距都是可选的，默认为0。但是许多元素将由用户代理样式表设置外边距和内边距。

外边距可以为负值

外边距叠加：当两个或者更多垂直外边距相遇时，它们将会形成一个外边距，这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。当一个元素包含在另一个元素中，假设没有内边距或者边框将它们分开，它们的顶和底外边距也会叠加。空元素如果只有外边距没有内边距和边框，它自身的顶外边距和底外边距也会发生叠加。

外边距叠加实际上有重要的意义，它使有若干段落组成的文本页面各处的距离一致。

只有普通文档刘中块框的垂直外边距才会发生叠加，行内框，浮动框或绝对定位框之间的外边距不会叠加。

可视化格式模型

display：改变生成的框的类型

block：块级元素，块框，从上到下一个接一个垂直排列，框之间的垂直距离由框的垂直外边距计算出来，=

inline：行内元素，行内框，在一行中水平排列，可以用水平内边距，边框和外边距调整水平间距，但是垂直内边距，边框，外边距不影响行内框的高度。在行内框上设置显示的高度或者宽度也没有影响。

                       由一行形成的水平框称为行框，行框的高度总是足以容纳它所包含的所有行内框，但是设置行高可以增加这个框的高度，因此修改行内框尺寸的唯一方法是修改行高或者水平边框内边距外边距。

none：不显示，生成的元素根本没有框，不占用文档空间

inline-block 顾名思义，这个声明让元素像行内元素一样水平排列，但是框的行为依然符合块级框的行为

理解屏幕上看到的所有东西都会形成某种框

匿名块框：将一些文本添加到一个块级元素（比如div）的开头时，这些文本会被当成块级元素对待

匿名行框：块级元素内的文本行，假设一个包含三行文本的段落，每行文本形成一个匿名行框

无法直接对匿名块或行框应用样式，除非使用不常用的： first-line伪元素

CSS三种定位机制：

普通流：元素框的位置由元素在HTML中的位置决定

                         相对定位：position：relative ；

相对定位实际上被看做普通流定位模型的一部分，因为元素的位置是相对于它在普通流的初始位置偏移的，但无论是否移动，元素仍然占据原来的空间，因此移动元素会导致它覆盖其他框。

浮动：

浮动的框可以左右移动，直到它的外边缘碰到包含框或者另一个浮动框的边缘。因为浮动框不在普通文档流中，所以普通文档流中的块框表现的就像浮动框不存在一样

实际上，浮动框并不是完全不影响不浮动的元素，如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得浮动根本不存在一样，但是，框的文本内容会受到浮动元素的影响，会移动以留出空间。用技术术语来说，浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框（实际上浮动的设计目的就是为了实现文字环绕效果）。

要想阻止行框围绕在浮动框的外边，就需要对包含这些行框的元素应用clear属性，clear属性的值可以使left，right，both，none，它表示框的哪些边不应该挨着浮动框。在清理元素时，浏览器在元素顶部添加足够的外边距，使元素的顶边缘垂直下降到浮动框的下面。

浮动元素脱离了文档流不影响周围的元素，但是对元素进行清理实际上为前面的浮动元素留出了垂直空间。

绝对定位：position：absolute ；

绝对定位使元素位置与文档流无关，它不占据空间，普通文档流中的其它元素的布局就像绝对定位的元素不存在一时样。如果扩大绝对定位的框（例如通过增加字号）周围的框不会被重新定位，因此尺寸的任何改变都有可能导致绝对定位的框产生重叠，从而破坏精心调整过的布局

绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素，如果不存在，那么相对于初始包含块。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素，可以通过z-index属性来控制这些框的叠放次序，z-index值越高，框在栈中的位置就越高。

                     固定定位：position：fixed；

            固定定位使绝对定位的一种，差异在于固定元素的包含块是浏览器视窗（viewport），这使我们能创建出总是出现在窗口相同位置的浮动元素

IE和盒模型

IE的早期版本包括IE6，在混杂模式中使用自己的非标准盒模型，这些浏览器的width属性不是内容的宽度，而是内容，内边距和边框的宽度总和。所以IE专有的盒模型使元素比预期的要小。

IE6不支持固定定位，IE7部分支持，有许多bug