目录
一、CSS三大特性——优先性
1. 优先性的介绍
➢ 特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式: • 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important ➢
注意点:
1. !important写在属性值的后面,分号的前面!
2. !important不能提升继承的优先级,只要是继承优先级最低!
3. 实际开发中不建议使用 !important 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 优先级:继承<通配符<标签<class<id<行内样式<!important */
body{
color: red;
}
div{
color: green!important;
}
.box{
color: blue;
}
#box{
color: orange;
}
/* !important,可以将样式提升到最高优先级,就是不要用在继承属性上 */
</style>
</head>
<body>
<div class="box" id="box" style="color: pink;">优先级测试</div>
</body>
</html>
2. 权重叠加计算
➢ 场景:
如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式:(每一级之间不存在进位)
➢ 比较规则:
1. 先比较第一级数字,如果比较出来了,之后的统统不看
2. 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后的统统不看
3. 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算!)
➢ 注意点:!important如果不是继承,则权重最高,天下第一!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* #one {
color: red;
}
.son {
color: blue;
}
p {
color: green;
} */
/* (行内, id, 类, 标签) */
/* (0, 1, 0, 1) */
div #one {
color: orange;
}
/* (0, 0, 2, 0) */
.father .son {
color: skyblue;
}
/* 0, 0, 1, 1 */
.father p {
color: purple;
}
/* 0, 0, 0, 2 */
div p {
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
</body>
</html>
权重计算的关键点:
1. 先判断选择器是否能直接选中标签,如果不能直接选中 → 是继承,优先级最低 → 直接pass
2. 通过权重计算公式,判断谁权重最高
➢ 注意点:
• 实际开发中选择标签需要精准,尽量避免多个选择器同时选中一个标签的情况,不要自己难为自己
扩展:Chrome浏览器差错流程
二、盒子模型
1. 盒子模型的介绍
1. 盒子的概念
(1)页面中的每一个标签,都可看做是一个 “盒子”,通过盒子的视角更方便的进行布局
(2)浏览器在渲染(显示)网页时,会将网页中的元素看做是一个个的矩形区域,我们也形象的称之为 盒子
2. 盒子模型 ➢ CSS 中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域( margin)构成,这就是 盒子模型
3. 记忆:可以联想现实中的包装盒
电脑就是内容,泡沫是border边框
2. 内容的宽度和高度
➢ 作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性:width / height ➢ 常见取值:数字+px
3.1 边框(border)——单个属性
作用:给设置边框粗细、边框样式、边框颜色效果
单个属性:
作用 | 属性名 | 属性值 |
边框粗细 | border-width | 数字+px |
边框样式 | border-style | 实现solid,虚线dashed,点线dotted |
边框颜色 | border-color | 颜色取值 |
3.2 边框(border)——连写属性
➢ 属性名:border
➢ 属性值:单个取值的连写,取值之间以空格隔开
• 如:border : 10px solid red; ➢ 快捷键:bd + tab
大部分情况下border属性都是进行连写的。
快捷键:bd+tab
只给盒子的某个方向单独设置边框
border - 方位名词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* 实线 solid */
/* border: 1px solid #000; */
/* 虚线dushed */
/* border: 1px dashed #000; */
/* 点线 dotted */
/* border: 1px dotted #000; */
/* 只要某一个方向的线:border_方向 */
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
小结
➢ 给盒子设置四周 20像素、实线、蓝色的边框,属性应该如何设置?
• border:20px solid blue;
➢ 给盒子设置上边框 10像素、虚线、黄色的边框,属性应该如何设置?
• border-top:10px dashed yellow;
4.1 内边距(padding)——取值
➢ 作用:设置 边框 与 内容区域 之间的距离
➢ 属性名:padding
➢ 常见取值:
取值 | 示例 | 含义 |
一个值 | padding:10px | 上右下左都设置为10px |
两个值 | padding:10px 20px | 上下设置为10px,左右设置为20px |
三个值 | padding:10px 20px 30px | 上为10px,左右为20px,下为30px |
四个值 | padding:10px 20px 30px 40px | 上10,右20,下30,左40(当有四个属性时,顺序为上右下左,顺时针) |
记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
/* 设置四个方向的内边距 */
padding: 50px;
/* pdding属性可以当做复合属性使用 分别表示各个方向的内边距属性 padding最多取四个值 */
/* padding:四个值, 上 右 下 左 */
padding: 10px 20px 30px 40px;
/* padding:三个值 上 左右 下 */
padding: 10px 20px 30px;
/* 俩值 上下 左右 */
padding: 10px 20px;
/* 方向规则 顺时针旋转 遇到没有值的跟对面一样 */
}
</style>
</head>
<body>
<div>
文字
</div>
</body>
</html>
4.2 内边距(padding)- 单方向设值
➢ 场景:只给盒子的某个方向单独设置内边距
➢ 属性名:padding - 方位名词
➢ 属性值:数字 + px
4.3 盒子大小的计算方式
➢ 需求:
盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
• 注意点:
① 设置width和height是内容的宽高!
② 设置border会撑大盒子
③ 设置padding会撑大盒子
➢ 盒子实际大小终极计算公式:
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框(border)
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框(border)
➢ 解决:当盒子被border和padding撑大后,如何满足需求?
• 自己计算多余大小,手动在内容中减去(手动内减)
4.4 盒子模型自动内减的方式
就是说无论怎么设置padding和border,盒子大小始终是你设置的width,height属性
➢ 需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
• 给盒子设置border或padding时,盒子会被撑大,如果不想盒子被撑大?
➢ 解决方法
① :手动内减 • 操作:自己计算多余大小,手动在内容中减去
• 缺点:项目中计算量太大,很麻烦 ➢ 解决方法
② :自动内减 • 操作:给盒子设置属性 box-sizing : border-box ; 即可(相当于变成了CSS3盒子模型)
• 优点:浏览器会自动计算多余大小,自动在内容中减去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
/* 变成CSS3的盒子模型,好处:加了border和padding属性依然保留原理大小,不需要再手动加减 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
文字
</div>
</body>
</html>
5.1 外边距(margin)- 取值
➢ 作用:设置边框以外,盒子与盒子之间的距离
➢ 属性名:margin
➢ 常见取值: 和padding一样,上右下左,顺时针
记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!!
5.2 外边距(margin) - 单方向设值
➢ 场景:只给盒子的某个方向单独设置外边距
➢ 属性名:margin - 方位名词
➢ 属性值:数字 + px
5.3 margin单方向设置的应用
5.4 清除默认内外边距
➢ 场景:
浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的 margin和padding,后续自己设置
• 比如:body标签默认有margin:8px
• 比如:p标签默认有上下的margin • 比如:ul标签默认由上下的margin和padding-left • ……
➢ 解决方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<p>ppp</p>
<p>ppp</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
5.5 外边距问题
5.5.1 外边距折叠现象 – ① 合并现象
➢ 场景:
垂直布局的块级元素,上下的margin会合并 ➢ 结果:最终两者距离为margin的最大值
通俗的说,两个垂直的块级元素,一个设置margin-bottom,一个设置margin-top,各50的话,
两个盒子之间的距离不是100px,而是50,这个就是合并问题
➢ 解决方法:
避免就好 • 只给其中一个盒子设置margin即可
注意:中间大小的取值取决于,哪个盒子的外边距margin设置的值大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
}
.one{
margin-bottom: 60px;
}
.two{
margin-top: 50px;
}
</style>
</head>
<body>
<!-- 垂直布局的块级元素,上下的margin会进行合并,且谁的margin的之大,外边距显示该值-->
<div class="one">
111
</div>
<div class="two">222</div>
</body>
</html>
5.5.2 外边距折叠现象 – ②塌陷现象
➢ 场景:互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上
➢ 结果:导致父元素一起往下移动
➢ 解决方法:
1. 给父元素设置border-top 或者 padding-top(分隔父子元素的margin-top)
2. 给父元素设置overflow:hidden
3. 转换成行内块元素
4. 设置浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.son{
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
5.5.3 行内元素的margin和padding无效情况
➢ 场景:给行内元素设置margin和padding时
➢ 结果: 1. 水平方向的margin和padding布局中有效! 2. 垂直方向的margin和padding布局中无效!(因为是行内元素)
若想改变行内标签垂直方向的位置,设置行高即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
margin: 100px;
/* 若想改变行内标签垂直方向的位置 设置行高line-height即可 */
line-height: 100px;
}
</style>
</head>
<body>
<!-- 行内元素 如果想要通过margin和padding改变标签位置,垂直方向的位置无法生效 -->
<!-- 即 margin-top和bottom不生效 padding-top和bottom不生效 -->
<span>span</span>
</body>
</html>