CSS盒模型中,auto属性只适用于外margin和width,height,border和padding不适用。下面就来说说它的情况。这里所说的都是标准流盒子。

  1.横向来说

    (1)若设置width,magrin-left,margin-right中某个值为auto,剩下两个为指定值,则设为auto的属性会确定所需的长度,从而使元素的宽度等于父元素的width。例如,盒的横向长度必须等于400px,没有设置padding和border,margin-right和width设置为100px,左外边距设置为auto,那么左外边距的宽度将是200像素。

    (2)若没有设置为auto的,以上例来说,左右外边距和width都设置为某个像素(格式化属性过分受限),此时总会把margin-right强制为auto;

    (3)不止一个auto时。若这三个属性左右外边距和width,中有两个设置为auto;

      若margin-right和margin-left设置为auto,则二者设置为相等的长度,因此元素在父元素中居中(这是将元素居中的一个方法,而text-align只应用于块级元素的内联内容,将它设置为center并不能将这个元素居中)

      若将某个外边距和width设置为auto,另一个外边距设置为指定像素,则设置为auto的外边距会减为0,width会设置为所需值;

      若三个都设置为auto,这种结果与默认结果相同,即外边距为0,宽度默认为auto;

  2. auto高度

    若正常流中的块元素的margin-top或margin-bottom设置为auto,它都会计算为0。

    若块级正常流元素设置为height:auto;

    (1)对于内联内容(包括文本),显示时其高度将恰好足以包含内联内容的行高。会在元素段落上设置一个边框,并认为没有padding,这样下边框刚好在文本最后一行的下面,上边框搞好在文本第一行上面;

    (2)若只有块级子元素,则其默认高度将从最高块级子元素的外边框边界到最低子元素的外边框边界之间距离。因此子元素的margin会“超出”包含子元素的元素;不过,若块级该元素(即父元素)有内边距或者边框,则其auto高度是从最高子元素的上外边界到最低子元素的下外边距边界之间距离;

css中盒子宽高的auto的更多相关文章

  1. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  2. css中的宽高以及百分比参照

    百分比数参照物    父元素宽度:padding,margin,width,text-indent 父元素高度:height 自身:transform中的translate() 其他单位     vh ...

  3. canvas基础入门(一)canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  4. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  5. 【IE6的疯狂之一】IE6中奇数宽高的BUG

    IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...

  6. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  7. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  8. 如何设置html中img宽高相同-css

    最近项目中有一个问题,做一个响应式的盒子,随着屏幕的变化, 宽高一直保持相等,之前一直使用js动态设置,获取盒子的宽度来设置盒子高度. 但是加载时样式显示不是很好,后来直接用css实现. html部分 ...

  9. CSS系列:CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

随机推荐

  1. 配置F5 负载均衡(转)

    转自<网络运维与管理>201406-11 配置F5交换机的问题在于,与平时所学的交换机.路由器思路完全不同,拿到设备后,完全不知如何下手. 网络拓扑图如下: 两台web服务器对外提供服务, ...

  2. css link import

    link和@import的区别   页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import.外部引用CSS两种方式 ...

  3. 检查本功能是否在Excel中运行

    BOOL g_bParentIsNotEXCEL_EXE = FALSE; BOOL isNotEXCEL_EXE( DWORD dwProcessID ) { HANDLE hProcessSnap ...

  4. RunTime 入门

    原文链接:http://www.jianshu.com/p/59992507f875 这是一篇浅显实用 易记 易理解的关于runtime的解读. Runtime 中的方法主要以五个单词开头——clas ...

  5. 4个特殊ping

    当你的网络出现故障或无法连通时,如何才能简单高效的找出故障?其实只需要一个ping命令,就可以判断TCP/IP协议故障…… 1.Ping 127.0.0.1: 127.0.0.1是本地循环地址,如果本 ...

  6. zencart的modules下数据库操作templates排版和common首页引用

    把这个学会,zencart的数据库操作,以及各种函数的调用基本会了 这个东西非常有用,你需要认真看一下,不要闲代码多. 如何在数据库中调出自己想要的产品,让它显示在首页. 据我本人不科学的理解,在in ...

  7. Python 100例(上)

    如果你已经把基础看完,可以尝试一下看看以下例子了,如果不会做也不要紧,你要尝试手动把所有的代码都敲一边.别嫌麻烦,因为都是从麻烦到简单的. 实例1: 题目:有1.2.3.4个数字,能组成多少个相互不同 ...

  8. Entity Framework Power Tools Beta 3

    http://visualstudiogallery.msdn.microsoft.com/72a60b14-1581-4b9b-89f2-846072eff19d/ PM> Install-P ...

  9. PAT (Advanced Level) 1011. World Cup Betting (20)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  10. (中等) CF 555E Case of Computer Network,双连通+树。

    Andrewid the Android is a galaxy-known detective. Now he is preparing a defense against a possible a ...