HTML+CSS初学日常知识点-七

一、display:none和visibility:hidden的区别

两者都是隐藏元素，前者不会占据空间，后者隐藏了依然占据空间

display: none 隐藏元素同时去除元素在文档流所占的空间

visibility: hidden 隐藏元素, 但不去除元素在文档流所占的空间

visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来 这个和display: none有着质的区别

visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样

visibility用来设置元素的可见状态

display:none是会有回流，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”

visibility: hidden; 不会有回流，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

二.三级菜单

		*{
			padding: 0;
			margin: 0;
			color: #E6E6E6;
		}
		ul{
			list-style: none;
		}
		a{
			text-decoration: none;
			display: block;
		}
		body {
			background-color: #e6e6e6;
			color: #fff;
		}
		.aaa>li{
			float: left;
			height: 50px;
			width: 70px;
			text-align: center;
			line-height: 50px;
		}
		.erji{
			background-color: black;
			width: 70px;height: 150px;
			display: none;
			position: relative;
		}
		.aaa>li:hover .erji{
			display: block;
		}
		li:hover{
			background-color: #00BFFF;
		}
		
		.sanji{
			background-color: #000000;
			width: 70px;
			height: 100px;
			position: absolute;
			left: 70px;
			top: 0;
			display: none;
			
		}
		.erji li:hover .sanji{
			display: block;
		}

		<div style="width:1000px;height:50px;background-color: black;margin: 0 auto;">
			<ul class="aaa">
				<li><a href="#">首页</a></li>
				<li><a href="#">测试</a></li>
				<li>
					<a href="#">活动</a>
					<ul class="erji">
						<li class="dn"><a href="#">电脑</a>
						<ul class="sanji">
							<li>LOL</li>
							<li>PUBG</li>
						</ul>
						</li>
						
						<li><a href="#">体育</a></li>
						<li><a href="#">美术</a></li>
					</ul>
				</li>
				<li><a href="#">介绍</a></li>
			</ul>
			
		</div>

 

 

三.选择器

1.相邻选择器（相邻兄弟元素）：选中对应元素的下一个兄弟元素

特点：

1. 所涉及相邻兄弟元素必须是该元素的同级元素
2. 所涉及的相邻兄弟元素必须是相邻的兄弟元素，中间如果有其他元素隔开的会导致失效
3. 元素A对应的相邻兄弟元素之间需要 + 隔开

2.属性选择器（ img[alt] ）

检查HTML元素页面中符合所设置的属性条件的元素

通过   [ ] 设置被选元素的属性条件

3.结构性伪类选择器—not

可以选择除某个元素之外的所有元素。
就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：

input:not([type="submit"]){
  border:1px solid red;
}

 4.结构性伪类选择器—first-child

表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素

5.结构性伪类选择器—nth-child(n)

用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素