css拾遗(一)(inline-block,absolute)

一:inline-block中不要嵌套其他block标签,不然会破坏布局
<style>
  .left{
    float:left;
  }
  .hide{
    display:none;
  }
  a{
    display:inline-block;
  }
  .item-div{
    display:inline-block; //此处为内联标签,其中包含了下面样式block块级标签,到鼠标滑动到.item-div时,块级标签会将原来布局撑开,使原来布局被破坏
  }
  item-div:hover item-set{
    display:block;
  }
</style>

<div class="hl-menu left"> <a href="" class-="item">菜单一</a> <a href="" class-="item">菜单二</a> <a href="" class-="item">菜单三</a> <div class="item-div"> <a href="" class="item">菜单四</a> <div class="item-set hide"> <a href="">菜单四-1</a> <a href="">菜单四-2</a> <a href="">菜单四-3</a> <a href="">菜单四-4</a> </div> </div> </div>

想到达的效果:

由于其中嵌套不正确:

解决方案:

使得悬浮的标签进行脱离文本流,则不会影响原来的布局:

        .item-div:hover .item-set{
            display: block;
            position: absolute;    //相对自己(body)进行页面排布,脱离文本流
        }

        .item-div .item-set a{
            display: block;
            background-color: #4cae4c;
        }

 注意同级内联标签中任意一个改变都会影响到其他标签的布局:

例如其中一个margin-top:10px;会将其他的也挤下来。解决办法是将该标签float设置,就不在影响同级标签

二:absolute实现后台页面布局:

使用position是元素脱离文本流,然后进行页面布局:

    <div class="pg-body">
        <div class="menus">

        </div>
        <div class="content">
            <div style="height: 2000px;">

            </div>
        </div>
    </div>

左侧布局:

        .pg-body .menus{
            width: 200px;
            background-color: #4cae4c;
            position: absolute;
            bottom: 0px;
            top: 48px;
        }

右侧布局:

        .pg-body .content{
            position: absolute;
            top: 48px;
            bottom: 0px;
            right: 0px;
            left: 200px;
            background-color: #1b6d85;
            overflow-y: scroll;
            overflow-x: hidden;
        }

 

posted @ 2018-04-15 19:38  山上有风景  阅读(386)  评论(0编辑  收藏  举报