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%矩形改成圆形
所思及所学
学而不思则罔,思而不学则殆!