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中, ...
随机推荐
- 11、组合模式(Composite)
组合模式有时又叫部分-整体模式在处理类似树形结构的问题时比较方便,看看关系图: 直接来看代码: [java] view plaincopy public class TreeNode { privat ...
- 关于MyEclipse 半天打不开的问题(工作区间损坏)--转
删掉 {workspace}/.metadata/.plugins\**\*.snap 所有的 .snap文件 一般可以解决问题 如果上面一步解决不了问题, 那么删掉 {workspace}/.met ...
- oracle数据库兼容mysql的差异写法
1.sysdate改为sysdate(),或者now(); 2.nvl(expr1,expr2) 改为IFNULL(expr1,expr2) nvl2(expr1,expr2,expr3)改为 IF( ...
- push控制器 卡顿
代码: RecommendController *rec = [[RecommendController alloc]init]; [self.navigationController pushVie ...
- CentOS 单用户登录&命令行、图像界面
如何单用户登录: 这是一个很简单的问题,以前没重视,每次linux服务器无法正常启动时,都找应急盘,想偷懒,反而浪费了时间. 今天备忘如下: 1.系统启动时,按光标键调出GRUB引导菜单. 2.选定一 ...
- centos 安装FTP server详情(转)
centos 安装FTP server详情 分类: linux 2013-12-27 16:45 227人阅读 评论(0) 收藏 举报 我们这里以安装vsftpd 服务器端为例子: 1.进入到cent ...
- 极光推送集成——iOS10 接受消息问题及解决
iOS10升级后极光推送发生了很大的变化,要求Xcode更新到8.0及以上版本才可以实现iOS10接受消息的方法 常见错误 这个问题困扰了我一天,辛亏好友盼神帮我解决,在此再次感谢盼神.一下是解决办法 ...
- c# mouseenter mousemove区别?
onmousedown 当用户用任何鼠标按钮单击对象时触发. onmouseenter 当用户将鼠标指针移动到对象内时触发. onmouseleave 当用户将鼠标指针移出对象边界时触发. onmou ...
- 鼠标滚轮事件 onmousewheel
1.fiefox:DOMMouseScroll detail detail*(-40)=wheelDelta 除了firefox之外:mousewheel ...
- Hibernate-----关系映射 重点!!!
1. 关系, 指的是对象之间的关系, 并不是数据库之间的关系. 2. 简化问题: a) 怎么写annotation b) 增删改查CRUD怎么写 对象处于下列关系之一 (一对一, 一对多, 多对多)时 ...