css权威指南（下）

第七章　　基本视觉格式化

正常流（没有浮动和定位元素）、非替换元素（包含在文档中）、替换元素（用作其它内容的占位符，如img）、块级元素（会和其它元素形成换行，如div）、行内元素（span之类的元素）和根元素（位于文档树顶端的元素，在HTML文档中就是元素html）

水平格式化

<p style="width:200px;">wideness?</p>　　/*200px指的是内容区的宽度*/

水平格式化七大属性：margin-left、border-left、padding-left、width、padding-right、border-right和margin-right，其中有3个属性可以设置为auto：元素内容的宽度width及左右外边距

如果设置width、margin-left或margin-right的某个值为auto，而余下两个属性指定为特定值，那么设置为auto的属性会自动确定所需长度，从而使元素框等于父元素的width

如果这3个属性都设置为特定值（值不合理，且过分受限），此时会把margin-right强制取为auto

某个外边距和width设置为auto，设置为auto的外边距会减为0

3个值都设置为auto，两个外边距都自动为0，width完全填充其包含块

外边距可以设置为负数（按反方向偏移）

如果width、内边距和外边距设置为百分数值，会应用同样的基本规则

替换元素，非替换元素的所有规则同样适用于替换元素，有一个例外：如果width为auto，元素的宽度则为内容的固有宽度，可以为width设置一个特定值覆盖这个规则，变化成比例调整

垂直格式化

垂直格式化七大属性：margin-top、border-top、padding-top、height、padding-bottom、border-bottom和margin-bottom，其中有3个属性可以设置为auto：元素内容的高度height及上下外边距。上下内边距和边框必须是特定的值或者0，如果将margin-top或margin-bottom设置为auto，它会自动计算为0，两个都为auto的话，都为0（没有外边距）

百分数高度，计算的是包含块height的百分数

如果将块级正常流元素设置为height：auto，显示时其高度将正好是包含其内联内容的行高，下边框是文本最后一行的下面，上边框是文本第一行的上面

合并垂直外边距：垂直相邻外边距的合并，这种行为只应用于外边距

对于负外边距，两个垂直外边距都为负值，取绝对值大的那个，若一个正一个负，正的要减去负值的绝对值

行内元素

span{border:1px dashed black;}

基本术语和概念

匿名文本：未包含在行内元素中的字符串；em框：font-size的值确定了em框的高度；内容区：元素中各字符的em框串在一起构成的框；行间距：font-size与line-height的值差除2；行内框：对于非替换元素，行内框高度等于line-height，对于替换元素，行内框高度等于内容区高度；行框：包含行内框的最高点和最低点

改变元素显示

display，none、inline、block、inline-block（行内块元素，像一个图像放在文本中，底端位于文本基线上）

run-in属性使某些块级元素成为下一个元素的行内部分

第八章　　内边距、边框和外边距

width、height、margin

border-style，none（无）、hidden（隐藏）、dotted（虚线）、dashed（较粗的虚线）、solid（实线）、double（双线）、outset（凸起按钮）

border-top-style、border-right-style、border-bottom-style、border-left-style

border-top-width、border-right-width、border-bottom-width、border-left-width，thin、medium(默认)、thick、<length>、inherit

border-top-color、border-right-color、border-bottom-color、border-left-color

简写border-top、border-right、border-bottom、border-left

h1{border-bottom:thick solid gray;}

padding-top、padding-right、padding-bottom、padding-left

第九章　　颜色和背景

background-color

background-image：a.grid{background-image:url(small.gif);}

background-repeat，repeat（垂直和水平方向都平铺）、repeat-x、repeat-y、no-repeat、inherit

background-image：body{background-image:url(small.gif);background-repeat:repeat-x;}

background-position，<percentage>、<length>、left、center、right

p{background-position:top right;}　　/*也可用百分数左上角为0%,0%，第一个数表示左右，第二个表示上下*/

background-attachment，scroll、fixed（相对于可视区是固定的）、inherit

汇总background

body{background:white url(yinyang.gif);}

第十章　　浮动和定位

float，left、right、none（初始值，阻止浮动）、inherit

浮动元素从文档的正常流中删除，其他内容会“环绕”该元素，浮动元素的包含块是其最近的块级祖先元素

将一个浮动元素的外边距设置为负值，这个浮动元素将超出最近块级父元素的限制

浮动元素、内容和重叠

行内框（strong）与浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示

块框（p元素也是块级元素）与浮动元素重叠时，其边框、背景都在该浮动元素“之下”显示，而内容在浮动元素“之上”显示

清除，元素设置为禁止浮动元素出现在它旁边，left、right、both、none（初始值）和inherit

h3{clear:left}　　/*防止h3左边出现浮动元素*/

定位

position属性，static（初始值，静止的）、relative（相对的，文档流中保存原来的位置）、absolute（绝对的，从文档流中完全删除）、fixed和inherit

偏移属性，top（到包含块顶端的距离）、right、bottom、left

限制宽度和高度

min-width、min-height、max-width、max-height为元素定义一个最小最大属性

内容溢出和剪裁

overfiow，visible（初始值，元素之外也可见）、hidden（隐藏）、scroll（滚动）、auto和inherit

元素可见性visibility，visible（初始值，可见）、hidden（隐藏，不可见）、collapse（折叠）和inherit

p.clear{visibility:hidden;}

绝对定位

元素绝对定位时，会从文档流中完全删除，然后相对于其包含块定位，其边界根据偏移属性（top、left等）放置，定位元素不会流入其他元素的内容

z-index，可以利用其来改变元素相互覆盖的顺序，z代表从前往后的轴，拥有较高z-index值的元素会覆盖拥有较低z-index值的元素