码迷,mamicode.com
首页 > Web开发 > 详细

由css样式继承想到的

时间:2016-05-04 21:09:28      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

  一个问题,怎么设置一个div盒子撑满整个屏幕?

<body>
    <div id="father-body">123
        <div class="item1">a</div>
    </div>

  这里有两个方法:

1.  

html,body,#father-body{
        height: 100%;
        background-color:#123456;
        border: 2px solid black;
}

.item1{
        border: 2px solid yellow;
        background-color: #654321;
}

  

  效果如下:

技术分享

2.

#father-body{
        position:fixed;
        width: 100%;
        height:100%;
        background-color:#123456;
        border: 2px solid black;
}

.item1{
        border: 2px solid yellow;
        background-color: #654321;
}

  

  效果如下:

技术分享

  

  在标准文档流里,子代选择器默认继承父选择器的样式,宽度默认100%继承,高度则默认根据元素自身而定;html/body/div默认占满一行,故增加height:100%即可;

  position:fixed/absolute使元素脱离标准文档流,#father-body设置width:100%,height:100%,#father-bod内的item1默认继承#father-body的样式(width:100%)。

由css样式继承想到的

标签:

原文地址:http://www.cnblogs.com/wangssf/p/5459564.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!