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

HTML结构如下：

  1.     <body>
  2.         <div class="parent">
  3.             <div class="child">
  4.                 hello world
  5.             </div>
  6.         </div>
  7.     </body>

我想了很久没有想出来，后来请同事帮我一看。原来我的子盒子设了绝对定位，但父盒子没有设置相对定位。所以子盒子脱离了父盒子，导致子盒子的百分之百直接和body的宽度一致了。而子盒子虽然定位上脱离了文档流，但在节点树上他依然是父盒子的儿子，所以如果设置width：inherit的时候，浏览器会将父盒子的宽度赋值给他。

那么解决的办法有两种，一种是像我这样设置成width：inherit。这样的好处是节约代码，但有一点点小小的兼容问题。ie8以下的浏览器不支持inherit属性值。如果你们公司放弃IE8以下的兼容，那我觉得用inherit是很好的一种方式。

  1. .parent{
  2.     width: 300px;
  3.     height: 300px;
  4.     background: deeppink;
  5. }
  6. .child{
  7.     width: inherit;
  8.     position: absolute;
  9.     background: pink;
  10. }

第二种就是在父盒子上加上相对定位，这种方法的好处是兼容性比较好，缺点就是代码量稍微多了两句，而且要细心一些不能像我一样忘记加相对定位

  1. .parent{
  2.           width: 300px;
  3.           height: 300px;
  4.           background: deeppink;
  5.           position: relative;
  6.     }
  7. .child{
  8.           width: 100%;
  9.           position: absolute;
  10.           background: pink;
  11.     }

width:100%和width:inherit的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  8. CSS width：100%和width：auto的区别

    width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...

  9. width:100% 和 max-width:100%; 有区别吗【转藏】

    这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...

随机推荐

  1. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  2. PatentTips - Enhancing the usability of virtual machines

    BACKGROUND Virtualization technology enables a single host computer running a virtual machine monito ...

  3. Oracle 10g 10.2.0.1 在Oracle Linux 5.4 32Bit RAC安装手冊（一抹曦阳）

    Oracle 10g 10.2.0.1 在Oracle Linux 5.4 32Bit RAC安装手冊(一抹曦阳).pdf下载地址 ,step by step http://download.csdn ...

  4. 使用 Bluemix™ Live Sync 高速更新 Bluemix 上执行的应用程序实例

    假设您要构建 Node.js 应用程序,那么能够使用 IBM® Bluemix® Live Sync 高速更新 Bluemix 上的应用程序实例,并像在桌面上进行操作一样进行开发,而无需又一次部署.执 ...

  5. POJ 题目1145/UVA题目112 Tree Summing（二叉树遍历）

    Tree Summing Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8132   Accepted: 1949 Desc ...

  6. thinkphp内置标签简单讲解

    thinkphp内置标签简单讲解 1.volist循环 name 需要遍历的数据 id 类似于foreach中 value offset 截取数据起始位置 length 截取数据的个数 mod 奇偶数 ...

  7. try {}里有一个return语句 finally执行顺序

    先看例子 package example; class Demo{ public static void main(String args[]) { int x=1; System.out.print ...

  8. Python-根据成绩分析是否继续深造

    案例:该数据集的是一个关于每个学生成绩的数据集,接下来我们对该数据集进行分析,判断学生是否适合继续深造 数据集特征展示 GRE 成绩 (290 to 340) TOEFL 成绩(92 to 120) ...

  9. Android ViewPager嵌套ViewPager滑动冲突处理方法

    dispatchTouchEvent方法用于事件的分发,Android中所有的事件都必须经过这个方法的分发, 然后决定是自身消费当前事件还是继续往下分发给子控件处理.返回true表示不继续分发,事件没 ...

  10. Java 大数

    How Many Fibs? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...