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%矩形改成圆形

posted @   Python及时行乐  阅读(329)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示