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)的更多相关文章
- CSS拾遗(二)
接CSS拾遗(一). 4. 不透明度 opacity: 0.8; filter: alpha(opacity=80); opacity: 0.8是标准的写法:filter: alpha(opacity ...
- 大话css之display的Block未解之谜(一)
用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...
- python day 22 CSS拾遗之箭头,目录,图标
目录 day 4 learn html 1. CSS拾遗之图标 2. html文件的目录结构 3. CSS拾遗之a包含标签 4. CSS拾遗之箭头画法 day 4 learn html 2019/11 ...
- css -- 通俗理解inline、block、inline-block
display:inline; 内联元素,简单来说就是在同一行显示. display:block; 块级元素,简单来说就是就是有换行,会换到第二行. display:inline-block; 就是在 ...
- css菜鸟学习之block,inline和inline-block概念和区别
block,inline和inline-block概念和区别 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) ...
- css盒子流动和block。inline
回忆一下盒子流动等概念! 1.盒子模型的宽度与高度,都是包括padding的值.(代码的理解如下:) 这样的结果的到就是 宽度和高度都是220了 2.流动型,在标签中存在块级元素和行内元素, 块级元 ...
- CSS包含块containing block详解
“包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解 在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称 ...
- css包含块containing block
<css权威指南>P167: The Containing Block Every element is laid out with respect to its containing b ...
- 我们常用,却容易忽视——CSS的BFC(Block formatting contexts)
BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素 效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w ...
随机推荐
- Security5:授予权限
SQL Server授予用户访问对象的权限,通常的模式是:Grants permissions on a securable to a principal(user or login),也就是说,授予 ...
- KNN算法的R语言实现
近邻分类 简言之,就是将未标记的案例归类为与它们最近相似的.带有标记的案例所在的类. 应用领域: 1.计算机视觉:包含字符和面部识别等 2.推荐系统:推荐受众喜欢电影.美食和娱乐等 3.基因工程:识别 ...
- 设计模式 笔记 组合模式 Composite
//---------------------------15/04/16---------------------------- //Composite 组合模式----对象结构型模式 /* 1:意 ...
- Win环境 Android Studio使用Git 教程 ( 生成SSH key )
Github和码云都提供SSH协议,即用户可以用公钥认证方式连接到码云的SSH服务器.这就需要生成并部署SSH Key.下面就是我生成SSH Key的步骤,希望有所帮助: Git生成SSH key 在 ...
- App推荐 | Google Tasks
前不久,Google推出了一款移动任务管理应用Google Task,在使用2天后,写一下使用感受,并与Google同类产品Keep进行一个对比. 首先欣赏几张官方的App截图 然后来看一下官方的介绍 ...
- LeetCode-51.N皇后
n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法. 给定一个整数 n,返回所有不同的 n 皇后问题的解决方案. 每一种解 ...
- 右键添加使用Sublime打开
网上教程大多是教你怎么改注册表,有点麻烦. 我根据教程改完之后导出来供大家使用,更方便快捷. Windows Registry Editor Version 5.00 [HKEY_CLASSES_RO ...
- 使用git进行代码的推送
首先是对于锐捷墙的问题,登陆github有时可以有时又连不上,网络又非常慢,所以用了十足的耐心才fork完了代码库.链接https://github.com/niconiconiconi/hellow ...
- ElasticSearch 2 (17) - 深入搜索系列之部分匹配
ElasticSearch 2 (17) - 深入搜索系列之部分匹配 摘要 到目前为止,我们介绍的所有查询都是基于完整术语的,为了匹配,最小的单元为单个术语,我们只能查找反向索引中存在的术语. 但是, ...
- 蜗牛慢慢爬 LeetCode 25. Reverse Nodes in k-Group [Difficulty: Hard]
题目 Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. ...