盒子模型、选择器、类选择器、 ID选择器、属性选择器、关系选择器、并选择器、通配符选择器及代码

最新推荐文章于 2022-12-07 18:18:35 发布

坚持曾今曾坚持的

最新推荐文章于 2022-12-07 18:18:35 发布

阅读量298

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/qq_44791674/article/details/108261654

版权

本文详细介绍了CSS中的盒子模型，包括margin、padding和border的使用方法，并讲解了各种选择器的用法，如元素选择器、类选择器、ID选择器、属性选择器、关系选择器、并选择器和通配符选择器，帮助理解CSS布局和选择元素的技巧。

摘要由CSDN通过智能技术生成

2.7盒子模型（重要）

Margin：外边距
Margin-top(上) ， margin-bottom（下）， margin-left（左） margin-right（右）
使用方式：
（1） margin：30px ，表示上下左右外边距都设置30px
（2） margin-left：30px ，表示设置距离左方30px
（3） margin： 10px 20px 10px 20px 分别设置上右下左四个边的边距，顺序按照顺时针方向
（4） margin：20px 30px 分别设置上下边距为20px ，左右边距为30px
Padding：内边距
与margin类似上下左右边距都有
Border：边框
Border-width:边框宽度
Border-style:边框线条类型
Border-color:边框的颜色
简写：border: 10px(宽度) red(颜色) solid(形状/风格)
在这里插入图片描述

3.选择器

3.1元素选择器
用标签名来作为选择器，选中所有相应的元素
在这里插入图片描述

3.2类选择器

根据class的属性来选择元素，样式定义为：
.className{ xxxxxxx}
在这里插入图片描述

3.3 ID选择器

根据id名来选择元素，样式定义为：
#idName{xxxxxxxxx}
在这里插入图片描述

3.4属性选择器

在这里插入图片描述
例：[title*=’d’]:选择title值中包含d的元素

3.5关系选择器

E F ：选择E元素的后代元素F（所有后代，包括子类、孙类）
E > F : 选择E元素的直接后代元素（也就是子类）
E + F：选择E元素的第一个弟弟元素F
E ~ F: 选择E元素的所有弟元素F

3.6并选择器

将相同的样式放在一起，类名直接用逗号分开
在这里插入图片描述

3.7 通配符选择器

通配符选择器可以选中页面所有的标签
*
写法：*{xxxxxxx}
在这里插入图片描述

关系选择器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: 1px green solid;
				min-height: 30px;
				max-width: 300px;
				margin-left: 50px;
				background-color: white;
			}
			#myself~div{
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div id='bigge'>大哥</div>
		<div id="myself">
			我
		<div>
			大儿子
			<div>大孙子</div>
			<div>二孙子</div>
		</div>
		<div>二儿子</div>
		<div>三儿子</div>
		<div>四儿子</div>
	</div>
	<div>三弟</div>
	<div>四弟</div>
	</body>
</html>

边框相关.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>border</title>
		<style type="text/css">
			.div1 {
				border: 1px gray dotted;
				/* 点状边框 */
			}

			.div2 {
				border: 20px green solid;
				margin: 50px;
				padding: 30px;
			}

			.div3 {
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2">
				<div class="div3">

				</div>
			</div>
		</div>
	</body>
</html>

并选择器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.one,.two{
				background-color: greenyellow;
			}
			.one{
				width: 200px;
				height: 50px;
			}
			.two{
				width: 50px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="one">asd</div>
		<div class="two">dsa</div>
	</body>
</html>

通配符选择器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				font-size: 20px;
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div>
			asddsa
			<p>111</p>
			<p>222</p>
			<p>333</p>
			<ui>
				<li>123</li>
				<li>456</li>
				<li>789</li>
			</ui>
		</div>
	</body>
</html>

元素选择器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 1px red solid;
			}
			[title*='q']{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div title="as asd"></div>
		<div title="qdsa"></div>
		<div title="as qqq"></div>
		<div></div>
		<div title="asd"></div>
	</body>
</html>