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& ...
随机推荐
- poj-1469-COURSES-二分图匹配-匈牙利算法（模板）
题意:N个学生,P个课程,问能不能找到课程的P个匹配. 思路:[早上睡醒了再写] 代码: #include <iostream> #include <cstdio> #incl ...
- hihoCoder 1040 矩形判断（计算几何）
http://hihocoder.com/problemset/problem/1040 首先判断四条线段是否相交,给出八个点,如果有一些点重合,并且不同坐标的点只有4个的话,表示可以构成四边形. 然 ...
- [每天一道A+B]签到检测程序
签到检测程序,解析github提供的api内的json,解决了服务器和本地时间不同步的问题(时差+8H),实现按日期更新当前签到表.下一步是从api获取organization的信息,求出未签到的成员 ...
- oracle数据库导入导出命令！
Oracle数据导入导出imp/exp 功能:Oracle数据导入导出imp/exp就相当与oracle数据还原与备份. 大多情况都可以用Oracle数据导入导出完成数据的备份和还原(不会造成数据的丢 ...
- java线程安全理解
java线程安全理解 如果你的代码所在的进程中有多个线程在同时运行,而这些线程可能会同时运行这段代码.如果每次运行结果和单线程运行的结果是一样的,而且其他的变量的值也和预期的是一样的,就是线程安全的. ...
- LA 3644 X-Plosives
最简单的并查集 多做做水题,加深一下理解 //#define LOCAL #include <cstdio> + ; int parent[maxn]; int GetParent(int ...
- mongodb数据备份与还原
1)简单数据的导出与导入导出:./mongoexport -d test -c users -o /tmp/users.out 导入:./mongoimport -d test -c users /t ...
- django - raw sql - 注意点！
现在的自己已经不怕mysql,已经熟悉了sql “搜索优化专家有时候都无法顾全所有,更何况ORM” 两种方法执行 sql原生语句 tablename.objects.raw() - 这样的语句,只能执 ...
- （六）6.11 Neurons Networks implements of self-taught learning
在machine learning领域,更多的数据往往强于更优秀的算法,然而现实中的情况是一般人无法获取大量的已标注数据,这时候可以通过无监督方法获取大量的未标注数据,自学习( self-taught ...
- 【英语】Bingo口语笔记(41) - 有关爱情的表达