HTML学习笔记

最新推荐文章于 2024-08-18 21:08:41 发布

斯人已远，尤赖余温

最新推荐文章于 2024-08-18 21:08:41 发布

阅读量97

点赞数

分类专栏： HTML基础文章标签： html

本文链接：https://blog.csdn.net/qq_20901663/article/details/80400336

版权

HTML基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

浮动&定位

清楚浮动的三个方法、定位的常用场景、能够说出三种定位的特点、用z-index控制层级、定位盒子顶层居中等、子绝父相的目的：

清楚浮动的原因，让父极块占有位置，后面的盒子不会自己顶上来，从而引起混乱的布局，清楚的方法有三大种：额外标签法、为父元素设置overflow属性、设置伪元素清除浮动.

额外标签法：

为父级元素设置标签属性：

overflow：hidden；

伪元素法：

定位的运用场景有很多：比如说广告轮播上；导航栏上的hot图标，当需要盖住父级元素，而且不保持占位的话可以使用定位来做。

定位的特定：子绝父相、不占位子、悬浮于父级元素之上。

z-index的数值越大叠层越高；

用定位做顶层居中；

知识点二：显示与隐藏

与显示和隐藏相关的三个单词（属性名）：display、visible、overflow、

display的属性值主要有none、block、inline-block、inline-table 等，可以说display的属性主要是显示元素的显示类型即元素是以块级元素、行级元素或行内块显示，或其他显示类型。

visible元素更像单纯的显示隐藏属性，不管显示还是隐藏始终在网页中占有位置

overflow属性更多的是考虑元素溢出问题，visible（什么也不做）、hidden（元素溢出就隐藏）、auto（自动选择是否出现滚动条）、scroll（不管元素是否溢出都出现滚动条）。

实战之透明盒子

在这个案例的制作过程中遇到了一个问题是透明盒子不显示，不管是不是悬浮在盒子之上，经过调整后还是能实现透明盒子的特效，期初考虑是伪元素加在子元素上不起作用的，后加在父级元素上就起作用了。后来想可能是权重捣鬼，后来又否认了因为.ssa的权重是小于.ssa:hover的。最后想到了一个最有可能的原因：在设置上我们在.ssa中加了display：none，所以鼠标不可能hover在其上，故而不可能会有.ssa:hover的反应，下面是原码：

<html lang="zh-CN">
	<head>
		<title>显示与隐藏二</title>
		<meta charset="utf-8" />
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style:none;
				width:400px;
				height:210px;
				position:relative;
			}
			img{
				width:400px;
				height:210px;
			}
			.ssa{
				width:400px;
				height:100%;
				background:rgba(0,0,0,.3) url(img/arr.png) no-repeat center;
				position:absolute;
				top: 0;
				left: 0;
				display:none;
				
			}
			li:hover .ssa{
				display:block;
			}
		</style>
	</head>
	
	<body>
		<div>
			<li>
				<a href="#"><img src="img/acb.jpg" alt="美女" /></a>
				<div class="ssa"></div>
			</li>
			<li>
				<a href="#"><img src="img/acb.jpg" alt="美女" /></a>
				<div class="ssa"></div>
			</li>
			<li>
				<a href="#"><img src="img/acb.jpg" alt="美女" /></a>
				<div class="ssa"></div>
			</li>
			<li>
				<a href="#"><img src="img/acb.jpg" alt="美女" /></a>
				<div class="ssa"></div>
			</li>
			
		</div>
	</body>
</html>