css3(4)

边界传导问题


看一个简单的例子:
如下图所示:
body里面1个div,该div下面包含一个p标签,里面有文字。很简单。

Paste_Image.png

问题来了:里面子元素p,没有像代码设置的那样:margin 20px(相对div的),而是与div上边缘重合,与父元素div顶部紧贴一起距外层body40px。

原因如下:


### 因为作为p的父元素的div,没有外边界!

所以里面的子元素p,以为自己的margin是距离body(因为body有外边界),所以虽然p在div中,但p仍然是以为自己的父元素是body,
所以赶紧凑了过去,也就是造成了与div顶部紧贴的现象。

而且,如果p的margin设置为80px,那么div将和p一起紧贴,然后距body上边界80px。

Paste_Image.png

解决方案:


既然知道原因,那么解决的方案其实也就是给div一个边界:

(1)最简单的方法,给div一个border:1px solid red,问题解决,马上p找到自己的父元素,根据父元素的外边界和自己设定好的margin找到了自己的正确位置。
成功
(2)给p在div内找一个参照物再加入一个子元素,本例中加了一个span标签,因为有了span标签的,p根据span的位置,也找到了自己的位置。

但需要注意的就是:要加在p元素之前,否则还是找不到自己的位置,因为p的上面还是没有边界。

这样是不行的,span要放在p标签之上
成功
(3)div的overflow属性设置为hidden,其实也就是给了div一个明确的边界,所以设置后,p也可以找到自己的位置了。
成功

源码如下:


<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap</title>
    <meta charset="utf-8">
    <mata http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #box {
            height: 200px;
            width: 200px;
            margin: 40px;
            background-color: green;
            /*overflow: hidden;*/
            /*border: 1px solid red;*/
        }

        p {
            border: 1px solid red;
            /*display: block;*/
            height: 100px;
            width: 100px;
            margin: 20px auto;
            background-color: blue;
            font-size: 12px;
            text-align: center;
            vertical-align: middle;
        }
        span {

            font-size: 18px;
        }
    </style>
</head>
<body style="background-color:#ccc;border: 1px solid red;">
  <!-- <div class="container" style="padding:30px;background-color:#fff;"> -->
    <div id="con">
        <div id="box">
            <!-- haha -->
            <p>The</p>
            <span>test</span>
        </div>
    </div>
  <!-- </div> -->
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 972评论 0 2
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,191评论 2 19
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 965评论 0 1
  • 著名芭蕾舞蹈家在访谈中提到:比如你一个星期休息两天,但你如果超过两天不训练,第三天你就会觉得什么地方不对劲了。每天...
    李翊洺赫阅读 147评论 0 0