定位与布局(示例导航菜单)_antd 如何设置 div定位-程序员宅基地

技术标签: html5  

定位与布局(示例导航菜单)

1.流体布局

  • 行内元素仅仅占据其中内容需要的空间
  • 块级元素则撑满整个父元素,除非指定宽度
    这就是当元素不指定position属性时,文档流对元素布局的默认规则

2.定位元素
在文档流中,元素的position是static多。
当position为relative、absolute、fixed,则表示元素脱离了文档流
当元素被定位脱离了文档流,那么该元素就可以看做一个容器元素

3.浏览器确定元素的offsetParent
一个元素的offsetParent值有3种情况

  • null
    • 值为null的情况是,元素为body元素或者,该元素不具有布局(display:none),或该元素尚未加到DOM。当然position:fixed,器offsetParent也是null,因为是相对视图定位。
  • body元素
    • 如果元素不是任何一个定位元素的后代,也不满足任何返回null的条件那么其offsetParent是< body >
  • 该元素的祖先定位元素
    • 如果元素是定位元素的后代,那离他最近多那个祖先定位元素就是他的offsetParent,值得注意的是,如果元素不是定位元素的后代,但是确实< td >、< th > 、< table >、元素,那么其offsetParent就是最近的上述元素

补充:祖先定位元素

.div1{position:relative}
< div class="div1" >
		< div class="div2 >< /div >
< /div >
上述代码:div1就是div的祖先定位元素

4.定位作用
相对定位:一般是让元素成为容器元素,或者为元素应用z-index
绝对地位:脱离标准文档流,文档流的位置就不存在了,一般用来创建工具栏,对话框等
固定定位:相对于视窗,比如创建固定在头部的导航条

5.计算元素位置

相对视窗定位(position:fixed)

element.getBoundingClientRect//返回元素的left、top、right、bottom

相对于文档定位(position:abusolue)

//思想就是找到元素的offsetParent,回溯到dom树直到body元素即可,把每一级的offsetLeft和offsetTop累加起来
let getEloffsets = (el)=>{
	let offsets = {
		left:el.offsetLeft||0,
		top:el.offsetTop||0
	}
	while(el = el.offsetParent){
		offsets.left += el.offsetLeft||0,
		offsets.top +=el.offsetTop||0
	}
	return offsets
}

6.用相对定位和绝对定位做的导航菜单,不涉及js
思路:
li当做祖先定位元素position:relative=>然后li的子div的display:none=>当鼠标放在li上其子的display:block同时进行绝对定位
代码如下
css代码

