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="">菜单四-</a>

                    <a href="">菜单四-</a>

                    <a href="">菜单四-</a>

                    <a href="">菜单四-</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;

        }

巴特西

css拾遗（一）（inline-block,absolute）

最新文章

热门文章