1、CSS三大特性-优先级
1、特性:不同的选择器具有不同的优先级、由优先级高的选择器样式会覆盖优先级低选择器的样式
2、优先级公式
- 继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式
1、权重叠加计算
2、权重叠加计算公式
- 比较规则
- 先比较第一级数字,如果比较出来了,之后的统统不看
- 如果第一级数字相同,此时再去比较第二级数字,如果比较出来了,之后统统不看
- …
- 如果最终所有数字都相同,表示优先级相同,则比较层叠行(谁写在下面谁说的算 )
2、权重叠加计算解题步骤
- 先判断选择器是否能够直接选中标签,如果不能选中就是继承,优先级是最低的 直接pass
- 通过权重计算公式,谁的权重更高
注意点
- 实际开发中,选择标签需要精准,尽量避免多个选择器,选中同一个标签的情况,不要自己难为自己
3、Chrome调试工具
查错流程(遇到样式调试不出来,要学会通过调试工具找错)
4、盒子模型
盒子的概念
- 页面中的每一个标签,都可以看成一个盒子。通过盒子的视角可以更方标的进行布局
- 浏览器在渲染网页时,会将网页中的元素看做是一个个的矩形区域,我们也可以形象的称为盒子
盒子模型
- CSS中规定每个盒子分别由 内容区域(content)、内边距区域(padding)、边框区域(border) 外边框区域(margin)构成,这就是盒子模型
- 记忆:可以联想现实中的包装盒子
1、案例讲解
代码
html中新增一个div标签,并设置长宽高为100 背景色为红色
<!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>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
展示
2、盒子模型详解
通过上述案例,可以对盒子模型有一个大概的了解,下方表格为为归总
盒子模型 | 属性 | 备注 |
---|---|---|
内容区域:content | 利用 width 和 height 属性默认设置是盒子 内容区域 的大小 属性 1. width/height 长宽高 2. 数字+px | |
边框区域:border | ![]() | 快捷键 bd + table |
内边框区域:padding | ![]() | |
外边框区域:margin | ![]() ![]() | |
3、border-边框
1、border-单个属性
2、border连写形式
- 属性名:boder
- 属性值:单个取值的连写,取值之间可以用空格隔开
- 举例:boder:10px solid red;
3、边框单方向设置
- 场景:只给盒子的某个方向设置单独设置边框
- 属性名:boder-方位名词
- 属性值:连写的取值
属性值 | 作用 |
---|---|
border-top | 设置上内边距 |
border-bottom | 设置下内边距 |
border-left | 设置左内边距 |
border-right | 设置右内边距 |
案例
给div标签的内边距设置上下左右颜色分别为红绿粉黑颜色
代码
<!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>
div{
width: 100px;
height: 100px;
background-color: red;
border-top: 5px solid yellow;
border-bottom: 5px solid green;
border-left: 5px solid pink;
border-right: 5px solid black;
}
</style>
</head>
</head>
<body>
<div></div>
</body>
</html>
展示
4、padding-内边距
作用:设置边框与内容区域之间的距离
属性名:padding
常见取值
记忆规则:从上开始赋值,然后顺时针进行赋值,如果没有赋值看对面
1、padding-内边距单方向设置
属性值 | 作用 |
---|---|
padding-top | 设置上内边距 |
padding-bottom | 设置下内边距 |
padding-left | 设置左内边距 |
padding-right | 设置右内边距 |
案例:给内边距 上 右 下 左 设置10px 20px 30px 40px
<!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>
div{
width: 100px;
height: 100px;
padding: 10px 20px 30px 40px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
展示
5、margin-外边距
作用:设置边框以外,盒子与盒子之间的距离
属性:margin
常见取值:
记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面
1、margin-单方向设置
场景:只给盒子的某个方向单独设置外边距
属性名:margin-方位名词
属性值:数字+px
5、清楚默认内外边距
场景:浏览器会默认给部分标签设置默认的maring和padding,但在一般在项目之前需要先清除这些标签默认的margin和padding后续自己设设置
- 例如:body标签默认有margin:8px
- 例如:p标签有上下margin
解决办法:
*{
margin:0
padding:0
}
6、盒子大小计算公式
需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成 ?
注意:设置width和height是内容的宽高!② 设置border会撑大盒子 ③ 设置padding会撑大盒子
计算公式
- 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
- 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
解决方式1
自己计算多余大小 手动内减
解决方式2:自动內减
操作:给盒子属性设置 box-sizing:boder-box
7、外边距折叠现象-合并效果
场景:垂直布局的块元素,上下的margin会合并
结果:取两者距离为margin的最大值
解决办法:避免就好 或者只给一个盒子设置margin
代码:
<!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>
.box{
width: 100px;
height: 100px;
margin-bottom: 50px;
background-color: pink;
}
.box2{
width: 100px;
height: 100px;
margin-top: 60px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box2">
</div>
</body>
</html>
展示:
8、外边距折叠现象-塌陷效果
场景:相互嵌套的块元素,子元素的margin-top会作用在父元素上
结果:导致父元素一起往下移动
解决办法:
- 给父元素设置border-top或者padding-top(分割父子元素的margin-top)
- 给父元素这是overflow:hidden 解决塌陷
- 父元素转换为行内块元素
- 设置浮动
扩展:overflow:hidden 可以解决 1. 超出部分隐藏,超出内容显示省略号 2. 清除浮动 原因当父元素和子元素都设置浮动时,子元素会脱离标准流不占位 父元素检测不到子元素的高度,父元素高度为0 3.解决外边框塌陷,当父子元素嵌套时,给子元素设置margin-top样式,那么子元素也会下来
代码
<!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>
.box{
width: 200px;
height: 200px;
background-color: red;
}
.son{
width: 50px;
height: 50px;
margin-top: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
</body>
</html>
展示: