css中盒子宽高的auto
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的更多相关文章
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- css中的宽高以及百分比参照
百分比数参照物 父元素宽度:padding,margin,width,text-indent 父元素高度:height 自身:transform中的translate() 其他单位 vh ...
- canvas基础入门(一)canvas的width、height于css样式中的宽高区别
canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- 【IE6的疯狂之一】IE6中奇数宽高的BUG
IE6真是太疯狂了.今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还 ...
- CSS中不定宽块状元素的水平居中显示
CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- 如何设置html中img宽高相同-css
最近项目中有一个问题,做一个响应式的盒子,随着屏幕的变化, 宽高一直保持相等,之前一直使用js动态设置,获取盒子的宽度来设置盒子高度. 但是加载时样式显示不是很好,后来直接用css实现. html部分 ...
- CSS系列:CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...
随机推荐
- linux找回密码
开机启动系统,在进入系统之前按键盘上面的Esc键,会进入下面的界面 按键盘上的e键,出现下面界面 用键盘上的方向键移动光标到第二项,然后再按键盘上面的e,会出现下面的界面 输入一个空格键,然后在输入数 ...
- 我的android学习脚步----------- 的第一个应用
刚刚开始学android开发,以前都是在别人调好的应用中修改JNI,现在需要自己一步步走 开发环境:Eclipse+ADT 配置不多讲了,引自:http://www.cnblogs.com/allen ...
- audio,video标签
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- Blocks(闭包)
转自:http://my.oschina.net/joanfen/blog/317644?fromerr=ATWzC3Y2 Block 与传统代码相比较更加轻量,调用简洁方便,而且可以返回多个参数,使 ...
- 将自己apk打包进其他apk安装思路
把Apk 作为asset 资源编译进去,运行的时候释放出来再安装. dexclassloader加载. 动态加载. 把一个apk写成安装器,默认安装的话,需要root或者需要漏洞利用.
- Git 学习资源
在线教程 Try Git: Git初学者绝不能错过的Git上手资源. 廖雪峰Git教程: 比较系统的中文在线教程 易百Git教程 : 另一个比较全的中文在线教程 Git Immersion : A V ...
- PAT (Advanced Level) 1091. Acute Stroke (30)
BFS求连通块.递归会爆栈. #include<cstdio> #include<cstring> #include<cmath> #include<algo ...
- this.button1.Click += new System.EventHandler(this.button1_Click);
在这个程序里,这里的修改是为了更好理解,当然这种写法是语法错误的. 下面我们对其进行分析: 首先,观察“=”右面的表达式. new System.EventHandler(this.button1_C ...
- RAD Studio 2010 环境设置(转)
源:RAD Studio 2010 环境设置 最近在使用RAD Studio 2010做一些开发和实验,但在安装了自定义的控件及第三方下载的控件后,在我的工程里经常会提示找不到DCU,为了以后忘记这一 ...
- POJ 2482 Stars in Your Window
线段树+离散化+扫描线 AC之后,又认真读了一遍题目,好文章. #include<cstdio> #include<map> #include<algorithm> ...