CSS复合选择器和div盒子模型

一、复合选择器（3种）
1、交集复合选择器
特点：由2个选择器组成，其中第一个必须是标签选择器，第二个是类或id选择器。两个选择器之间没有空格（有空格属于层级选择器）

<h3 class="c3">h3标题</h3>

相当于找的是h3标签class属性为c3的元素

2、并集复合选择器
特点：简称集体声明，由多个选择器通过逗号隔开，链接在一起，它主要用于多个不同的标签具有相同的css属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>复合选择器</title>
		<style type="text/css">
			h3.c3{
				color: green;
				
			}
			p#id1{
				color: red;
			}
			h1,h2,h3{
				color: gold;
			}
		</style>
	</head>
	<body>
		<h1>h1标题</h1>
		<h2>h2标题</h2>
		<h3 class="c3">h3标题</h3>
		
		<p>主卧室</p>
		<p id="id1">jljjhljg啥 是否</p>
	</body>
</html>

3、层级选择器（后代选择器）
特点：嵌套标签

二、盒子模型div
主要有：内容content 高度height宽度width
margin外边距（边框距边框的距离）
margin：4个方向（1个数据）
margin：上下左右
margin：上左右下
margin：上右下左
margin-top：距离上边的外边距
margin-bottom：距离下边的外边距
margin-left：距离左边的外边距
margin-right：距离右边的外边距

padding：内边距（内容距边框的距离）
padding：4个方向（1个数据）
padding：上下左右
padding：上左右下
padding：上右下左
padding-top：距离上边的内边距
padding-bottom：距离下边的内边距
padding-left：距离左边的内边距
padding-right：距离右边的内边距

border：1px solid red设置边框
border-top：设置上边框
border-bottom：设置下边框
border-left：设置左边框
border-right：设置右边框
border-radius：50%矩形改成圆形