《高级web标准解决方案》里的小知识点

 

ID用于标识页面上的特定元素，必须是唯一的，也就是说只有绝对确定该元素非常独特，绝对不会在网页的其他地方使用这个名称时才用

div也是有语义的，代表部分（division）,最好只在没有现有元素能够实现区域分割的情况下才使用div

DTD文档类型定义，是一组机器可读的规则，解析网页时，浏览器根据这些规则检查页面的有效性和采取相应的措施，浏览器通过DOCTYPE声明分析需要用哪个DTD

对页面的有效性验证也需要DOCTYPE声明

DOCTYPE声明是否存在还影响浏览器选择文档的呈现模式（称之为DOCTYPE切换）

 

 

要想用CSS将样式应用于特定HTML元素就要找到这个元素，CSS中执行这一任务的样式规则部分就叫做选择器

常用选择器：

类型选择器 h1{...}  / 后代选择器 div h1{...}  / 类选择器 .aa{...}  /  ID选择器 #aa{...}

伪类选择器：链接伪类 :link :visited 只用于锚元素 / 动态伪类 :hover :active :focus 理论上可以用于所有元素 （伪类可以连接到一起使用 例如 a:visited:hover{...}）

通用选择器 *

高级选择器：(如果要兼容ie6或更低版本，在站点功能和布局很重要的元素上尽量避免使用)

1.子选择器 div>li{...} 只选择直接后代，而后代选择器包含了所有后代，例如嵌套在里面的那些

2.相邻同胞选择器 h2 + p{...} 同一个父元素下某元素的后一个元素

3.属性选择器 可以根据某属性是否存在或属性的值来寻找元素

层叠用于处理元素可能有CSS多个规则的冲突

层叠的重要度次序是：

 

然后再根据选择器的特殊性决定规则的次序，对于特殊性相同的规则，后定义的优先

选择器特殊性的四个成分等级：

 

继承而来的样式特殊性为空

 

开发阶段最好使用统一风格的大注释块分隔每个部分

书的47页提供了一些对代码压缩优化的建议 大型项目可以参考

 

盒模型

页面上每个元素都被看作是一个矩形框

 

为元素添加背景的话，背景会应用于内容和内边距

添加边框的话会在内边距外加一条线

外边距是透明的，一般用来控制元素之间的距离

 

普通文档流中块框：

两个或更多垂直外边距相遇时，会形成一个外边距 叫做外边距叠加

当一个元素包含在另一个元素中间时（没有内边距或边框将其分开时）也会发生外边距叠加

一个元素没有内边距或边框 上下外边距碰到一起也会发生叠加

行内框，浮动框，绝对定位框都不会发生叠加

可视化格式模型

css中有三种基本定位机制：普通流，浮动，绝对定位，没有指出的所有框都在普通流中

行内框可以用水平内边距，边框，外边距调整她们的水平间距，而行内框的高度只有设置行高才有用

 

可以把行内元素display属性设置为inline-block,就可以显式的设置元素的宽高垂直外内边距了

将一些文本添加到一个块级元素的开头时，这些元素会被当作块级元素对待，产生的框叫做匿名块框 无法直接对其设置样式 匿名行款同理

 

相对定位被看作普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置

绝对定位则使元素的位置与文档流无关，不占据空间，绝对定位元素的位置是相对于距离最近的那个已定位的祖先元素确定的。如果没有那么位置相对于初始包含块（画布或HTML）

固定定位是绝对定位的一种，差异在于固定元素的包含块是视口（viewport）

 

浮动会让元素脱离文档流，不再影响不浮动的元素，实际上，浮动元素后面有一个文档流中的元素，这个元素的框会表现得像浮动不存在一样，但是框中的文本内容会受到浮动元素的影响，会移动以留出空间

 

 

box-shadow:垂直偏移 水平偏移 投影宽度（模糊程度） 颜色

opacity:指定不透明度。从0.0（完全透明）到1.0（完全不透明）

IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)