- 僅作用於區塊級元素的屬性
width，height（這兩個可用於替換元素）
text—align，text—indent，vertical—align（也可用於表單元格和替換元素如input /img）
background-position(注意百分數和絕對值的區別，同時這個屬性會影響平鋪效果)
［基本視覺格式化］
1. 框模型：
1. 框模型： background 、內邊距和邊框，外邊距通常是透明的，顯示父元素的背景；
2. 水平屬性：
－子元素的左（右）margin，左（右）padding，左（右）border與內容框width的值加起來必須等於父元素的內容框width；
－如果設定margin—left,margin-right,width（只有這三個值可以設定為auto）之中的兩個為特定值，剩下的為auto，則設定為auto的屬性值會自動計算以填滿父元素的width：
＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto； ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0； ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！
－ 父元素的padding會跟子元素的margin疊加；－非替換元素的預設寬度由其內容決定；為替換元素設定width為auto（如img），那麼其值將會是其本來的寬度；如果只設定width，那麼height會等比例變化，反之亦然。
3. 垂直屬性：
與水平屬性類似，不同點／注意點：
－ 如果將margin-top或margin-bottom設定為auto，則會被默認為0，因此不能垂直居中囧，除非以特定值顯示設定； － 使用百分數設定子元素height時，如果沒有顯示設定父元素的height值，那麼子元素height會預設為auto； － 如果父元素只包含子區塊級元素，那麼父元素的height將不包含子元素的margin，除非父元素有border或padding！ ！為什麼呢，因為垂直方向的margin會重疊。由此看來，要避免重疊，就需要使用border和padding來講相鄰margin隔開哦；
： － line-height（行框高度）對於替換元素而言，就是其內容替換元素而言，就是其內容的高度。因此替換元素無行間距（line-height － font-size）；對於非替換元素而言，是其內容框高度加上行間距; － 對於只包含文字的行，能改變其行間距的只有line -height, font-size, vertical-align。
非替換元素：－ 當line-height值小於font-size時可能會產生文字重疊，為避免此現象可設定line-height為1 em（需設定font-size）或1（根據font-size的縮放因子），此外它會繼承父元素的計算值而不是字面值，除非明確定義；－ 行內元素的內邊距、外邊距和邊框都不會影響行高。其中外邊距只有左右有效，上下無效；但如有正的內邊距且有背景，則有可能覆蓋鄰行（仍不影響行高和佈局，就是說設置了內邊距行高也不會變高）;
替換元素：
－ 行內元素的內邊距、外邊距和邊框會影響行高，且上下margin有效。 － 為img設定一個height值，會影響行高，但其line-height的有效值不會改變，有些屬性例如vertical-align仍然是使用line-height有效值進行計算； － 如果一個替換元素是一個區塊級元素或表格單元格中的唯一後代，那麼就會被放到基線上，例如p中的img。解決方法：使用負margin將其往下拉或設定display為block來避免產生行框。
4. 其他* 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余； * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。 * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。
［border、margin、padding］
而言。就算是margin-top也是！
{ border: solid 1px dotted;
border: 1px;
}［浮動和定位］
當浮動元素與文件流中的元素重疊時：
（1）如果是塊級元素，則其內容會在浮動元素之上，而邊框和背景則在之下；
（2）如果是行內元素，則其內容、邊框和背景都在浮動元素之上，即不會被覆蓋。
使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。
定位：
绝对定位
*如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
*通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
*除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
*水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
*假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；
固定定位
*right的值总是等于－left，bottom的值总是等于－top。
持续更新中。。。。。
本文参考 《css权威指南》
- 僅作用於區塊級元素的屬性
width，height（這兩個可用於替換元素）
text—align，text—indent，vertical—align（也可用於表單元格和替換元素如input /img）
background-position(注意百分數和絕對值的區別，同時這個屬性會影響平鋪效果)
［基本視覺格式化］
1. 框模型：
1. 框模型： background 、內邊距和邊框，外邊距通常是透明的，顯示父元素的背景；
2. 水平屬性：
－子元素的左（右）margin，左（右）padding，左（右）border與內容框width的值加起來必須等於父元素的內容框width；
－如果設定margin—left,margin-right,width（只有這三個值可以設定為auto）之中的兩個為特定值，剩下的為auto，則設定為auto的屬性值會自動計算以填滿父元素的width：
＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto； ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0； ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！
－ 父元素的padding會跟子元素的margin疊加；－非替換元素的預設寬度由其內容決定；為替換元素設定width為auto（如img），那麼其值將會是其本來的寬度；如果只設定width，那麼height會等比例變化，反之亦然。
3. 垂直屬性：
與水平屬性類似，不同點／注意點：
－ 如果將margin-top或margin-bottom設定為auto，則會被默認為0，因此不能垂直居中囧，除非以特定值顯示設定； － 使用百分數設定子元素height時，如果沒有顯示設定父元素的height值，那麼子元素height會預設為auto； － 如果父元素只包含子區塊級元素，那麼父元素的height將不包含子元素的margin，除非父元素有border或padding！ ！為什麼呢，因為垂直方向的margin會重疊。由此看來，要避免重疊，就需要使用border和padding來講相鄰margin隔開哦；
： － line-height（行框高度）對於替換元素而言，就是其內容替換元素而言，就是其內容的高度。因此替換元素無行間距（line-height － font-size）；對於非替換元素而言，是其內容框高度加上行間距; － 對於只包含文字的行，能改變其行間距的只有line -height, font-size, vertical-align。
非替換元素：－ 當line-height值小於font-size時可能會產生文字重疊，為避免此現象可設定line-height為1 em（需設定font-size）或1（根據font-size的縮放因子），此外它會繼承父元素的計算值而不是字面值，除非明確定義；－ 行內元素的內邊距、外邊距和邊框都不會影響行高。其中外邊距只有左右有效，上下無效；但如有正的內邊距且有背景，則有可能覆蓋鄰行（仍不影響行高和佈局，就是說設置了內邊距行高也不會變高）;
替換元素：
－ 行內元素的內邊距、外邊距和邊框會影響行高，且上下margin有效。 － 為img設定一個height值，會影響行高，但其line-height的有效值不會改變，有些屬性例如vertical-align仍然是使用line-height有效值進行計算； － 如果一個替換元素是一個區塊級元素或表格單元格中的唯一後代，那麼就會被放到基線上，例如p中的img。解決方法：使用負margin將其往下拉或設定display為block來避免產生行框。
4. 其他* 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余； * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。 * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。
［border、margin、padding］
而言。就算是margin-top也是！
{ border: solid 1px dotted;
border: 1px;
}［浮動和定位］
當浮動元素與文件流中的元素重疊時：
（1）如果是塊級元素，則其內容會在浮動元素之上，而邊框和背景則在之下；
（2）如果是行內元素，則其內容、邊框和背景都在浮動元素之上，即不會被覆蓋。
使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。
定位：
绝对定位
*如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
*通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
*除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
*水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
*假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；
固定定位
*right的值总是等于－left，bottom的值总是等于－top。
更多css属性总结 相关文章请关注PHP中文网！
