0基础学前端-----CSS DAY7
视频参考：B站Pink老师
今天是CSS学习的第七天，今天开始的笔记对应Pink老师课程中的CSS第三天的内容。
本节重点：CSS的盒子模型
目标
- 能够准确阐述盒子模型四个组成部分
- 能够利用边框复合写法给元素添加边框
- 能够计算盒子的实际大小
- 能够利用盒子模型布局模块案例
- 能够给盒子设置圆角边框
- 能够给盒子添加阴影
- 能够给文字添加阴影
1.盒子模型
网页布局三大核心：盒子模型、浮动、定位
1.1 看透网页布局的本质----->利用CSS摆盒子
网页布局过程
- 先准备好相关网页元素，网页元素基本都是盒子Box。
- 利用CSS设置好盒子样式，然后摆到相应位置。
- 往盒子里装内容。
1.2盒子模型组成
盒子模型有边框（border）、内边距(padding)、外边距(margin)和实际内容(content)组成。
1.3 border边框
border可以设置元素的边框:边框宽度、样式、颜色
语法：
border: border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 边框粗细（px） |
| border-style | 样式（solid实线框、dashed虚线框、dotted点线框） |
| border-color | 颜色 |
| 参考代码： |
<!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: 300px;
height: 200px;
border-width: 5px;
/*粗细*/
border-style: solid;
/*样式，实线*/
border-style: dashed;
/*样式，虚线*/
border-style: dotted;
/*样式，点线*/
border-color: pink;
/*颜色*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果展示：
CSS边框属性允许指定一个元素边框的样式和颜色。
边框简写：
border: 1px solid red;#没有顺序
参考代码：
<!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: 300px;
height: 200px;
/* border-width: 5px;
border-style: solid;
border-color: pink; */
/* border: 5px solid pink; */
border-top: 5px solid pink;
border-bottom: 10px dashed purple;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果展示：
边框分开写：
border-top: 1px solid red;#只设置上边框，其余同理
课堂练习：200*200的盒子，上边颜色为红色，其余为蓝色。（注意层叠性）
参考代码：
<!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>
/*请给一个200*200的盒子，设置上边框为红色，其余边框为蓝色*/
div {
width: 200px;
height: 200px;
/* border-top: 5px solid red;
border-bottom: 5px solid blue;
border-left: 5px solid blue;
border-right: 5px solid blue;
*/
/*利用层叠性*/
border: 1px solid blue;
border-top: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果展示：
1.4 表格细线边框
border-collaspe属性控制浏览器绘制表格边框的方式，他控制相邻单元格的边框。
语法：
border-collaspe: collaspe;#合并相邻边框
比如将2px->合并为->1px。
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>今日小说排行榜</title>
<style>
table {
width: 500px;
height: 249px;
border-collapse: collapse;
/*合并相邻的边框*/
font-size: 14px;
text-align: center;
}
th {
height: 35px;
}
table,
td,
th {
border: 1px solid pink;
}
</style>
</head>
<body>
<table align="center" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="/HTML第二天/down.jpg"></td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="/HTML第二天/down.jpg"></td>
<td>124</td>
<td>675432</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="/HTML第二天/up.jpg"></td>
<td>212</td>
<td>7654</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="/HTML第二天/up.jpg"></td>
<td>23</td>
<td>75645</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="/HTML第二天/down.jpg"></td>
<td>121</td>
<td>7676</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="/HTML第二天/up.jpg"></td>
<td>576576</td>
<td>1231421</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="/HTML第二天/up.jpg"></td>
<td>234</td>
<td>7686</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody>
</table>
</body>
</html>
结果展示：
1.5 边框会影响盒子实际大小
边框会额外增加盒子的实际大小，因此我们有两种方案解决：
1.测量盒子大小时，不量边框
2.如果测量的时候包含了边框，则需要width/height减去边框宽度
参考代码：
<!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>
/*我们需要一个200*200的盒子，但是这个盒子有10像素的红色边框*/
div {
width: 180px;
height: 180px;
background: pink;
border: 10px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果展示：
1.6 内边距
padding属性用于设置内边距，即边框与内容之间的距离。
上下左右均可设置：padding-right/left/top/bottom
参考代码：
<!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: 200px;
height: 200px;
background-color: pink;
padding-left: 20px;
padding-top: 30px;
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
</html>
结果展示：
padding属性可以有1~4个值
| 值的个数 | 表达意思 |
|---|---|
| padding: 5px; | 上下左右内边距均为5px |
| padding: 5px 10px; | 上下为5px 左右为10px |
| padding: 5px 10px 20px; | 上5px 左右10px 下20px |
| padding: 5px 10px 20px 30px; | 上5px 右10px 下20px 左30px,顺时针 |
| 参考代码： |
<!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: 200px;
height: 200px;
background-color: pink;
/* padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px; */
/*内边距复合写法（简写）*/
/* padding: 5px; */
/* padding: 5px 10px; */
/* padding: 5px 10px 20px; */
padding: 5px 10px 20px 30px;
/*上右下左顺时针*/
}
</style>
</head>
<body>
<div>
盒子内容是content盒子内容是content盒子内容是content盒子内容是content
</div>
</body>
</html>
这里使用的是复合写法。
结果展示：
当我们给盒子指定padding值之后，发生了两件事：
- 内容和边框有了距离，添加了内边距
padding影响了盒子实际大小
也就是说，如果盒子已经有了宽度和高度，此时再指定内边距会撑大盒子。
解决方案：如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
参考代码：
<!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: 160px;
height: 160px;
background-color: pink;
padding: 20px;
}
</style>
</head>
<body>
<div>
padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小padding会影响盒子实际大小
</div>
</body>
</html>
结果展示：
案例1：新浪导航
参考代码：
<!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>
.nav {
height: 41px;
background-color: #fcfcfc;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
line-height: 41px;
}
.nav a {
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
/*a属于行内元素 此时必须要转换 行内块元素*/
height: 41px;
display: inline-block;
padding: 0 20px;
}
.nav a:hover {
background-color: #eee;
color: #ff5800;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">三个字</a>
</div>
</body>
</html>
结果展示：
案例2：小米导航案例修改
参考代码：
<!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>
a {
display: block;
width: 200px;
height: 40px;
background-color: #535758;
text-decoration: none;
font-size: 14px;
color: #fff;
/* text-indent: 2em; */
padding-left: 30px;
line-height: 40px;
}
a:hover {
background-color: #ff6f00;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
结果展示：
如果盒子本身没有指定width/height属性，此时padding不会撑开盒子大小。
参考代码：
<!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>
h1 {
/* width: 100%; */
height: 200px;
background-color: pink;
padding: 30px;
}
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
/* width: 100%; */
padding: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>
h1变了但是p的没变
效果展示：
1.7 外边距
margin属性用于设置外边距，即控制盒子与盒子之间的距离
margin-left/right/top/bottom
margin简写方式代表的意义跟padding完全一致，也是顺时针指定
参考代码：
<!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: 200px;
height: 200px;
background-color: pink;
}
/* .one {
margin-bottom: 20px;
} */
.two {
/* margin-top: 20px; */
/* margin: 30px; */
margin: 30px 50px;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>
结果展示：
外边距典型应用
外边距可以让块级盒子水平居中，但需要满足2个条件：
- 盒子必须制定了宽度
- 盒子左右的外边距都设为auto
常见的写法，以下三种均可：
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;[推荐这种写法]
参考代码：
<!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>
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="header"></div>
</body>
</html>
结果展示：
粉色块居中。
注：以上方法是让块级元素水平居中，行内元素/行内元素块元素水平居中给其元素添加text-align：center;即可。
参考代码：
<!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>
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 100px auto;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<span>里面的文字</span>
</div>
<div class="header">
<img src="/HTML第二天/down.jpg" alt="">
</div>
</body>
</html>
结果展示：
1.8 外边距合并
使用margin定义块元素的垂直外边距（margin-top、margin-bottom）时，可能会出现外边距合并。包括相邻元素块元素垂直外边距合并、嵌套块元素垂直外边距塌陷。
- 相邻元素块元素垂直外边距合并
若上面元素有margin-bottom，下面元素有margin-top，则它们之间的垂直间距不是margin-bottom+margin-top，而是取两个值中的较大者，这种现象被称为相邻元素块元素垂直外边距合并。
解决方案：尽量只给一个盒子添加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>
.damao,
.ermao {
width: 200px;
height: 200px;
background-color: pink;
}
.damao {
margin-bottom: 100px;
}
.ermao {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</body>
</html>
结果展示：
这里选择了较大值200px
- 嵌套块元素垂直外边距塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义内边框
- 可以为父元素添加overflow: hidden
- 其他方法后期会提及
参考代码：
<!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>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* border: 1px solid red; */
/* border: 1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
结果展示：
这里塌陷了100px。
1.9 清除内外边距
网页元素很多带有默认的内外边距，不同浏览器默认的也不一致，因此在布局前需要清除。
* {
padding: 0;/*清除内边距*/
margin: 0;/*清除外边距*/
}
注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不设上下内外边距（设了也没用，哈哈哈😄）。但可以转化为块级和行内块元素。
参考代码：
<!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>
/*这句话是CSS的第一句代码*/
* {
padding: 0;
margin: 0;
}
span {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
123
<ul>
<li>abcd</li>
</ul>
<span>行内元素尽量只设置左右的内外边距</span>
</body>
</html>
结果展示：
2. PS基本操作
因为网页美工大部分效果图用PS来做，所以我们大部分切图工作也在PS中完成。
- 文件---->打开：打开要测量的照片
- Ctrl+R: 可以打开标尺，或者视图—>标尺
- 右击标尺，把里面单位改成像素
- Ctrl+加号（+）可以放大试图，Ctrl+减号（-）可以缩小试图
- 按住空格键，鼠标可以变成小手，拖动PS视图
- 用选区拖动，可以测量大小
- Ctrl+D可以取消选取，或在旁边空白处点一下也可以取消
3.案例
1.产品模块
参考代码：
<!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>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
body {
background-color: #f5f5f5;
}
.box {
width: 298px;
height: 415px;
background-color: #fff;
margin: 100px auto;
/*块级盒子居中*/
}
.box img {
width: 100%;
}
.review {
font-size: 14px;
height: 70px;
padding: 0 28px;
/*padding这里没有width属性所以盒子不会被撑开*/
margin-top: 30px;
}
.appraise {
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.info {
font-size: 14px;
margin-top: 15px;
padding: 0 28px;
}
.info h4 {
display: inline-block;
font-weight: 400;
}
.info span {
color: #ff6700;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<img src="/CSS第三天/素材/img.jpg">
<p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
<div class="appraise">来自于 117384232 的评价</div>
<div class="info">
<h4><a href="#">Redmi AirDots真无限蓝... </a></h4><em>| </em><span>99.9元</span>
</div>
</div>
</body>
</html>
结果展示：
2.快报模块
新知识：去掉li前面的项目符号（小圆点）
语法：list-style: none;
参考代码：
<!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>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.box {
width: 248px;
height: 163px;
border: 1px solid #ccc;
margin: 100px auto;
}
.box h3 {
height: 32px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
padding-left: 15px;
}
.box ul li a {
font-size: 12px;
color: #666;
text-decoration: none;
}
.box ul li a:hover {
text-decoration: underline;
}
.box ul li {
height: 23px;
line-height: 23px;
padding-left: 20px;
}
.box ul {
margin-top: 7px;
}
</style>
</head>
<body>
<div class="box">
<h3>品优购快报</h3>
<ul>
<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
<li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
<li><a href="#">【特惠】爆款耳机5折秒！</a></li>
<li><a href="#">【特惠】9.9元洗100张照片！</a></li>
<li><a href="#">【特惠】长虹智能空调立省1000</a></li>
</ul>
</div>
</body>
</html>
结果展示：
—————————————————————————————————————————
第三天知识点已讲解完毕，下面即将更新课程CSS第四天的内容哦(ง •_•)ง，有什么问题都可以在评论区进行讨论哦！