一、四个理论

1. 某div不显示设置宽度，那么width为auto.

2. 某div的width在默认情况设置的是盒子模型中content的值

3. 某div的width为100%表示的是此div盒子内容部分的宽度为其父元素的宽度。

4. 某个div的width不设置，或者设置为auto,那么表示的这个div的所有部分（内容、边框、内边距等的距离加起来）为父元素宽度。

二、小注意点

1. 有些时候，设置了某个div的背景，但是看不到，有可能是高度为0，也有可能是宽度为0.

三、实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="../css/layout2.css">

</head>

<body>

    <div class="container">

        <div class="content1">

        </div>

        <div class="content2">

        </div>

    </div>

</body>

</html>
* {

    padding:;

    margin:;

}

.container {

    width: 100%;

    height: 1000px;

}

.content1{

    background: yellowgreen;

    width: auto;

    height: 100px;

    padding-left: 100px;

}

.content2 {

    background: gold;

    width: 100%;

    height: 100px;

    padding-left: 100px;

}

展示效果如下，绿色的div宽度刚好是整个浏览器宽度，黄色的div宽度却多了100px,原因就是width仅仅设置的为内容区域的宽度，左边多了100px，当然background设置的为整个div的背景色：

width为auto或者100%的区别的更多相关文章

  1. width、height为auto或者100%的区别

    一.规则 1. 某div不设置宽度,那么width默认为auto. 2. 某子元素div的width为100%(或者设置为等于父元素宽度的具体值,比如父元素width为100px,子元素width也设 ...

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

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

  3. Html 之自动高度 auto 和 100%高度

    HTML 高度 下面示例 设置为 Auto 和 100% <!DOCTYPE html> <html lang="en"> <head> < ...

  4. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  5. width:100% 和 max-width:100%; 有区别吗【转藏】

    这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...

  6. min-width:100%和max-width:100%的区别

    1.width:100%和width:auto width:100%,设定对象的宽度占父元素的100%不论设定元素的margin值是多少,不包含margin: width:auto,根据设定对象的实际 ...

  7. jQuery中width、innerWidth、outerWidth的区别

    原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...

  8. ztree 样式修改 white-space: nowrap; 后 下划线要是跟上的话 宽度 width 要 auto 就自动更新了

    width:auto; border-bottom:1px solid #ccc; height:30px; display: inline-block;white-space: nowrap;

  9. background-size值为cover和值为100%的区别

    background-size:100% 100%;---按容器比例撑满,图片变形: background-size:cover;---把背景图片放大到适合元素容器的尺寸,图片比例不变. IE8及以下 ...

随机推荐

  1. UI－－－－安健2 UIswitch UIslider

    - (void)viewDidLoad { [super viewDidLoad]; [self buttonswitch]; [self buttonslider]; } -(void)button ...

  2. linux命令英文缩写的含义（方便记忆）

    命令缩写: ls:list(列出目录内容) cd:Change Directory(改变目录) su:switch user 切换用户 rpm:redhat package manager 红帽子打包 ...

  3. Python基础（四）-集合

    补充: 数据类型分类: 1.按照数据可变不可变: 可变:列表.字典 不可变:数字.字符串.元组 x={':1} print(id(x)) x.update({':2}) print(x) print( ...

  4. asp.net URL DES加密 什在URL中的使用

    DES 加密 有时会有 + = 这些特殊字符串 Server.UrlDecode(Request["UserName"]) //能解决  = 号,但是 +号会变成空格 HttpUt ...

  5. 基于Flash ActionScript 实现RTMP发布与播放媒本流

    1  为什么要采用Flash ActionScript实现RTMP协议发布或播放媒体流,播放媒体流,协议可控,比如对流媒体数加密,混音等. 2 核心思路使用Flash Socket建立TCP二进制传输 ...

  6. lucene 简单搜索步骤

    1.创建IndexReader实例: Directory dir = FSDirectory.open(new File(indexDir)); IndexReader reader = Direct ...

  7. Apriori算法-数组-C语言

    原文地址:http://blog.csdn.net/liema2000/article/details/6118423 #include<stdio.h>typedef struct { ...

  8. C语言_用if```else语句解决奖金发放问题

    #include<stdio.h> #include<stdlib.h> /*企业发放的奖金根据利润提成,发放规则如下: 利润(I)低于或等于10万元时,奖金可提10%: 利润 ...

  9. 《JS权威指南学习总结--3.4null和undefined》

    内容要点 一.相似性  var a= undefined;       var b= null;       if(a==b){           alert("相等");   ...

  10. OpenCV中Mat的列向量归一化

    OpenCV中Mat的列向量归一化 http://blog.csdn.net/shaoxiaohu1/article/details/8287528 OpenCV中Mat的列向量归一化 标签: Ope ...