—什么是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. MySQL · 引擎特性 · InnoDB IO子系统

    前言 InnoDB做为一款成熟的跨平台数据库引擎,其实现了一套高效易用的IO接口,包括同步异步IO,IO合并等.本文简单介绍一下其内部实现,主要的代码集中在os0file.cc这个文件中.本文的分析默 ...

  2. H3 BPM总部乔迁 开启新篇章 筑梦新征程

    近日,国际一流的BPM解决方案服务商H3 BPM总部迎来乔迁之喜,办公新址泰邦科技大厦位于国家火炬计划软件产业基地.国家高新技术产业标准化示范区.国家文化和科技融合示范基地的深圳高新技术产业园区,办公 ...

  3. Pascal's Triangle II leetcode

    Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Return [1,3, ...

  4. WeMall微信商城源码插件大转盘代码详情

    WeMall微信商城源码插件大转盘代码是用于商业推广的比较有效的方式,分享了部分比较重要的代码,供技术员学习参考 代码详情地址:http://addon.wemallshop.com/Product/ ...

  5. 深入理解java String 及intern

    一.字符串问题 字符串在我们平时的编码工作中其实用的非常多,并且用起来也比较简单,所以很少有人对其做特别深入的研究.倒是面试或者笔试的时候,往往会涉及比较深入和难度大一点的问题.我在招聘的时候也偶尔会 ...

  6. Maven项目搭建(一):Maven初体验

    今天给大家介绍一个项目管理和综合工具:Maven. Maven: maven读作 ['meivin],本意是指可以被信任的领域专家,致力于传播知识(来自于http://en.wikipedia.org ...

  7. JavaScript数据结构——队列的实现

    前面楼主简单介绍了JavaScript数据结构栈的实现,http://www.cnblogs.com/qq503665965/p/6537894.html,本次将介绍队列的实现. 队列是一种特殊的线性 ...

  8. 用javascript实现base64编码器

    前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...

  9. PHP语言开发微信公众平台(订阅号)之curl命令

    在开发过程中,经常会遇到要求用curl命令调用接口的情况 那么,什么是curl,简单来说curl是一个利用url语法规定来传输文件和哦数据的工具,支持很多协议,如 http.ftp.telent 等, ...

  10. ViewPager 滑动一半的判断方法以及左滑右滑判断

    做项目的时候,会碰到用viewpager + fragments去实现多页滑动.有些时候需要完成:界面在滑动到一半或是一半以上的时候,需要把title之类的切换到下一个页面.这个时候仅仅依赖Viewp ...