width为auto或者100%的区别
一、四个理论
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%的区别的更多相关文章
- width、height为auto或者100%的区别
一.规则 1. 某div不设置宽度,那么width默认为auto. 2. 某子元素div的width为100%(或者设置为等于父元素宽度的具体值,比如父元素width为100px,子元素width也设 ...
- CSS width：100%和width：auto的区别
width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...
- Html 之自动高度 auto 和 100%高度
HTML 高度 下面示例 设置为 Auto 和 100% <!DOCTYPE html> <html lang="en"> <head> < ...
- js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）
js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...
- width:100% 和 max-width:100%; 有区别吗【转藏】
这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...
- min-width:100%和max-width:100%的区别
1.width:100%和width:auto width:100%,设定对象的宽度占父元素的100%不论设定元素的margin值是多少,不包含margin: width:auto,根据设定对象的实际 ...
- jQuery中width、innerWidth、outerWidth的区别
原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...
- ztree 样式修改 white-space: nowrap; 后 下划线要是跟上的话 宽度 width 要 auto 就自动更新了
width:auto; border-bottom:1px solid #ccc; height:30px; display: inline-block;white-space: nowrap;
- background-size值为cover和值为100%的区别
background-size:100% 100%;---按容器比例撑满,图片变形: background-size:cover;---把背景图片放大到适合元素容器的尺寸,图片比例不变. IE8及以下 ...
随机推荐
- mysql5.6 online ddl—索引
尝试对mysiam表(1500万)删除索引失败 #uk表字段类型比较简单,都是int/tinyint/timestamp类型. CREATE TABLE `uk` ( `id` int(11) NO ...
- PHP下利用PHPMailer配合QQ邮箱下的域名邮箱发送邮件
作 为PHP入门开发者,常常有这种述求:自己的网站中需要添加一个使用自己的域名作为发件人邮件地址的自动发送邮件的方法,用于诸如给用户发送验证码.通知 信息等.比如:我的某个用户注册模块,需要使用reg ...
- xp添加右键"打开文件所在位置"
以下代码保存为czmb.vbs文件并放在C:\windwos目录下: Set OS = GetObject("winmgmts:\\.\root\cimv2")Set CF = O ...
- Oracle字符串操作[转:http://www.cnblogs.com/xd502djj/archive/2010/08/11/1797577.html]
ORACLE 字符串操作 1 字符串连接 SQL> select 'abc' || 'def' from dual; 'ABC'|------abcdef 2 小写SQL>select ...
- Ubuntu为已经安装的PHP7单独编译mysqli
编译安装PHP7后没有在ext中没有生成mysqli.so等文件,现在单独编译安装mysqli php7安装的位置:/usr/local/php7/ 我的扩展目录:/usr/local/php7/li ...
- jquery效果，多个div，点击任何一个div，那么这个div会切换文字，变换背景颜色，再次点击其他的div ,这个div会发生刚才的变化，之前点击的div的颜色会变回来
首先css样式: /*原来的背景色*/ .bg { background:'red' } /*需要切换的背景色*/ .bg_click { background:'green' } JS: $('di ...
- 多选出差同事id,拼接,去掉最后逗号
===========方法1 substr() ,永远都是.(第一个参数)开始位置.(第二个参数)截取个数 ,负数表示都后面开始数 substr($data['members'],0,strlen($ ...
- 取出parentid为null的顶级栏目 等号改为 is null 避免null当做字符串,
mysql中查询字段为null或者不为null 在mysql中,查询某字段为空时,不可用等号 = null, 而是 is null,不为空则是 is not null select * from ...
- C++primer 9.43
题目要求:编写一个函数,接受三个string参数s,oldVal和newVal.使用迭代器及insert和erase函数将s中所有oldVal替换为newVal.测试你的程序,用它替换通用的简写形式, ...
- LeetCode OJ 99. Recover Binary Search Tree
Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...