CSS中的auto

来源:互联网 发布:程序员 多屏幕 编辑:程序博客网 时间:2024/05/16 17:52
普通流:
水平
1、正常流中块级元素框的水平部分总和等于父元素的width。
父元素的width=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
2、这七个属性中,只有三个属性可以设置为auto:width,margin-left,margin-right,其余属性必须设置为特定的值,或者为默认宽度0,width的默认宽度为auto(尽可能的宽)
3、margin没设置默认为0,width没设置默认为auto
4、(1)当width没有设置或设置为auto:则若margin值为auto,则重置margin值为0,让width尽可能地大
(2)当width设置了一个确定的值:若两个margin值都为auto,则让两个margin值相等,并让元素居中
5、在这7个属性中,只有两个属性可以设置为负值:margin-left和margin-right。
6、在7个元素都设置了的时候,就叫做元素水平属性过分受限,此时会重置margin-right
7、根据第1和4、5条规则,在所有的属性的值之和大于父元素的时候,就会重置右外边距,使之为负值。
8、所有块级元素的规则,同样使用与替换元素,只有一个例外,如果width为auto,元素的宽度则为内容的固有宽度。而块级元素width为auto时,width会尽可能的宽。
9、如果width、内边距和外边距设置为百分数值,会应用同样的基本规则。值的声明是长度还是百分数并不重要。
10、width、内边距和外边距的百分数值都表示为其父元素的宽度百分数边框没有百分数值。

垂直(只写出与水平不同的点)
2(1)在元素中内边距或者是边框:height=auto时就是从其最高子元素的外边边界到最低子元素的外边边界之间的距离,CSS中的auto - jocelyn - 宁静
 
(2)在元素中没有内边距或者边框:其height=auto时就是从其最高子元素的最高块级子元素外边边界到其最低块级子元素外边边界的距离。CSS中的auto - jocelyn - 宁静
 
4、如果margin设置为auto,它会自动计算为0,又因为值为0,并没有把正常流元素在其包含块居中
9、如果该块元素<p>没有声明margin的值,虽然没有设置默认为0,但是这样margin属性的就没有特殊性,很有可能会应用浏览器的样式表中的规则,在块元素的上下方添加一行margin值,该行为该块元素的line-height值。只要有显示声明margin值,如auto(重置为0),就会覆盖用户代理的规则,从而margin为0。
10垂直上的内边距和外边距的百分数值也是表示为其父元素的宽度而不是高度边框同样没有百分数值
(1)块元素的父元素的height被声明为一个具体的值:height属性的百分数值就表示为父元素高度的百分数
(2)父元素的height没有被声明,或者声明为一个auto:那么浏览器就会忽略该块元素height属性的百分数值

绝对定位absolute:
水平
1、元素框从文档流中完全删除,并相对其包含块定位(包含块设置为最近的position值不是static的祖先元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。
2、元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
3、包含块的width=left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
(包含块的定义要看 《浮动和定位》篇,分块级祖先和行内祖先)
4、这九个属性中,有五个可以设置为auto:left+margin-left+width+margin-right+right
(1)width设置为auto时,该内容区的宽度恰好包含其内容,而没有多余空间
(2)左向右读的语言中,如果left的值为auto,要把auto替换为它未被定位前的位置。在从右向左的的语言中,则把right的auto值设置为静态位置。此时非静态位置属性(从左向右读语言是right,反之为left)若为auto,则要被适当设置,以保证余下距离。
(3)若left或者right为auto(不设置就默认为auto),则将margin的auto值(margin不设置默认为0)替换为0。
(4)其他三个值不为auto两个margin都为auto时,父元素的width已经被定义,则有两个margin相等,使元素居中的功能。
(5)在此之后,如果只剩下一个auto值,则将其修改使等式满足。
(6)当元素过分受限,都不为auto时,父元素的width已经被定义,会重置right的值。

垂直(只写出与水平不同的点)
(2)只有top的值为auto,才会替换为静态位置,bottom不会。
!!!!!!!!1!!与普通流不同,绝对定位元素的垂直轴和水平轴非常类似,也可以通过auto值设置元素垂直居中。只要显示知道父元素的height值。



0 0
原创粉丝点击