前段时间做项目，发现分不清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. c++课程实训 银行储蓄系统

    基本要求:定义了用户类(User)和银行类(Bank),用成员函数实现各种功能,多文件组织程序.能用文本文件存取数据(如演示样例中给出的技术): 拓展方向: 序号 加分项目 细       则 1 改 ...

  2. Windows编写bat执行文件

    1:建立TXT文件 Rem nping用来测试IP地址的连通性 Rem nping --tcp -p 80 --flags rst --ttl 2 192.168.1.1 date 2:重命名为bat ...

  3. Gmail POP3设置

    好几个同事在问我怎样使用ThunderBird和OE收取IT CHT的邮箱,因为IT CHT就是用Gmail的功能,因此收发邮件是跟Gmail一样,下面是Gmail的POP&SMTP的设置方法 ...

  4. CustomProgressBar

    https://github.com/eltld/CustomProgressBar-master

  5. 源码分析：静态分析 C 程序函数调用关系图

    http://www.tinylab.org/callgraph-draw-the-calltree-of-c-functions/

  6. cocos2d-x中CCCallFunc CCCallFuncN CCCallFuncND的区别和使用示例

    转自:http://xiandanboke.com.cn/cocos2d-xcccallfunc.html CCCallFunc CCCallFuncN CCCallFuncND的区别和使用 CCCa ...

  7. Oracle的trunc和dbms_random.value随机取n条数据

    今天在review项目代码的时候看到这样一个问题,有一张号码表,每次需要从这样表中随机取6个空闲的号码,也就是每次取出来的6个号码应该都会有所不同.然后我就看到了这样的SQL select   t.* ...

  8. Foundation学习笔记

    . 链接:Foundation学习,代码实例总结(pdf版) .

  9. docker镜像的操作

    在主机上列出镜像 sudo docker images 每从Docker Hub下载一个镜像就会启动相对的创建一个容器 在镜像列表中看到三个重要的东西: 来自什么镜像源,例如ubuntu 每个镜像都有 ...

  10. app 性能优化的那些事(二)

    来源:树下的老男孩 链接:http://www.jianshu.com/p/2a01e5e2141f 这次我们来说说iOS app中滑动的那些事.iOS为了提高滑动的流畅感,特意在滑动的时候将runl ...