/*导航菜单样式*/
[role="tjnavmenu"]{
	background: rgb(84,92,100);height:60px;line-height: 60px;
}
[role="tjnavmenu"]:after{content:"";display: block;clear: both;}
[role="tjnavmenu"] a{text-decoration: none;}
.tjnavmenu_ul{background: rgb(84,92,100);}
.tjnavmenu_ul > li{
	float:left;
	height:60px;line-height: 60px;
	padding:0 15px;
	position: relative;
	background: rgb(84,92,100)
}
.tjnavmenu_ul > li:hover{background: rgb(67,74,80);cursor: pointer;}
.tjnavmenu_ul > li:hover>a{color:#aeeeee;}
.tjnavmenu_ul > li:hover .nav_childs_a{display:block;}
.tjnavmenu_ul > li .nav_childs_a{
	position: absolute;
	top:60px;
	left:0;display:none;
	width: 240%;
}
.tjnavmenu_ul > li .nav_childs_a>ul{
	margin:5px;
	border-radius:3px;
	padding:5px 0;
	background: rgb(84,92,100);
}
.tjnavmenu_ul > li .nav_childs_a > ul > li:hover{
	background: rgb(67,74,80);
}
.tjnavmenu_ul > li .nav_childs_a > ul > li:hover>a{color: #aeeeee}
.tjnavmenu_ul > li .nav_childs_a > ul > li{
	height:30px;line-height:30px;padding:0px 10px;
}
.tjnavmenu_ul > li a{
	/*color:#AEEEEE;*/
	color:#ffffff;
}
.tjnavmenu_ul .nav_childs_a > ul > li{position: relative;background: rgb(84,92,100)}
.tjnavmenu_ul .nav_childs_a > ul > li .nav_childs_b{
	position: absolute;
	left:100%;
	top: 0;
	width:100%;
	padding:0 5px;
	display:none;
}
.tjnavmenu_ul .nav_childs_a > ul > li:hover .nav_childs_b{display:block;}
.tjnavmenu_ul .nav_childs_a > ul > li .nav_childs_b ul{
	background: rgb(84,92,100);
	padding:5px 0;border-radius:3px;
}
.tjnavmenu_ul .nav_childs_a >ul > li .nav_childs_b ul > li{
	padding-left:10px;
	background: rgb(84,92,100)
}
.tjnavmenu_ul .nav_childs_a >ul > li .nav_childs_b ul > li:hover a{
	color: #aeeeee;
}
.tjnavmenu_ul .nav_childs_a >ul > li .nav_childs_b ul > li:hover{
	background:rgb(67,74,80);
}

html代码

<nav role="tjnavmenu">
    	<ul class = "tjnavmenu_ul">
    		<li>
    			<a href="">导航一</a>
    		</li>
    		<li>
    			<a href="">导航二</a>
    			<div  class="nav_childs_a">
	    			<ul>
	    				<li><a href="#">-导航一</a></li>
	    				<li><a href="#">-导航二</a></li>
	    				<li><a href="#">-导航三</a></li>
	    			</ul>
	    		</div>
    		</li>
    		<li>
    			<a href="">导航三</a>
    			<div  class="nav_childs_a">
	    			<ul>
	    				<li>
	    					<a href="#">-导航一</a>
	    					<div class="nav_childs_b">
		    					<ul>
		    						<li><a href="#">xx-导航一</a></li>
		    						<li><a href="#">xx-导航二</a></li>
		    						<li><a href="#">xx-导航三</a></li>
		    					</ul>
		    				</div>
	    				</li>
	    				<li>
	    					<a href="#">-导航二</a>
	    					<div class="nav_childs_b">
		    					<ul>
		    						<li><a href="#">xx-导航一</a></li>
		    						<li><a href="#">xx-导航二</a></li>
		    						<li><a href="#">xx-导航三</a></li>
		    					</ul>
		    				</div>
	    				</li>
	    			</ul>
	    		</div>
    		</li>
    	</ul>
    </nav>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/tangjie109411/article/details/82999548

智能推荐

0719学习总结(文件流的输入输出)_请综合输入输出流、文件流和字符串流、特别是文件流中指针相关函数进行文件随机位-程序员宅基地

文章浏览阅读482次。1.输入输出流常用的有:iostream 包含了对输入输出流进行操作所需的基本信息:fstream 用于用户管理的文件的I/O操作。strstream 用于字符串流I/O。stdiostream 用于混合使用C和C + +的I/O机制时,例如想将C程序转变为C++程序。iomanip 在使用格式化I/O时应包含此头文件。2.在iostream头文件中定_请综合输入输出流、文件流和字符串流、特别是文件流中指针相关函数进行文件随机位

鸿蒙osbeta2.0上手上手,鸿蒙OS 2.0上手视频曝光,Mate40系列首批无缘,界面与EMUI一致...-程序员宅基地

文章浏览阅读47次。原标题:鸿蒙OS 2.0上手视频曝光,Mate40系列首批无缘,界面与EMUI一致华为在今天正式召开鸿蒙OS 2.0开发者沟通会,此次沟通会将会讨论鸿蒙OS 2.0的各种相关开发问题。对于普通消费者来说,开发者的事情并不是大家关心的。作为消费者最关心的还是鸿蒙OS 2.0啥时候能够适配自己的手机。 在华为召开开发者大会的同时,华为也在今天正式放出了鸿蒙OS 2.0手机开发者Beta版。目前已经有博...

Jenkins首次安装推荐插件出错 No such plugin: cloudbees-folder 超详细解决方案-程序员宅基地

文章浏览阅读6.8k次,点赞2次,收藏12次。我的环境:腾讯云 CentOS7 轻量应用服务器docker run -u root -itd -p 8080:8080 -p 50000:50000 -v /var/jenkins_home:/var/jenkins_home -v /var/run/docker.sock:/var/run/docker.sock --name jenkins-master jenkinsci/blueocean当我首次通过镜像启动一个 Jenkins 容器后,访问服务器 公网ip:8080 访问 Jenkin._no such plugin: cloudbees-folder

JSP入门-基本语法_用于为其他动作提供附加信息的动作是-程序员宅基地

文章浏览阅读392次。JSP入门-基本语法_用于为其他动作提供附加信息的动作是

DNS服务器搭建_server registered via geo dns in ap-east-1-程序员宅基地

文章浏览阅读5.9k次,点赞6次,收藏59次。本篇是关于DNS服务器的搭建配置教程!_server registered via geo dns in ap-east-1

7.2(stm32以太网)_w25qxx_write_nocheck-程序员宅基地

文章浏览阅读3.2k次。《7.2》1.SPI的写入整个扇区W25QXX_Write_NoCheck()--->W25QXX_Write_Page()--->SPI1_ReadWriteByte(); void W25QXX_Write_NoCheck(pBuffer , addr,num) { u8 pageremain; pageremain = addr - addr%256;_w25qxx_write_nocheck

随便推点

ROS命令_ros查找功能包-程序员宅基地

文章浏览阅读2.7k次。文章目录1.功能包、功能包集相关2.工作空间1.功能包、功能包集相关(1) rospack find turtlesim:查找turtlesim包的路径/opt/ros/noetic/share/turtlesim(2) rosls turtlesim:可获取功能包下面的文件列表cmake images msg package.xml srv(3) rosstack find [stack_name]:查找已经在系统中安装过的某个功能包集(4)roscd turtlesim:进入某个文_ros查找功能包

hadoop_connecting to 192.168.128.130:22... could not conn-程序员宅基地

文章浏览阅读412次。连接xshell错误信息如下Connecting to 192.168.128.130:22...Could not connect to '192.168.128.130' (port 22): Connection failed.最有可能的原因是在配置 vi /etc/sysconfig/network-scripts/ifcfg-eth0 的时候使用的IPADDR =192.168.128.130 , 这个IP地址不在虚拟机VMware8本身的net 连接的ip范围内,解决步骤如下_connecting to 192.168.128.130:22... could not connect to '192.168.128.130' (

CentOS7 安装 PHP7 完全详细教程_centos7 命令安装php7-程序员宅基地

文章浏览阅读2w次,点赞3次,收藏16次。CentOS7的默认PHP版本是PHP5,但是如果我们要安装PHP7,不需要将现有的PHP5删除,只要将PHP升级到PHP7即可。使用 yum provides php 命令可以获取CentOS7的PHP包安装情况。显示的是在现有的安装源中能够安装的最新版本为:php-5.4.16-46.el7.x86_64在安装PHP7之前,建议先升级更新一下CentOS7的安装包:yum -y upd..._centos7 命令安装php7

偏差平方和说明什么_什么是平方误差和均方误差-程序员宅基地

文章浏览阅读7.1k次。展开全部均方误差是指参数估计636f70793231313335323631343130323136353331333431373161值与参数真值之差平方的期望值,记为MSE。MSE是衡量“平均误差”的一种较为方便的方法,MSE可以评价数据的变化程度,MSE的值越小,说明预测模型描述实验数据具有更好的精确度。误差平方和又称残差平方和、组内平方和等,根据n个观察值拟合适当的模型后,余下未能拟合部份..._参参数偏差平方和

nginx mysql php源码编译_snowy +nginx-程序员宅基地

文章浏览阅读87次。lamp架构=Linux/unix/windows(操作系统)+apache/nginx……+mysql/pgsql +php/python/golang。开发能力要自己努力。起码需要一些语言基础。不懂代码何以精通?不堪官方源码何以做到熟悉?nginxnginx有官方网站:www.nginx.comtar zxf nginx-1.18.0.tar.gz ##解压。解压之后里面有configure,表示他是开源的。./configure --help ##查看一些参数 _snowy +nginx

Rancher备份&&还原_rancher还原db-程序员宅基地

文章浏览阅读834次。Rancher备份&&还原一、Rancher 备份1、备份# !/bin/bash# /opt/backup/backup-rancher.shDATE=$(date +%Y%m%d%H%M)echo "备份rancher数据"echo "1.拷贝容器内数据"IMAGE_ID=`docker ps |grep rancher:v2.5.8|awk '{print $1}'`docker cp $IMAGE_ID:/var/lib/rancher /opt/ba_rancher还原db

推荐文章

热门文章

相关标签