携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情
1. 优先级
选择器权重如下表
注意：元素选择器：div、p等等。行内样式是直接在标签内进行书写。important一旦使用为最高级别，使用如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS优先级</title>
<style>
.test {
color: red;
}
div {
color: pink!important;
}
#demo {
color: green;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>
</html>
2. 权重叠加
注意：复合选择器存在叠加但是不会进位，继承的权重为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS权重练习</title>
<style>
/* .nav li 权重是 11 */
.nav li {
color: red;
}
/* 需求把第一个小li 颜色改为 粉色加粗 ? */
/* .pink 权重是 10 .nav .pink 20 */
.nav .pink {
color: pink;
font-weight: 700;
}
</style>
</head>
<body>
<ul class="nav">
<li class="pink"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
3. 盒子模型
网页布局过程:
- 先准备好相关的网页元素,网页元素基本都是盒子Box。
- 利用CSS设置好盒子样式,然后摆放到相应位置。
- 往盒子里面装内容.
3.1 外边距的学习
外边距是设置盒子与盒子之间的距离
外边距可以让块盒子水平居中 外边距可以让块级盒子水平居中,但是必须满足两个条件:
- 盒舒必须指定了宽度(width)。
- 盒子左右的外边距都设 置为auto
. header{ width: 960px; margin:0 auto; }
常见的写法,以下三种都可以:
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
注意：
- 以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
- 外边距合并,嵌套块元素塌陷,解决方式如下: (即父元素与子元素可以不黏起来)
- 对于两个嵌套关系(好关系)的块元素,元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。
解决方案:
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加overflow:hidden。
清除内外边距的方法是：
{
margin: 0;
padding: 0;
}
