前段时间做项目，发现分不清width设为100%和auto的区别，实在是太水了，就查了点资料，做个总结，有不对的地方欢迎大家指出。

width：auto

块级元素默认的宽度值。看一下MDN上的解释：The browser will calculate and select a width for the specified element.大意是浏览器会自己选择一个合适的宽度值，那么怎么计算呢？
我的理解是：被包含元素的margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block。（1）
如果margin-left' + 'border-left-width' + 'padding-left' + 'padding-right' + 'border-right-width' + 'margin-right'比较大，就减小width的值，如果比较小呢，就增大width的值，使其满足（1）式。
下面看个demo验证一下：http://jsfiddle.net/guoheng/7mj05cns/  当增加子元素的margin可以直观的看到width在缩小，验证了我的看法。

width:100%

我的理解是，设置为100%之后，它的宽度就是父级的width，并且随着父级的width自动变化，增加子元素的padding和margin之后，它的width还是不变的，这是与设置为auto的区别。
可以看下这个demo验证：http://jsfiddle.net/guoheng/eo7L3fg7/ 可以看到给子元素添加padding或者margin之后会使子元素突破父级元素。
一般auto使用的多，因为这样灵活，而100%使用比较少，因为在增加padding或者margin的时候，容易使其突破父级框，破环布局。

参考

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

宽度的100%和auto的区别的更多相关文章

  1. CSS width：100%和width：auto的区别

    width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...

  2. width:100%;与width:auto;的区别

    <div> <p>1111</p> </div> div{ width:980px; background-color: #ccc; height:30 ...

  3. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

  4. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  5. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

  6. 微信小程序 设置宽度是100%，然后图片能成为正方形的方法。小程序按屏幕比例的正方形

    1.在全局app.js中获取设备的宽度 globalData: { userInfo: null, sysWidth:wx.getSystemInfoSync().windowWidth, //图片宽 ...

  7. 如何设置div的宽度为100%-xx px？

    如何设置div的宽度为100%-xx px? 参见如下帖子:http://stackoverflow.com/questions/15183069/div-width-100-10px-relativ ...

  8. 论decltype和auto的区别

    论decltype和auto的区别   decltype和auto的区别 ①对引用变量的不同之处:auto将引用变量赋给变量后,变量的类型为引用变量所对应的变量的类型.而decltype则是为引用类型 ...

  9. table-layout引起的探索——fixed和auto的区别

    问题:最近想把mui提供的底部导航组件样式单独抽出来,遇到一个问题:给底部图片下的文字设置了超出隐藏,但没有生效,如下图: 注:该底部导航为mui提供的组件 解决:这让我百思不得其解,经过一些琢磨后发 ...

随机推荐

  1. Notepad++配置Python运行环境

    转自:http://www.cnblogs.com/zhcncn/p/3969419.html Notepad++配置Python开发环境   1. 安装Python 1 下载 我选择了32位的2.7 ...

  2. WAF指纹探测及识别技术<freebuf>

    Web应用防护系统(也称:网站应用级入侵防御系统.英文:Web Application Firewall,简称: WAF).利用国际上公认的一种说法:Web应用防火墙是通过执行一系列针对HTTP/HT ...

  3. Python-面向对象 (二 继承)

    一 继承   基类定义例如以下: class people:     #define attribute     name = ''     age  = 0     #define private ...

  4. C# 二进制字节流查找函数IndexOf

    C# 二进制字节流查找函数IndexOf /// <summary> /// 报告指定的 System.Byte[] 在此实例中的第一个匹配项的索引. /// </summary&g ...

  5. 你应该知道的JavaScript中NaN的秘密

    NaN,不是一个数字,是一种特殊的值来代表不可表示的值,使用typeof或其他任何与之比较的处理方式,‘NaN’则会引起一些混乱, 一些操作会导致NaN值的产生.这里有些例子: Math.sqrt(- ...

  6. Codeforces Round #311 (Div. 2) C. Arthur and Table Multiset

    C. Arthur and Table Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/557/p ...

  7. workflow 工作流

    https://documentation.devexpress.com/#Xaf/CustomDocument3356

  8. JavaScript实现http地址自动检测并添加URL链接

    一.天生我材必有用 给http字符自动添加URL链接是比较常见的一项功能.举两个我最近常用到的自动检测http://地址并添加链接的例子吧,首先是QQ邮箱,在使用QQ邮箱时,如果输入了URL地址(ht ...

  9. 关于Android圆形图片的一种优化方案（可以显示网络图片）

    在Android App中,我们经常看到圆形头像图片,然后网上也有很多开源的控件.刚好这个项目用到了,也去找了一些开源的,发现并不完美,所以只好自己优化了,废话不多说,先上效果图: 下面是源码:本人能 ...

  10. mysql优化之连接优化(open-files-limit与table_open_cache）

    MySQL打开的文件描述符限制 Can't open file: '.\test\mytable.frm' (errno: 24) OS error code : Too many open file ...