首页 > Web开发 > 详细

由css样式继承想到的

时间:2016-05-04 21:09:01      阅读:288      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!