css属性总结
- 高洛峰原创
- 2017-02-15 13:30:311608浏览
- 仅作用于块级元素的属性
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有效值进行计算；
－ 如果一个替换元素是一个块级元素或表格单元格中的唯一后代，那么就会被放到基线上，例如p中的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］
margin
－ 如果使用百分数，则计算值是相对于父元素的width值（not height）而言。哪怕是margin-top也是！-
border
－ 不指定的值会使用默认值, e.x.:{ border: solid 1px dotted; border: 1px; }此处第二条border设置会覆盖第一条，由于在第二条中没有设置border-style，默认为none，所以将不会有border；
［浮动和定位］
浮动：
浮动元素的margin不会合并；
假设要使一个非替换元素浮动，需要为其指定一个width，否则会按浏览器规定的最小width浮动；
浮动元素会生成一个块级框，而不论这个元素本身是什么；
浮动元素的顶端不能比其父元素或之前所有浮动元素的顶端更高；
当浮动元素与文档流中的元素重叠时：
（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. 框模型：
－ 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属性：
* 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余； * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。 * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。
［border、margin、padding］
margin
－ 如果使用百分数，则计算值是相对于父元素的width值（not height）而言。哪怕是margin-top也是！-
border
－ 不指定的值会使用默认值, e.x.:{ border: solid 1px dotted; border: 1px; }此处第二条border设置会覆盖第一条，由于在第二条中没有设置border-style，默认为none，所以将不会有border；
［浮动和定位］
浮动：
浮动元素的margin不会合并；
假设要使一个非替换元素浮动，需要为其指定一个width，否则会按浏览器规定的最小width浮动；
浮动元素会生成一个块级框，而不论这个元素本身是什么；
浮动元素的顶端不能比其父元素或之前所有浮动元素的顶端更高；
当浮动元素与文档流中的元素重叠时：
（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中文网！