css属性总结

- 仅做用于块级元素的属性

width，height（这俩可用于替换元素）

text—align， text—indent， vertical—align（也可用于表单元格和替换元素如input/img）

background-position(注意百分数和绝对值的区别，同时这个属性会影响平铺效果)

---

［基本视觉格式化］

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有效值进行计算；
－ 若是一个替换元素是一个块级元素或表格单元格中的惟一后代，那么就会被放到基线上，例如div中的img。解决方法：使用负margin将其往下拉或者设置display为block来避免生成行框。

4. 其余

－ display属性：

* 设置元素display属性为inline-block时， 其表现相似行内替换元素；若是没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度恰好能包含全部内容且没有多余；
   * 设置元素display属性为run-in，表示若是该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，不然其自己将显示为块级元素。
   * 对于浮动或绝对定位元素，计算值与声明值可能不一样。除inline-table以外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。

---

［border、margin、padding］

1. margin
   － 若是使用百分数，则计算值是相对于父元素的width值（not height）而言。哪怕是margin-top也是！

2. border
   － 不指定的值会使用默认值, e.x.:

   { border: solid 1px dotted;
     border: 1px;
   }

   此处第二条border设置会覆盖第一条，因为在第二条中没有设置border-style，默认为none，因此将不会有border；

---

［浮动和定位］

浮动：

1. 浮动元素的margin不会合并；

2. 假设要使一个非替换元素浮动，须要为其指定一个width，不然会按浏览器规定的最小width浮动；

3. 浮动元素会生成一个块级框，而不论这个元素自己是什么；

4. 浮动元素的顶端不能比其父元素或以前全部浮动元素的顶端更高；

5. 当浮动元素与文档流中的元素重叠时：
   （1）若是是块级元素，则其内容会在浮动元素之上，而边框和背景则在之下；
   （2）若是是行内元素，则其内容、边框和背景都在浮动元素之上，即不会被覆盖。
   这与元素出如今文档流中的前后顺序无关。

6. 浮动元素必须包含其全部的浮动子元素；

7. 使用clear属性清除浮动时，例如clear: left，其实是为设置clear属性的元素增长margin-top。所以，有可能即便该元素设置了margin-top，也会与浮动元素牢牢相连，除非margin-top的值足够大。要使二者之间有间隔，能够设置浮动元素的margin-bottom。

   定位：

8. 绝对定位

   *若是父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
   *经过指定top, bottom, left, right的值，能够隐式指定元素的宽高；
   *除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
   *水平／垂直方向上，当元素过分受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。若是有设置为auto的属性，则改变其值来知足前等式，若是两个则平分，因此能够用来作居中（margin设为auto，其余值均为0）！
   *假设一个元素有设置z-index值，那么其全部子元素都是相对于这个叠放上下文来放置，而且css2.1中规定全部元素绝对不能放在其叠放上下文的背景之下，但能够在其内容之下；

9. 固定定位
   *right的值老是等于－left，bottom的值老是等于－top。

持续更新中。。。。。

本文参考 《css权威指南》