width:100%和width:inherit
前几天遇到过这么一个问题。我想让子盒子的宽度等于父盒子的宽度。父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%。按道理说应该是可以等于父盒子的宽度的，但结果并没有，而是通栏了。然后我又将子盒子宽度设为了inherit。结果宽度就是父盒子的宽度了。
HTML结构如下：
<body>
<div class="parent">
<div class="child">
hello world
</div>
</div>
</body>
我想了很久没有想出来，后来请同事帮我一看。原来我的子盒子设了绝对定位，但父盒子没有设置相对定位。所以子盒子脱离了父盒子，导致子盒子的百分之百直接和body的宽度一致了。而子盒子虽然定位上脱离了文档流，但在节点树上他依然是父盒子的儿子，所以如果设置width：inherit的时候，浏览器会将父盒子的宽度赋值给他。
那么解决的办法有两种，一种是像我这样设置成width：inherit。这样的好处是节约代码，但有一点点小小的兼容问题。ie8以下的浏览器不支持inherit属性值。如果你们公司放弃IE8以下的兼容，那我觉得用inherit是很好的一种方式。
.parent{
width: 300px;
height: 300px;
background: deeppink;
}
.child{
width: inherit;
position: absolute;
background: pink;
}
第二种就是在父盒子上加上相对定位，这种方法的好处是兼容性比较好，缺点就是代码量稍微多了两句，而且要细心一些不能像我一样忘记加相对定位
.parent{
width: 300px;
height: 300px;
background: deeppink;
position: relative;
}
.child{
width: 100%;
position: absolute;
background: pink;
}
width:100%和width:inherit的更多相关文章
- CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别 一. 问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
- 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 ...
- 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& ...
- div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...
- CSS width：100%和width：auto的区别
width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...
- width:100% 和 max-width:100%; 有区别吗【转藏】
这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...
随机推荐
- vue 使用同一组件，切换时不触发created、mounted钩子
两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子. 方法一:通过watch $route的变化来做处理 watch: { $route() { ...
- BZOJ1814: Ural 1519 Formula 1(插头Dp)
Description Regardless of the fact, that Vologda could not get rights to hold the Winter Olympic gam ...
- flask使用第三方云通讯平台时，出现{'172001':'网络错误'}解决方法
问题描述:flask使用第三方云通讯平台时,出现{'172001':'网络错误'} 解决方法: 在sms.py文件中添加如下代码 import ssl # 取消证书验证ssl._create_defa ...
- Asp中JSON的使用
我对asp全然不懂,因为须要使用json的结构,就研究了一下asp的json的使用,拼接一个json的字符串. 測试用例中使用到了一个lib文件: Json_2.0.3.asp <% ' ' V ...
- 自绘listCtrl控件选中该行高亮（模拟windows）
CListCtrl的派生类CMyListCtrl的DrawItem()函数里添加代码 CDC *pDC = CDC::FromHandle(lpDrawItemStruct->hDC); if ...
- codevs 5960 信使
codevs 5960 信使 题目描述 Description 战争时期,前线有n个哨所,每个哨所可能会与其他若干个哨所之间有通信联系.信使负责在哨所之间传递信息,当然,这是要花费一定时间的(以天为单 ...
- 【AIM Tech Round 4 (Div. 2) A】Diversity
[链接]http://codeforces.com/contest/844/problem/A [题意] 大水题 [题解] 看看不同的个数num是不是小于k,小于k,看看len-num够不够补的 [错 ...
- OC文件操作、获取文件属性
#import <Foundation/Foundation.h> //获取文件的属性 int main(int argc, const char * argv[]) { @autorel ...
- Android Studio运行报错，Cannot find System Java Compiler. Ensure that you have installed a JDK......
详细报错信息如下 Error:Execution failed for task ':app:compileDebugJavaWithJavac'. > Cannot find System J ...
- a-star算法
http://blog.csdn.net/shanshanpt/article/details/8977512 这篇文章讲得不错. 所谓的启发函数,所谓权值之类(此处所谓的权值就是路劲的长度).YES ...