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时就是从其最高子元素的外边距边界到最低子元素的外边距边界之间的距离,
(2)在元素中没有内边距或者边框:其height=auto时就是从其最高子元素的最高块级子元素外边框边界到其最低块级子元素外边框边界的距离。
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
- CSS中的auto
- CSS中的auto讲解
- CSS中的margin:auto失效原因
- 谈一谈css中的100%和auto
- css中auto属性
- css inhert、auto、 *
- css auto那些事
- CSS的inhert与auto
- CSS中auto的作用
- CSS的inherit与auto
- CSS的inherit与auto
- CSS margin:0 auto介绍
- C++中的auto
- hibernate中的hbm2ddl.auto
- hibernate 中的hibernate.hbm2ddl.auto
- C++11中的auto陷阱
- hibernate 中的hibernate.hbm2ddl.auto
- C++中的typeof与auto
- Android中Context详解 ---- 你所不知道的Context (转载)
- maven导出依赖的jar包
- 进程、线程、多线程相关总结
- 一步一步学习C++(类)之友元函数
- Java 反射基础
- CSS中的auto
- ios旋转
- 关于vs2013中不能输入中文的问题解决方法
- dropear 配置 sftp-server
- 第六周项目一(2):深复制体验
- 用salt管理一到上万台服务器
- HDU 5201 The Monkey King
- nyoj 546 Divideing Jewels
- 第六周程序阅读三