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的区别的更多相关文章

  1. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  2. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  3. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

  4. width:100%;与width:auto;的区别

    <div> <p>1111</p> </div> div{ width:980px; background-color: #ccc; height:30 ...

  5. css width="100" style ="width:100px" 区别

    1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...

  6. width:100%和width:auto区别

    在div父元素是body时 1.先看没有width限制的div <div style="border:1px solid red; margin-left:50px; margin-r ...

  7. width:100%和width:inherit

    前几天遇到过这么一个问题.我想让子盒子的宽度等于父盒子的宽度.父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%.按道理说应该是可以等于父盒子的宽度的,但结果并没有,而是通栏了.然后 ...

  8. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

  9. width:auto 和 width:100%有什么区别

    width:auto 和 width:100%有什么区别 宽度计算不同 <div class="parent"> <span class="child& ...

随机推荐

  1. leetcode:Insertion Sort List

    Sort a linked list using insertion sort. 分析:此题要求在链表上实现插入排序. 思路:插入排序是一种O(n^2)复杂度的算法,基本想法就是每次循环找到一个元素在 ...

  2. plsql programming 18 包

    所谓包, 就是把一组PL/SQL 的代码元素组织在一个命名空间下. 另外, 包的用法就类似java中的类.( 有封装, 有重载, 没有继承和多肽) create or replace procedur ...

  3. android 使用代码实现 RelativeLayout布局

    只需把代码copy进入oncreate方法即可运行 RelativeLayout rl = new RelativeLayout(this); Button btn1 = new Button(thi ...

  4. C# 类的访问修改符

    C#共有五种修饰符:public.private.protected.internal.protected internal. ◆public:公有,对所有类可见,不受任何限制 ◆protected: ...

  5. [转]微软联合CSDN英雄在线编程大赛

    2014 新年将至,微软联合CSDN英雄会共同举办本次第三届在线编程大赛,题目详情如下: 有一个字符串"iinbinbing",截取不同位置的字符‘b’.‘i’.‘n’.‘g’组合 ...

  6. core--线程调度

    线程的调度和我们用人是同一个道理,假如我们是公司的CEO,你的手下有7名大将,10名美女,100000名普通员工,现在你的任务是在1年内情切慰问完所有的员工.你将如何安排这个行程?先从那些人开始?从哪 ...

  7. Strongly connected 挺简单的tarjan

    题意:给你一个连通图,问你最多加多少条边,还能保证该图不是强连通图. 对整个图求强连通分量,然后对图缩点,记录一下缩点之后每隔点包含的原来的点的个数,找出最少的那个点,然后对这个点建成完全图,对另外的 ...

  8. BZOJ 1078 斜堆

    感谢MATO大神的博客 http://www.cppblog.com/MatoNo1/archive/2013/03/03/192131.html 注意细节. #include<iostream ...

  9. zipline

    history 多只股票时会返回某几只股票停牌没数据 if not symbol(stock) in data: 聚宽 多只股票如果某几只没有发行 600485: nan 多只股票如果某几只停牌 60 ...

  10. POJ2236 Wireless Network

    解题思路:简单并查集,注意时间限制是10000MS,每次进行O操作之后,   进行一次for循环,进行相关调整.同时注意输入输出格式,见代码: #include<cstdio> #incl ...