css中auto的用法

—什么是auto?

+auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算。

+块级元素中margin、border、padding以及content宽度之和构成父元素width。

使用auto属性后,父元素宽度发生变化,该元素的宽度也会随之变化。

下图中   auto 的值就是margin、border、padding以及content宽度之和

+但是当该元素被设为浮动时,该元素的width就变成了内容的宽度了,由内容撑开,也就是所谓的有了包裹性。

      overflow |   position:absolute | float:left/right都可以产生包裹性,替换元素也同样具有包裹性。

      *|position:relavtive|相对定位      占原来的位置,不能实现模式的转化,即不具有包裹性。

所以在具有包裹性的元素上不可以利用width : auto;来让元素宽度自适应浏览器宽。如下图所示

—有时设置margin:0 auto;不起作用?

+maigin: 0 auto; 指元素的上下边距为0,左右边距根据于父元素(body)宽度自适应,即左右水平居中。如果该设置不起作用大致下面两种原因。

+(1)没有为DIV设置宽度,如果DIV么有宽度,就无法参考父元素的宽度来进行自身的auto。

+(2)DIV具有包裹性,即脱离标准流,就好比父对象所在的标准流比喻成地表,那包裹性元素就已经上天了。没有了可供参考的父元素宽度进行auto。

—以上纯属个人见解,欢迎大神补充纠正!!

时间: 2024-12-29 01:28:39

css中auto的用法的相关文章

CSS学习笔记(9)--详解CSS中:nth-child的用法

详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#090} :nth-child(n

css中!important的用法总结

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

详解CSS中:nth-child的用法_大前端

http://www.daqianduan.com/3737.html 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#0

一个CSS中Z-index的用法

一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作. Z-index属性便属于上面所说的后面的那一组.Z-index无疑的比其他任何属性都会频繁的导致(兼容性)上 的混乱和(开发者心理上)的挫败感.但滑稽的是,一旦你真正理解了Z-index,你会发现它却是一个非常容易使用的属性,并且会为解决很多l

CSS中的EM 用法解释和分析

篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. 什么是弹性布局? 用户的文字大小与弹性布局 用户的浏览器默认渲染的文字大小是“16px”,换句话说,Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”.当然,如果用户愿意他可以改变这种字体大小的设置,用户可以通过UI控件来改变浏览器默认的字体大小. 弹性设计有一个关键地方Web页面

CSS中Position 的用法详解。

记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下. 一.语法: position:static | relative | absolute | fixed 取值: static :默认值,无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用,默认值. relative:相对定位,对象遵循正常文档流,但将依据t

css中的em用法

px:是相对于浏览器分辨率的一个度量单位 em是一个相对于父元素的font-size的大小的一个度量单位 1.浏览器的默认字体大小是16px 2.如果元素自身没有设置字体大小,那么元素自身上的所有属性值如“boder.width.height.padding.margin.line-height”等值,都是相对于父元素的font-size属性来计算的,公式为: 1 ÷ 父元素的font-size × 需要转换的像素值 = em值 3.如果元素设置了字体大小,那么元素的字体大小的转换依旧按第二条公

CSS中!important的用法

!important是CSS1就定义的语法,是用于提高指定样式规则的应用优先级.IE一直都不支持这个语法,而其他的浏览器都支持.因此,就可以利用它来分别给火狐浏览器和IE浏览器样式不同的定义. 举例: <html> <body> <span id="main">测试</span> </body> </html> 样式表: #main { width:100px!important; width:10px; bord

详解CSS中:nth-child的用法

下面我将用几个典型的实例来给大家讲解:nth-child的实际用途: Tips:还用低版本的IE浏览器的哥们请绕过! :nth-child(2)选取第几个标签,"2可以是你想要的数字" .demo01 li:nth-child(2){background:#090} :nth-child(n+4)选取大于等于4标签,"n"表示从整数,下同 .demo01 li:nth-child(n+4){background:#090} :nth-child(-n+4)选取小于等