前几天遇到过这么一个问题。我想让子盒子的宽度等于父盒子的宽度。父盒子宽度为一个具体值比如说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的更多相关文章

  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. 51Nod 迷宫问题（最短路+权值）（模板）

    你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间,你就可以得到这个分数.还有若干双向道路连结这些房间,你沿着这些道路从一个房间走到另外一个房间需要一些时间.游戏规定了 ...

  2. codeforces 688D

    题意: 给你n和k,表示有n个数,c1到cn,然后让你求一个数x,可以告诉你x%ci的值,问你是否可以唯一确定一个x%k的值 题解: 反证: 假设有两个x1,x2同时是解,则对于所有ci,x1%ci= ...

  3. 给Linux设置SSH登录邮件提醒

    给Linux设置SSH登录邮件提醒 心血来潮,用 last 命令查看了登录记录,不看不知道,一看就有问题.竟然有两个陌生的IP ,一个是美国欧莱雅的,一个是北京联通的.真是郁闷,密码简单了真不行 后来 ...

  4. screen-调节屏幕亮度

    今天做项目的时候,需要实现一个功能,就是进入一个应用,在这个应用中,屏幕的亮度变为最亮.关键代码如下 bt1.setOnClickListener(new OnClickListener() { @O ...

  5. java三元表达式编程规范问题

    package day01; public class Program { public static void main(String[] args) {        // TODO Auto-g ...

  6. ZOJ 2301 Color the Ball 线段树（区间更新+离散化）

    Color the Ball Time Limit: 2 Seconds      Memory Limit: 65536 KB There are infinite balls in a line ...

  7. mycat基本概念及读写分离一

    mycat基本概念及读写分离一 目录(?)[+] 安装与启动 mycat目录介绍 mycat三个最重要配置文件 验证读写分离 安装与启动 linux下可以下载Mycat-server-xxxxx.li ...

  8. Scala入门到精通——第二十二节 高级类型 （一）

    作者:摇摆少年梦 视频地址:http://www.xuetuwuyou.com/course/12 本节主要内容 this.type使用 类型投影 结构类型 复合类型 1. this.type使用 c ...

  9. 1.1 Introduction中 Kafka as a Messaging System官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Kafka as a Messaging System kafka作为一个消息系统 ...

  10. axios封装http请求

    import axios from 'axios' const HTTP_TIMEOUT = 15000; export function httpPost(url, params = {},head ...