css定位小结（二级列表的实现）

原创 已于 2022-07-11 09:50:42 修改 · 429 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html

于 2022-07-08 21:35:38 首次发布
本文详细介绍了CSS中的块级元素居中方法，包括相对定位与绝对定位的组合使用，以及文本和块元素的居中策略。还探讨了margin的父子传递问题及其解决方案，如设置BFC。此外，文章展示了如何利用CSS实现二级列表的显示与隐藏效果，以及在鼠标悬停时的交互变化。最后，提供了一个实际的二级导航菜单的代码示例，详细说明了二级列表的显示逻辑和样式调整。

css定位小结（二级列表的实现）

1.块级元素居中

  • . 方法一
	.wrapper{
		width: 300px;
		height: 300px;
		background-color: red;
		/*相对定位*/
		position: relative;		   
	}
	.box{
		width: 100px;
		height: 100px;
		background-color: blue;
		/*绝对定位*/
		position: absolute;
		/*子元素垂直水平居中于父元素*/
		left: 50%;
		top:50%;
		margin-left: -50px;
		margin-top: -50px; 
					
				}
  • 方法二
		.wrapper{
   			width: 300px;
   			height: 300px;
   			background-color: red;
   			position: relative;
   		   
   		}
   		.box{
   			width: 100px;
   			height: 100px;
   			background-color: blue;
   			position: absolute;			
   			left: 0;
   			right: 0;
   			bottom: 0;
   			top: 0;
   			margin: auto;

   <div class="wrapper">
   			<div class="box"></div>
   </div>

效果图
在这里插入图片描述

  • 总结
    1，文本居中：
       水平text-align
        垂直line-height
    2、块元素居中：（建议使用）
       水平居中margin: 0 auto；
       垂直居中:父元素相对定位，子元素绝对定位
             left: 50%;
             top:50%;
            margin-left: -50px;（图片宽度一半）
            margin-top: -50px; （图片长度一半）
    3、 绝对定位的元素会脱离标准文档流，父级塌陷，解决办法是给父级加高度

margin父子相传问题

  • 问题
		.wrapper{
			width: 300px;
			height: 300px;
			background-color: red;
			}
		.box{
			width: 100px;
			height: 100px;
			background-color: blue;
				/* 父子传递:当子元素与父元素上边框重合时，
				        子元素margin-top值将传递给父元素 
				*/
			margin-top: 100px;
			}

		<div class="wrapper">
			<div class="box"></div>
		</div>

在这里插入图片描述

（按照正常逻辑应该是里面的小块相对于它的父元素向下移动100px,但是事实并不是这样，父元素和子元素一起向下移动，这就是margin父子相传问题。）

  • 解决方法
    .wrapper{
   			width: 300px;
   			height: 300px;
   			background-color: red;
   		
   		
   		   /* 1、加border */
   		    border: 1px solid black; 
   		   /* 2、padding */
   		   /* padding:10px; */
   		   /* 3、BFC */
   		   /* display: inline-block; */
   		      /* overflow: hidden; */
   		   /* float: left; */
   		   /* position: absolute;*/
   		   
   		}
   		.box{
   			width: 100px;
   			height: 100px;
   			background-color: blue;
   			/* 父子传递:当子元素与父元素上边框重合时，
   			        子元素margin-top值将传递给父元素 
   			*/
   			margin-top: 100px;
   		}

margin父子传递解决方法：
     1、给父元素加border(见代码注释1)
     2、父级设padding((见代码注释1)
     3、块级BFC((见代码注释1)

显示与隐藏

			/*  display:原位置不会占用
				visibility:原位置会继续保留，类似relative
				
			 */

			.first {
				width: 300px;
				height: 300px;
				background-color: aqua;
				display: none;
			}
			.second{
				width: 300px;
				height: 300px;
				background-color: skyblue;
				visibility: hidden;
			}
			.wrapper div:nth-of-type(1) a:hover+.first {
				display: block;
			}
			
			.wrapper div:nth-of-type(2) a:hover+.second{
				visibility: visible;
			}

		<div class="wrapper">
			<div>
				<a href="">显示与隐藏</a>
				<div class="first"> </div>
				<p>1111111111</p>
			</div>
			<div><a href="">显示与隐藏</a>
				<div class="second"> </div>
				<p>22222222222222</p>
			</div>
		</div>


点击顶部显示与隐藏，其下方的元素会被挤下去（display:none）。

在这里插入图片描述
点击下方的显示与隐藏原本下方的元素不会被挤下(visility:hidden)。

  • 总结
      显示与隐藏是否会将下方的元素挤下去取决于我们是使用display:none;还是使用visibility:hedden;,当我们使用display:none;时下方元素会紧贴着上方的“显示与隐藏”，当悬浮时会将隐藏的元素显现出来并将下边的元素挤下去，由此可见，display:none隐藏的元素并不占位置空间，而使用visility:hidden;隐藏元素时下方的元素并不会紧贴着下方的“隐藏与显示”，悬浮将隐藏的元素显现时只是在下方空白区将元素显现，由此可见，visibility:hidden:仅仅只是将元素隐藏。

二级列表的实现

   			/****列表整体样式*********/
			.wrapper{
				width: 100%;
				
				background-color: black;
				height: 38px;
			}
			/*********ul（一级列表）相对于wrapper居中*************/
			.nav{
				width: 500px;
				margin: 0 auto;
			}
			/***.nav的子代li****/
			.nav>li{
				float: left;
			}
			/***.nav的后代li****/
			.nav li{
				width: 100px;
				height: 38px ;
				line-height: 38px;
				text-align: center;
			}
			.nav li a{
				color: white;
			}
			/*******二级列表默认隐藏**************/
			.nav .subnav{
				display: none;
				background-color: black;
			}
			/*******鼠标悬浮一级li时二级列表出现***********/
			.nav>li:hover .subnav{
				display: block;
			}
			/****鼠标悬浮改变所有后代li的背景颜色*******/
			.nav li:hover{
				background-color: mediumpurple;
			}
			/****鼠标悬浮改变所有后代li的中a的字体颜色*******/
			/***由于a标签不可以继承父元素属性不可再父元素li中设置颜****/
			.nav li:hover a{
				color: gray;
			}
		/*********调节鼠标悬浮二级列表的字体颜色***************/
			.nav>li:hover .subnav a{
				color:white;
			}
			.nav .subnav li:hover a{
				color: grey;
			}
			

	<div class="wrapper">
			<ul class="nav">
				<li>
					<a href="">星期一</a>
					<ul class="subnav clearfix">
						<li><a href="">三点</a></li>
						<li><a href="">六点</a></li>
						<li><a href="">九点</a></li>
						<li><a href="">十二点</a></li>
						<li><a href="">十五点</a></li>
					</ul>
				</li>
				<li>
					<a href="">星期二</a>
					<ul class="subnav">
						<li><a href="">三点</a></li>
						<li><a href="">六点</a></li>
						<li><a href="">九点</a></li>
						<li><a href="">十二点</a></li>
						<li><a href="">十五点</a></li>
					</ul>
				</li>
				<li>
					<a href="">星期三</a>
					<ul class="subnav">
						<li><a href="">三点</a></li>
						<li><a href="">六点</a></li>
						<li><a href="">九点</a></li>
						<li><a href="">十二点</a></li>
						<li><a href="">十五点</a></li>
					</ul>
				</li>
				<li>
					<a href="">星期四</a>
					<ul class="subnav">
						<li><a href="">三点</a></li>
						<li><a href="">六点</a></li>
						<li><a href="">九点</a></li>
						<li><a href="">十二点</a></li>
						<li><a href="">十五点</a></li>
					</ul>
				</li>
				<li>
					<a href="">星期五</a>
					<ul class="subnav">
						<li><a href="">三点</a></li>
						<li><a href="">六点</a></li>
						<li><a href="">九点</a></li>
						<li><a href="">十二点</a></li>
						<li><a href="">十五点</a></li>
					</ul>
				</li>
			</ul>
		</div>

效果图
在这里插入图片描述

三生有幸ii
关注
CSS定位（position）---创建左侧菜单栏目--二级与三级
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
01-16 611
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>position</title> <style> *{ padding: 0; margin: 0; } .page{ wid...
鼠标悬停显示二级菜单HTML+CSS
不知名
11-27 3101
鼠标悬停显示二级菜单HTML+CSS
纯CSS制作二级导航下拉列表
04-30
网页制作前端用纯CSS制作二级导航，用最简单的CSS样式实现二级导航下拉列表，html和css样式简洁清晰，一看就会，拿来就能直接用。
css写二级列表
蒲小若的博客
08-03 2847
此文章为初学css并要写二级列表者，一个小小的引导。
CSS：二级菜单
雷爷的博客
09-03 583
CSS：二级菜单 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
纯CSS3绘制漫画小女孩特效
07-24
8. **Grid布局**：网格布局提供了一种二维布局方法，用于排列和定位元素，对于构建小女孩的结构特别有用。 在实践这个项目时，首先需要规划小女孩各个部分的结构，可能包括头部、身体、手脚等。然后，用HTML创建...
2024 高级前端面试题之 CSS 「精选篇」
最新发布
XH_jing的博客
01-26 1184
前端面试题之CSS「精选篇」
2021-2022计算机二级等级考试试题及答案No.10936.docx
10-25
### 计算机二级等级考试知识点解析 #### CSS布局与HTML标记 1. **知识点**：CSS（层叠样式表）是一种用来描述HTML文档外观和格式的语言，它可以帮助开发者更高效地控制网页的布局和样式。 2. **题目解析**：题目...
css学习
weixin_68658847的博客
09-03 826
基础css学习
css+div二级目录
06-08
css+div实现多种样式的标题二级目录
CSS二级菜单
MPU的专栏
11-22 2457
 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>title>子叶：测试css菜单显示效果title>meta http-equiv="
带你走进CSS定位详解
weixin_30735745的博客
08-03 195
学习CSS相关知识，定位是其中的重点，也是难点之一，如果不了解css定位有时候都不知道怎么用，下面整理了一下关于定位属性的具体理解和应用方案。 一：定位 定位属性列表 position top bottom right left z-index position 基本语法： position：static | absolute | fixed | relative 语法介绍： st...
二级列表
JLCBDXS的博客
03-09 320
//先获取到集合List&lt;ErJiLieBiao.DataBean&gt; data = erJiLieBiao.getData(); mElist.setAdapter(new ErJiLieBiaoAdapter(getActivity(),data));//默认打开 int count = mElist.getCount(); for (int i=0; i&lt;count; i...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值