前段时间做项目，发现分不清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. js 基于函数伪造的方式实现继承

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 69道java Spring面试题和答案

    http://www.jfox.info/69-dao-java-spring-mian-shi-ti-he-da-an 目录 Spring 概述 依赖注入 Spring beans Spring注解 ...

  3. mvc web api 保存多个实体类的方法

    先说一下我的业务需求,挺简单的. 就是在设计角色和权限的页面中,需要一个角色对应多条权限记录,那么在保存的时候,我的处理方式是,先删除该角色的所有权限,然后再保存所有的权限. 这样的话问题就来了,用默 ...

  4. 20 个用于处理页面滚动效果的 jQuery 插件

    对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...

  5. java 验证码图片处理类，为验证码识别做准备

    /* * To change this template, choose Tools | Templates * and open the template in the editor. */pack ...

  6. /proc/sys/vm/ 内存参数

    linux下proc里关于磁盘性能的参数 http://blog.csdn.net/eroswang/article/details/6126646  我们在磁盘写操作持续繁忙的服务器上曾经碰到一个特 ...

  7. 获取div相对文档的位置

    获取div相对文档的位置,两个方法 经测试 document.getElementById("btn").getBoundingClientRect() 在IE6下有2像素的bug ...

  8. 信号之signal函数

    UNIX系统的信号机制最简单的接口是signal函数.signal函数的功能:为指定的信号安装一个新的信号处理函数. #include <signal.h> void (*signal(i ...

  9. Ubuntu上手动安装nginx

    最近需要利用nginx上搭建一个网站,因此在自己的电脑上安装了nginx,现在分享一下自己在安装过程及遇到的问题. 1.下载需要的nginx版本的安装包. axel -n http://nginx.o ...

  10. Python练习题 028：求3*3矩阵对角线数字之和

    [Python练习题 028] 求一个3*3矩阵对角线元素之和 ----------------------------------------------------- 这题解倒是解出来了,但总觉得 ...