css属性总结

高洛峰

发布时间：2017-02-15 13:30:31

1998人浏览过

来源于php中文网

原创

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

KGOGOMALL

主要功能：无限级分类，可自由调整分类位置，商品可在各分类间自由转移；商品组合：可以为每种商品添加多种选项，方便顾客购买选择，比如：一件衣服顾客可以选择款式、花色、大小等，笔记本电脑，可以有cpu、内存、显示屏、硬盘等等扩展属性；会员分级功能，会员积分功能。可根据会员积分自行设定用户组，管理员可自行定义会员获得积分的方式：按订单总金额或者按单个商品给予积分；按照商品类别查看热卖、特价，允

下载

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权威指南》