—什么是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。

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

css中auto的用法的更多相关文章

  1. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

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

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  3. CSS中的背景用法详解

    background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...

  4. 详解CSS中:nth-child的用法

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...

  5. CSS中@support的用法

    这段时间一直在调试浏览器的兼容性问题,了解到了@support的这个属性,记录下: CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写 ...

  6. CSS中@support的用法 及其calc、media用法

    背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来, ...

  7. CSS中background的用法

    CSS中  background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...

  8. css 中 important 的用法

      css 中 important 的如何使用?  important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox), ...

  9. CSS中Position 的用法详解。

    记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...

随机推荐

  1. jQuery与CheckBox的值一致就选中

    var area = data.area;//area的形式是1,2,3, area = area.substring(1,area.length-1);//1,2,3 var arr = new A ...

  2. Android中使用Handler以及CountDownTimer实现包含倒计时的闪屏页面

    上一篇博文<Android中Handler使用浅析>通过实现倒计时闪屏页面的制作引出了Handler的使用方法以及实现原理,博文末尾也提到了实现过程中的Bug,有兴趣的朋友可以点击链接回去 ...

  3. Asp.net MVC 视图使用像Ajax,ViewBag提示为找到上下文

    不知是什么原因,所有的视图中Ajax,ViewBag之类的都提示为找到上下文(由于换了个版本Vs,猜测应该是Vs的原因),然后顺利在网上找到了解决方案. 给地址链接:https://social.ms ...

  4. 3377: [Usaco2004 Open]The Cow Lineup 奶牛序列

    3377: [Usaco2004 Open]The Cow Lineup 奶牛序列 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 16  Solved ...

  5. 算法模板——Tarjan强连通分量

    功能:输入一个N个点,M条单向边的有向图,求出此图全部的强连通分量 原理:tarjan算法(百度百科传送门),大致思想是时间戳与最近可追溯点 这个玩意不仅仅是求强连通分量那么简单,而且对于一个有环的有 ...

  6. webStorm Linux Ubuntu 中文搜狗输入问题

    1 打开安装路径下bin/webstorm.sh vim ~/WebStorm-145.597.6/bin/webstorm.sh 2.在打开文件的最前面加入如下代码: export XMODIFIE ...

  7. Oralce Plsql 中文显示乱码问题无需修改注册表完美解决

    此方法在其它版系统也可以解决 win10-64 plsql oracle 11g绿色版客户端 错误现象: 因为oracle用的是绿色版,无法设置注册表,尝试以下方法. 解决方法: 1.在plsql中查 ...

  8. 【Android】TextView跑马灯效果

    老规矩,先上图看效果. 说明 TextView的跑马灯效果也就是指当你只想让TextView单行显示,可是文本内容却又超过一行时,自动从左往右慢慢滑动显示的效果就叫跑马灯效果. 其实,TextView ...

  9. 路径正确下,Eclipse读取txt文件仍失败

    症状:使用Eclipse读取文件时,路径输入确认正确(前提!!!),但控制台总报错: 错误类型一: Exception in thread "main" java.io.FileN ...

  10. noip2008(最优贸易)

    C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双向通行的道 ...