前段时间做项目，发现分不清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. ActionBar PopuMenu

    PopupMenu popupmenu可以非常方便得实现在指定view下弹出一个菜单,实现类似ActionBar中的效果. public void showPopupMenu(View view){ ...

  2. DELPHI下读取与设置系统时钟

    在DELPHI下读取与设置系统时钟 很多朋友都想在自己的程序中显示系统时间 这在DELPHI中十分容易 利用DateToStr(Date)及TimeToStr(Time)函数即可实现. 二者的函数原型 ...

  3. NuMicro Coretex™-M0家族中哪种芯片支持UID (Unique ID)? 用户该怎么做才能对其芯片进行加密功能？

    http://www.nuvoton.com/hq/chs/productfaqs/Pages/00000001.aspx 是的,使用者可利用UID来对以下系列芯片进行加密, Mini51 Serie ...

  4. Codeforces Round #311 (Div. 2) A. Ilya and Diplomas 水题

    A. Ilya and Diplomas Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/557/ ...

  5. Codeforces Round #307 (Div. 2) E. GukiZ and GukiZiana 分块

    E. GukiZ and GukiZiana Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/55 ...

  6. C++ Code_animateCtrl

      Code:: 播放     if (!m_animate1.Open("C:\\copy.avi"))     {         MessageBox("NULL& ...

  7. CSS定位规则之BFC 你居然一直不知道的东西！！！！！

    相关文档: http://blog.sina.com.cn/s/blog_877284510101jo5d.html http://www.cnblogs.com/dojo-lzz/p/3999013 ...

  8. 目标检測的图像特征提取之（一）HOG特征

    1.HOG特征: 方向梯度直方图(Histogram of Oriented Gradient, HOG)特征是一种在计算机视觉和图像处理中用来进行物体检測的特征描写叙述子.它通过计算和统计图像局部区 ...

  9. STM32F103定时器输出PWM波控制直流电机

    这个暑假没有回家,在学校准备九月份的电子设计竞赛.今天想给大家分享一下STM32高级定时器输出PWM波驱动直流电机的问题.. 要想用定时器输出的PWM控制直流电机,,首先要理解“通道”的概念..一个定 ...

  10. 【OC语法快览】四、基础内存管理

    Basic Memory Management                                                           基础内存管理 If you're w ...