—什么是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. Synchronize执行过程

    Synchronize执行过程及原理 在windows原生应用程序开发中,经常伴随多线程的使用,多线程开发很简单,难点就是在于线程的同步,在Delphi中提供了VC中不具备的一个过程Synchroni ...

  2. 从C#到TypeScript - Proxy

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  3. RunTime.getRuntime().exec()运行脚本命令介绍和阻塞

     java在企业级项目开发中,无论是强制性的功能需要,还是为了简便java的实现,需要调用服务器命令脚本来执行.在java中,RunTime.getRuntime().exec()就实现了这个功能.  ...

  4. .NET基础笔记(C#)

    闲着没事就把以前学习时的笔记拿出来整理了一下,个人感觉有点用,就想拿出来跟园友共享一下.有些基础性的内容比如基本概念.语法什么的就不发了. 内容:1.构造方法(函数) 2.继承   3.访问修饰符   ...

  5. 警惕!MySQL成数据勒索新目标

    据最新报道显示,继MongoDB和Elasticsearch之后,MySQL成为下个数据勒索目标,从2月12日凌晨开始,已有成百上千个开放在公网的MySQL数据库被劫持,删除了数据库中的存储数据,攻击 ...

  6. laravel初次学习总结及一些细节

    最近学习了laravel,先简单谈谈学习的感受吧 刚开始一周多一点的时间先把laravel的开发文档看了一遍,,感觉刚开始接触时的感觉laravel的目录与thinkphp又不一样,它们的渲染模板的方 ...

  7. 1036: [ZJOI2008]树的统计Count

    1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 7496  Solved: 3078[Submit] ...

  8. #MainTest

    '界面设计' --- <TextView android:layout_width="wrap_content" android:layout_height="wr ...

  9. Linux 修改时区 不用重启

    1.cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 2.使用tzselect命令,根据提示选择 3.使用date查看是否修改正确 4.运行hwc ...

  10. Yahoo前端优化十四条军规

    相信互联网已经越来越成为人们生活中不可或缺的一部分.Ajax,flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功能. 比如Google机会已经把最基本的office应 ...