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& ...
随机推荐
- pythonhttp
import urllib.requestimport http.cookiejar from urllib.error import URLError,HTTPError import urllib ...
- [HDOJ1043]Eight（康托展开 BFS 打表）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1043 八数码问题,因为固定了位置所以以目标位置开始搜索,把所有情况(相当于一个排列)都记录下来,用康托 ...
- 《OD学算法》排序之冒泡排序
冒泡排序 一语中的:丢一把沙子,轻的物体往上浮. 基本思想:通过无序区中相邻记录关键字间的比较和位置的交换,使关键字最小的记录如气泡一般逐渐往上“漂浮”直至“水面”. 代码示例: import jav ...
- 标准模板库(STL)学习探究之vector容器
标准模板库(STL)学习探究之vector容器 C++ Vectors vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector之所以被 ...
- poj1860Currency Exchange(bell_fordmoban)
http://poj.org/problem?id=1860 模板提 #include <iostream> #include<cstdio> #include<cstr ...
- CodeForces 378C Maze (DFS)
题目链接 题意:给一个由“.”组成的联通区域,求再添加k个‘#'以后还是联通区域的方案. 分析:做题的时候犯二了,用DFS,一直搜到边缘,然后从边缘依次往回 回溯,回溯的过程中填充’#‘ 一直填充k个 ...
- java.lang.NoSuchMethodError: org.springframework.beans.factory.annotation.InjectionMetadata.<init>(Ljava/lang/Class;)V
相应我,是因为你SPRING MVC的包没有加全.你可以新建一个WEB项目.加入SPRING 3.0 的所有包.主要是WEB类的.就可以解决这个问题了.关键就是少包.特别是你的项目原来是SRPING ...
- js之dom_1
DOM ie中有dom对象都是com对象的形式实现的 操作dom时,要注意返回的节点列表.属性列表都是动态的,会随着操作的改变而实时改变 document.getElementByI ...
- android studio sqlite操作代码片段
SQLiteDatabase db;Cursor cur; SimpleCursorAdapter adapter; // 打开或创建数据库db = openOrCreateDatabase(DB ...
- UVa 11090 Going in Cycle!!【Bellman_Ford】
题意:给出n个点m条边的加权有向图,求平均值最小的回路 自己想的是用DFS找环(真是too young),在比较找到各个环的平均权值,可是代码实现不了,觉得又不太对 后来看书= =好巧妙的办法, 使用 ...