CSS width：100%和width：auto的区别
width：100%和width：auto的区别
width:auto比较聪明，如果margin已经左右占去10px的空间，那么width给的值就是580px。
<style>
div{
width:600px;
overflow:auto;
background:#ccc;
} p{
width:auto;
margin:10px;
background:red;
}
</style>
</head>
<body> <div>
<p>123</p>
</div> </body>
</html>
如果是width:100%，则说明p的width会得到600px就已经充满div区域，然后自己又有margin，所以会出现滚动条。
div{
width:600px;
overflow:auto;
background:#ccc;
}
p{
width:100%;
margin:10px;
background:red;
}
</style>
</head>
<body>
<div>
<p>123</p>
</div>
都是以父元素的宽度为参照。
CSS width：100%和width：auto的区别的更多相关文章
- css height:100%和height:auto的区别
css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...
- CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别 一. 问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
- height:100%和height:auto的区别
一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...
- width:100%;与width:auto;的区别
<div> <p>1111</p> </div> div{ width:980px; background-color: #ccc; height:30 ...
- css width="100" style ="width:100px" 区别
1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...
- width:100%和width:auto区别
在div父元素是body时 1.先看没有width限制的div <div style="border:1px solid red; margin-left:50px; margin-r ...
- width:100%和width:inherit
前几天遇到过这么一个问题.我想让子盒子的宽度等于父盒子的宽度.父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%.按道理说应该是可以等于父盒子的宽度的,但结果并没有,而是通栏了.然后 ...
- css中width:auto和width:100%的区别是什么
width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...
- width:auto 和 width:100%有什么区别
width:auto 和 width:100%有什么区别 宽度计算不同 <div class="parent"> <span class="child& ...
随机推荐
- USACO Section 2.2: Party Lamps
这题有个小技巧, 按一个键两次等于没按,所以如果depsum > 16的话其实不用做深搜到depsum次,而只要16次就可以了. /* ID: yingzho1 LANG: C++ TASK: ...
- c#对文件进行MD5加密校验
public static string GetFileMd5Hash(string strFileFullPath) { // Create a new instance of the MD5Cry ...
- Lantern免费使用教程【转】
转自:http://www.mfbuluo.com/13710.html 自从谷歌去年退出中国后,可能是意识到中国市场的潜力,所说这款Lantern免费的软件,背后有谷歌的资助,这一点部落无法肯定. ...
- Docker —— 用于统一开发和部署的轻量级 Linux 容器【转】
转自:http://www.oschina.net/translate/docker-lightweight-linux-containers-consistent-development-and-d ...
- Java 字符串拼接方式
import java.util.ArrayList; import java.util.List; import org.apache.commons.lang.StringUtils; impor ...
- ccnu-线段树-简单的区间更新（三题）
题目一:http://poj.org/problem?id=3468 Description You have N integers, A1, A2, ... , AN. You need to de ...
- [HIHO1041]国庆出游（DFS, bitset）
题目链接:http://hihocoder.com/problemset/problem/1041 学会了用C++的bitset哈,可喜可贺.以后遇到超过64位想用位来表示状态就不愁了哈. 这题用bi ...
- [HDOJ5583]Kingdom of Black and White(暴力)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5583 一个01串,求修改一个位置,使得所有数均为0或1的子串长度的平方和最大.先分块,然后统计好原来的 ...
- 你其实真的不懂print("Hello,world")
http://www.jianshu.com/p/abb55919c453 debugPrint在发布的版本里也 会输出debugPrint只是更倾向于输出对象的调试信息.不管是开发环境还是测试环境都 ...
- matplotlib 中文问题
matplotlib的缺省配置文件中所使用的字体无法正确显示中文.为了让图表能正确显示中文,主要有三种设置中文的方法: (1)直接读取指定的字体文件.这种方法的依赖性最小,缺点是要指定字体文件的路径. ...