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. 转载 C++学习第9篇---类和类的封装

    http://blog.csdn.net/zuheyawen/article/details/7324340

  2. Android传感器编程带实例(转)

    源:http://www.cnblogs.com/xiaochao1234/p/3894751.html 看了程序人生 网站的 编程高手的编程感悟 深有感触,好像也是一个android 程序员写的,推 ...

  3. Binary Watch

    Binary Watch 描述 Consider a binary watch with 5 binary digits to display hours (00 - 23) and 6 binary ...

  4. ViewController 视图控制器

    [父视图控制器 addChildViewController:子视图控制器]; 在此,图控制器A添加了另一个图控制器B,那么A充当父视图控制器,B充当子视图控制器.父视图控制器充当了视图控制器容器的角 ...

  5. 关于源码编译每次提示有错误 要make update-api

    最近编译newline的版本的时候..同事修改了andoid默认输入法为百度.这是系统自动提供的API,所以每次编译会提示 此时在编译源码生成SDK的过程中会出现这个问题:************** ...

  6. iOS中4种判断网络请求的方式(系统状态栏、AFNetworking、Reachability、自定义)

    iOS 实时判断网络状态 方法一:利用系统状态栏判断网络状态 // 状态栏是由当前app控制的,首先获取当前app UIApplication *app = [UIApplication shared ...

  7. Persistent Bookcase

    Persistent Bookcase time limit per test 2 seconds memory limit per test 512 megabytes input standard ...

  8. 多年心愿,终于完成,热泪盈眶啊。。。Adrew NG 的 机器学习

    谢谢Andrew老师!谢谢Coursera!谢谢自己!希望这是一个好的开始!希望自己也能使用机器学习来make a better world...  

  9. python--字符串操作(删除,替换)

    示例: 替换字符串开头和结尾处的空格 1. [代码][Python]代码     跳至 [1] [全屏预览] view source print? 01 # -*- coding: utf-8 -*- ...

  10. LWIP_STM32_ENC28J60_NETCONN_TCP_SERVICER(5)

    前面说了TCP客户端通讯,这一篇来说说单片机作为服务器的通讯方法 tcp客户端和服务器的链接做大的不同在于服务器是不需要主动链接谁的,他只需要绑定在自己得一个特定的端口之上,等别人来连接就好了,先创建 ...