前端学习第七站——CSS盒子模型
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
目录
一、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像素、实线、蓝色的边框属性应该如何设置
• border20px solid blue
➢ 给盒子设置上边框 10像素、虚线、黄色的边框属性应该如何设置
• border-top10px dashed yellow
4.1 内边距padding——取值
➢ 作用设置 边框 与 内容区域 之间的距离
➢ 属性名padding
➢ 常见取值
| 取值 | 示例 | 含义 |
| 一个值 | padding10px | 上右下左都设置为10px |
| 两个值 | padding10px 20px | 上下设置为10px左右设置为20px |
| 三个值 | padding10px 20px 30px | 上为10px左右为20px下为30px |
| 四个值 | padding10px 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盒子大小始终是你设置的widthheight属性
➢ 需求盒子尺寸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标签默认有margin8px
• 比如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. 给父元素设置overflowhidden
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>