一、四个理论

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. ClassLoader类加载解惑

    1.通过类加载器获取路径: String path = Thread.currentThread().getContextClassLoader().getResource("." ...

  2. Session和Cookie的使用总结

    Session和Cookie的使用总结: Session和cookie都是asp.Net中的内置对象,至于他们有什么区别,在这里就不在多说,现在来说说一些比较实用点的东西: 我们知道网站都有一个后台管 ...

  3. yii2 windows 安装

    Yii是一个高性能的,适用于开发WEB2.0应用的PHP框架. Yii自带了丰富的功能 ,包括MVC,DAO/ActiveRecord,I18N/L10N,缓存,身份验证和基于角色的访问控制,脚手架, ...

  4. json处理三部曲之第三曲:利用Gson处理json

    需要导入gson-xxx.jar包 <dependency> <groupId>com.google.code.gson</groupId> <artifac ...

  5. CGridCtrl在MFC中的使用(一)

    CGridCtrl控件是开源的,可在CodePlex和CodeProject上搜索找到,是VC++中用于显示表格数据的控件.基本功能包括:表格显示,单元格的编辑,单元格颜色设置,鼠标事件的响应,单元格 ...

  6. 基于KNN的相关内容推荐

    如果做网站的内容运营,相关内容推荐可以帮助用户更快地寻找和发现感兴趣的信息,从而提升网站内容浏览的流畅性,进而提升网站的价值转化.相关内容 推荐最常见的两块就是“关联推荐”和“相关内容推荐”,关联推荐 ...

  7. QTP如何连接/查询数据库

    在日常测试工作中经常会遇到有关于数据的测试,比如数据的正确性,完整性,测试人员造的测试数据预期与实际程序运行结果是否一致,如果这个时候数据量比较多的情况下,通过人工比对无疑是一项非常耗时,而且安全系数 ...

  8. 几个可用于数据挖掘和统计分析的java库

    http://itindex.net/blog/2015/01/09/1420751820000.html WEKA:WEKA是一个可用于数据挖掘任务的机器学习算法集合.该算法可以直接应用到数据集或从 ...

  9. LeetCode OJ 160. Intersection of Two Linked Lists

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  10. jax-rs的客户端完整实例

    本地接口: @Override    public Response formsubGet(String accountContent, char inputContent,            S ...