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. 关于Eclipse无法生成class文件的问题

    今天调试东西的时候发现怎么都无法build 遂用Eclipse里的clean功能 打算重新编译一下结果所有的class文件全部消失了 重新打包发包也不行 经过查找后得到方法:把properties属性 ...

  2. Fox And Two Dots

    B - Fox And Two Dots Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I6 ...

  3. STM32开发指南-蜂鸣器实验

    另一种I/O作为输出的应用,利用一个I/O来控制板载的有源蜂鸣器,实现蜂鸣器控制. PS:有源蜂鸣器自带了震荡电路,一通电就会发声:无源蜂鸣器则没有自带震荡电路,必须外部提供2~5Khz左右的方波驱动 ...

  4. angularJS在本机运行时的注意事项

    其实要讲的就只有一个,那就是给浏览器加上本地Ajax运行,当你使用到了某些angularJS的功能的时候,例如路由,你直接运行页面打开之后你会发现是空白的,打开控制台 发现 XMLHttpReques ...

  5. With PHP frameworks, why is the “route” concept used?

    http://programmers.stackexchange.com/questions/122190/with-php-frameworks-why-is-the-route-concept-u ...

  6. jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. awk简单用法

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  8. [iOS Animation]-CALayer 图层几何学

    图层几何学 不熟悉几何学的人就不要来这里了 --柏拉图学院入口的签名 在第二章里面,我们介绍了图层背后的图片,和一些控制图层坐标和旋转的属性.在这一章中,我们将要看一看图层内部是如何根据父图层和兄弟图 ...

  9. ICE BOX 配置,使用----第一篇

    一 理论部分 (1) 为什么要使用icebox? icebox server代替了通常的server. icebox是为了方便集中管理多个ice服务而建立的. 它通过使用icebox服务器,把ice服 ...

  10. 关于LCD以及BMP和RGB565

    源: 关于LCD以及BMP和RGB565