【CSS学习笔记九】分组嵌套，尺寸和显示_才算分组与嵌套-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28997735/article/details/99903582

一.分组和嵌套

随着学习的元素越来越多，每个元素里可能有定义重复的样式，为了减少代码，可以使用分组。

例如：

/*p和h1里面颜色的样式相同*/
p
{
	color:red;
}
h1
{
	color:red;
}

/*因此可以转化下方这种形式，每个选择器用逗号隔开*/
p,h1
{
	color:red;
}

而嵌套正如其名，选择器内部选择器的选择的样式
看起来很晕，但是只要分辨出哪个选择器在前，哪个选择器在后就可以了

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>分组和嵌套</title>
		<style>
			p
			{
				color:red;
				text-align:center;
			}		
			.marked
			{
				background-color:white;
			}
			p.marked
			{
				color:green;
				text-decoration:underline;
			}
			.marked p
			{
				color:blue;
				text-decoration:overline;
			}
		</style>
	</head>
	<body>
			<p>普通段落：字体为红色居中</p>
			<div class = "marked">
				<p>在被标记的div白色背景元素里：字体为蓝色，上划线</p>
			</div>
			<p class = "marked">被标记的段落：字体为绿色，下划线</p>
			
	</body>
</html>

结果：
在这里插入图片描述

二.尺寸

使用width和height定义宽和高，但是添加max和min前缀可以定义最长和最短距离。

下面两个例子定义最大高度和最小高度。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>尺寸</title>
		<style>
			p
			{
				 background:yellow;
				 max-height:30px;
			}
		</style>
	</head>
	<body>
		<p>
		   一个顶俩<br/>
		   一个顶俩<br/>
		   一个顶俩<br/>
		</p>
	</body>
</html>

结果：
在这里插入图片描述
实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8"/>
		<title>尺寸</title>
		<style>
			p
			{
				 background:yellow;
				 min-height:80px;
			}
		</style>
	</head>
	<body>
		<p>
		   一个顶俩<br/>
		   一个顶俩<br/>
		   一个顶俩<br/>
		</p>
	</body>
</html>

结果：
在这里插入图片描述

三.显示

在了解显示的用法之前，首先要知道什么是块级元素，什么是内联元素。

1.块级元素

特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可定义

2.内联元素

特性：

和相邻的内联元素在同一行，不再另起一行。
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都不可定义

3.display显示

利用display可以改变元素的显示

用法：

/*改变为内联元素*/
p
{
	display:inline;
}

/*改变为块级元素*/
a
{
	display:block;
}

4.隐藏元素

使用display:none或visibility:hidden

区别：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

实例：

<!DOCTYPE html>
<html>
	<head>
		<style>
			li
			{
				display:inline;
			}
			a
			{
				display:block;
			}
			h1
			{
				display:none
			}
			h2
			{
				visibility:hidden;
			}
		</style>
		<meta charset = "utf-8"/>
		<title>显示</title>
	</head>
	<body>
		<h1>这是一个消失的标题</h1>
		<h2>这是一个隐藏的标题，你看不到我，却看得到我留下的踪迹</h2>
		<p>
			上方有一个隐藏的标题，你看见了吗？
			<a href = "https://blog.youkuaiyun.com/qq_28997735" target = "_blank" rel = "noopener noreferrer">前往我的博客</a>
			美味饮料：
		</p>
		<ul>
			<li>可乐</li>
			<li>雪碧</li>
			<li>芬达</li>
		</ul>
	</body>
</html>

结果：

在这里插入图片描述