一: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)的更多相关文章

  1. CSS拾遗(二)

    接CSS拾遗(一). 4. 不透明度 opacity: 0.8; filter: alpha(opacity=80); opacity: 0.8是标准的写法:filter: alpha(opacity ...

  2. 大话css之display的Block未解之谜(一)

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

  3. python day 22 CSS拾遗之箭头,目录,图标

    目录 day 4 learn html 1. CSS拾遗之图标 2. html文件的目录结构 3. CSS拾遗之a包含标签 4. CSS拾遗之箭头画法 day 4 learn html 2019/11 ...

  4. css -- 通俗理解inline、block、inline-block

    display:inline; 内联元素,简单来说就是在同一行显示. display:block; 块级元素,简单来说就是就是有换行,会换到第二行. display:inline-block; 就是在 ...

  5. css菜鸟学习之block,inline和inline-block概念和区别

    block,inline和inline-block概念和区别   总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) ...

  6. css盒子流动和block。inline

    回忆一下盒子流动等概念! 1.盒子模型的宽度与高度,都是包括padding的值.(代码的理解如下:) 这样的结果的到就是  宽度和高度都是220了 2.流动型,在标签中存在块级元素和行内元素, 块级元 ...

  7. CSS包含块containing block详解

    “包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称 ...

  8. css包含块containing block

    <css权威指南>P167: The Containing Block Every element is laid out with respect to its containing b ...

  9. 我们常用,却容易忽视——CSS的BFC(Block formatting contexts)

    BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w ...

随机推荐

  1. 如何控制iOS的导航栏和状态栏的样式

    这是一个很常用的开发场景,就是改变导航栏上的文字颜色与背景色,如果你曾有 windows form 开发经验一定会笑我:"卧槽,这有什么好写的,不就是设置两个属性就可以了吗?" 我 ...

  2. Sterling B2B Integrator与SAP交互 - 01 简介

    公司近期实施上线了SAP系统,由于在和客户的数据交互中采用了较多的EDI数据交换,且多数客户所采用的EDI数据并不太相同(CSV,XML,X12,WebService),所以在EDI架构上选择了IBM ...

  3. 【Android UI设计与开发】第02期:引导界面(二)使用ViewPager实现欢迎引导页面

    本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗? 最下方有源码的下载 ...

  4. SpringBoot日记——信息修改PUT篇

    我们常用的功能,除了post和get,还有put和delete,这篇文章就介绍一下这个put的基本用法. 页面跳转和回显 1. 首先,我们之前的页面已经将添加和修改的按钮都做好了,那么如何实现这些按钮 ...

  5. 云服务器+tomcat+mysql+web项目搭建部署

    云服务器+tomcat+mysql+web项目搭建部署 1.老样子,开头墨迹两句. 作为我的第二篇文章,有很多感慨,第一篇人气好低啊,有点小丧气,不过相信我还是经验少,分享的都是浅显的,所以大家可能不 ...

  6. Fabric Dev开发调试模式的搭建过程

    在利用Fabric开发Chaincode的时候,调试Chaincode显得尤为不方便,因为Chaincode正常应该运行在Docker容器中,每次修改Chaincode后想要使其更改生效必须得对Cha ...

  7. Vigenere加密

    Vigenere加密法原理很简单,实现起来也不难.与普通的单码加密法不同,明文经过加密之后,每个字母出现的频率就不会有高峰和低峰. 密钥中字母代表行和明文中的字母代表行.在vigenere表中找到对应 ...

  8. 如何解决python连接数据库编码问题(python传数据到mysql乱码)'ascii' codec can't encode _mysql_exceptions.OperationalError: (1366, "Incorrect string value:?

    首先描述下问题:  在使用python计算出结果后将结果插入到mysql过程中,报如下错误.原因很好定位就是编码的问题.那么到底是编码哪里出了问题了呢? 报错如上: 排查顺序: 第一:python的编 ...

  9. PAT甲题题解-1106. Lowest Price in Supply Chain (25)-(dfs计算树的最小层数)

    统计树的最小层数以及位于该层数上的叶子节点个数即可. 代码里建树我用了邻接链表的存储方式——链式前向星,不了解的可以参考,非常好用: http://www.cnblogs.com/chenxiwenr ...

  10. Notes of Daily Scrum Meeting(12.20)

    今天是周六,大家空余的时间还是挺多的,也都主动完成了当天工作,最后由于我的失误,在晚上12点 之前没有把进度签入进TFS里面,所以周六的燃尽图是错误的,我把进度加进周日,总的进度会在周日的燃尽 图里面 ...