从零开始学前端：伪元素和盒子模型 --- 今天你学习了吗？（Day13）
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day13）
复习：从零开始学前端：CSS元素模式的转换和CSS三大特性 — 今天你学习了吗？（Day12）
文章目录
- 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day13）
前言
我这忙碌又充实的一天呀~
年末了，发现同为实习生的同学已经回家过年了，同事也大多请年假回家，还有一两个因为在中风险地区，居家办公，然后。。。。今天上班，我们项目组，只有我一个人，只有我一个实习生，昨天还有两三个人来着，身为实习生年末已经没事了，一直是自己在学习，或者忙自己的事情，在家也没事情，所以就照常上班，不过这现象还是震惊到我了。。。。。。
第十三节课：伪元素和盒子模型
一、伪元素
CSS伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
文档树，也可以直接理解为DOM元素（这个概念在后面的js会具体讲解）。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，，并不存在于文档结构中，比如说，我们可以通过：before来在一个元素前增加一些文本，并为这些文本添加样式。
- ::before------在当前元素面前插入一些元素------激活使用content:"";
- ::after------在当前元素后面插入一些内容------激活使用content:"";
- 特点：属于行内元素
- ::first-line------在元素的第一行文字使用CSS样式
- ::first-letter------在元素的首字母或者首文字的时候使用CSS样式
- ::selection------当鼠标选择某些内容的时候出现的样式，（有的CSS样式不起作用，不支持）
伪类元素使用两个冒号（::）而不是一个冒号（:），这是CSS3规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。
注意！！：除了selection必须要用双冒号之外，其他的都可以用单冒号
例子：
html文件：
<body> <div> <div>这是一个div~</div> <hr> <span>这是一个span~</span> </div></body>css文件：
div div::before{ content: "div前加入的字体~"; color:blue;}div div::after{ content: "div后加入的字体"; color: royalblue;}div div::first-letter{ color: pink;}div span{ display: block; height: 100px; width: 85px; background-color: plum;}div span::first-line{ color: rgb(240, 0, 0); background-color: powderblue;}div span::selection{ background-color: sandybrown;}效果图：
二、基线对齐
我们在div里面放图片的时候，会发现图片与div下边框有间隙，应该怎么解决这一间隙问题，有两种方式可以解决这个问题。
对齐语法：vertical-align:属性值;
属性值：top、text-top、middle、baseline（默认）、text-bottom、bottom。
默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。
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>伪元素</title> <link rel="stylesheet" href="css/伪元素.css"></head><body> <div> <img src="./img/康纳充电中.jpg" alt=""> 这是一个div~ </div></body></html>css文件：
div { background-color: pink;}div img{ width: 400px; vertical-align: middle;}例图：
改完后:
三、解决基线对齐问题
解决基线对齐（图片下方间隙问题）：
- 除了利用vertical-align这一属性之外
- 直接将图片设置为块元素：display：block
注意：
vertical-aligin起作用的前提条件：（作用范围）
行内元素和行内块元素。这是因为块级元素是没有基线对齐问题的。
图片和文字之间，垂直居中对齐，就使用vertical-align:middle
css文件：
div { background-color: pink;}div img{ width: 400px; /* vertical-align: middle; */ display: block;}
四、盒子模型
页面布局要学习三大核心，盒子模型，浮动和定位。
盒子模型的组成：
所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，他包括：边框、外边距、内边距、和实际内容。
- border边框
- content内容
- padding内边距
- 外边距margin
基本语法：
margin：length|auto;
我们可以简单理解margin就是设置盒子与盒子之间的距离，间隙。
| 属性值 | 意义 |
|---|---|
| length | 由浮点数字和单位标识符组成的长度值 或 百分数（基于父元素的高度），支持负数值 |
| auto | 取计算机值（居中使用） |
注意：
计算机的默认外边距有8px，所以我们一般写页面的时候都会清楚这个默认外边距，margin：0
1.盒子模型margin（外边距）
基本语法： margin:length | auto;
margin:20px; /*当margin的值只有一个的时候，上下左右都是一个值 */ margin:20px 30px; /* 当margin的值只有两个的时候，上下、左右依次设置值 */ margin: 10px 40px 20px; /* 当margin的值有三个的时候，上、左右、下依次设置值 */ margin: 10px 20px 40px 30px; /* 当margin的值有四个的时候，上、右、下、左依次设置值 */由此可见当margin有四个值的时候是按照顺时针来分布的。
margin-top: 20px;/* 单独设置上外边距 */margin-bottom: 20px;/* 单独设置下外边距 */margin-left: 20px;/* 单独设置左外边距 */margin-right: 20px;/* 单独设置右外边距 */auto属性值，auto这个属性值是计算机来计算的，我们一般用来给我们的盒子横向居中，因为根据每个电脑显示屏的宽度不一样，所以我们就很难给一个确切的值让他居中，这个时候就可以利用auto这个属性值，让我们的盒子在页面横向居中。
注意！！：
auto这个居中只能使用在块级元素身上，如果改元素为行内元素或者行内块元素，那么这个居中就不会起作用。
margin：0 auto；//可以使块元素居中在页面
实例：
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>盒子模型</title> <link rel="stylesheet" href="./css/练习.css"></head><body> <div class="div"> <div class="c1"></div> <div class="c2"></div> </div></body></html>css文件：
.c1{ height: 250px; width: 250px; background-color: purple; margin-left: 50px;}.c2{ height: 150px; width: 150px; background-color: royalblue; margin: 50px 30px;}效果图：
2.盒子模型border（边框）
border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色。
我们来看boeder边框的使用语法：这一种写在一起的就是border边框的复合写法。但是其中的顺序是没有要求的。
语法：
border：border-width || border-style || border-color
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px（四个边也是和margin一样的上、右、下、左）thin小于默认宽度 |
| border-style | 边框的样式（这里面的值也是可以按照那个上右下左的顺序） |
| border-color | 边框颜色（这里面的值也是可以按照那个上右下左的顺序） |
边框样式有border-style：边框样式，除了这几种还有其他的，大家可以去看看：
- silid：实线（默认就是实线，使用的最多）
- dotted：点线
- dashed：虚线
- double：双实线
- groove：3D边框
注意点：
- border中必须要设置边框样式，就算没有大小和颜色，样式必须给。
- 当不给边框颜色的时候，默认边框颜色是跟字体颜色相同的。
- 当不给边框大小的时候，边框大小会有一个默认值，这个默认值是多少，每个浏览器给的边框宽度不一样。
- 边框会影响盒子的实际大小。
border-top:/* 上边框 */border-right:/* 右边框 */border-bottom:/* 下边框 */border-left:/* 左边框 *//* 当然还有一种就是分样式，这种写法太浪费时间了，大家了解一下就行，因为平常我们写代码不会这样分的这个细，刚刚上面讲的那两种是最常用的。也可以写不同的颜色，然后顺序也是上右下左*/border-top-style:样式;border-top-width:宽度;border-top-color:颜色;实例：
html文件：
<body> <div class="div"> <div class="c1"></div> </div></body>css文件：
.div{ height: 400px; width: 400px; background-color: pink; border-width: 20px; border-color: salmon; border-style: solid; /* 最重要,因为有下面四条，所以此条被覆盖 */ border-top-style: solid; border-right-style: dotted; border-left-style: dashed; border-bottom-style: double;}.c1{ width: 150px; height: 150px; background-color: sandybrown; margin: 130px 130px; border-style: groove; border-width: 10px; border-color: teal;}效果图：
3.盒子模型padding（内边距）
---后续补充图画说明
padding也有分开的写法
| 属性 | 作用 |
|---|---|
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
但是当我们是用padding的时候盒子也会发生变化
- 内容和边框有了距离，添加了内边距。
- padding影响了盒子的实际大小（撑大盒子）
解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
我们为什么要用padding呢？
- padding内边距可以撑开盒子，我们可以做出非常巧妙地运用。
- 因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding最合适。（比如淘宝页面）
- 所有HTML元素可以看做盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。
- CSS盒模型本质上是一个盒子，封装周围的HTML元素，他包括：边距，边框，填充，和实际内容。
- 因为我们页面有默认的外边距，有些标签比如ul li会有默认的内边距，所以我们在制作页面的时候可以先把默认外内边距清除。
4.margin的应用（外边距重合问题）
---后续补充图画说明
外边距塌陷特称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距组合在一起变成单个外边距。（不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题）
- 兄弟关系：
外边距重合，谁的外边距大就显示谁的外边距。
解决办法：
中间添加一个元素，设置边框线（不可取）
给其中一个设置外边距或则上边距 - 父子关系（嵌套关系）：
外边距重合，谁的外边距大就显示谁的外边距。
解决方案：
给父亲添加padding
父亲添加边框线
给父亲添加（overflow：hidden），溢出隐藏，内容超出隐藏
五、练习
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>第13节课作业</title> <link rel="stylesheet" href="./css/商品展示.css"></head><body> <div class="contain"> <div class="car"> <img src="./img/car.png" alt=""> <div class="product"> <div>九号卡丁车Pro兰吉博尼</div> <div class="introduce">九号卡丁车Pro兰博基尼汽车定制版</div> <div class="sell">9999元</div> </div> </div> <div class="single"> <img src="./img/sigle.png" alt=""> <div class="product"> <div>小米米家电动滑板车Pro</div> <div class="introduce">性能提升，动动更强劲</div> <div class="sell">2999元 <span>3099元</span> </div> </div> </div> </div></body></html>CSS文件：
.contain{ height: 500px; width: 730px; background-color: rgb(206,199,199); padding: 20px; position: relative;}.car{ height: 460px; width: 300px; position: absolute; background-color: white; padding: 20px; box-shadow: 10px 10px 10px rgb(143, 141, 141);}.single{ left: 400px; height: 460px; width: 300px; position: absolute; background-color: white; padding: 20px; box-shadow: 10px 10px 10px rgb(143, 141, 141);}.product{ font-size: 28px; line-height: 40px; text-align: center; position: absolute; bottom: 50px;}.introduce{ font-size: 18px; color: rgb(206,199,199);}.sell{ font-size: 24px; font-weight: 600; color: rgb(255,93,0);}.sell span{ text-decoration: line-through; font-weight: normal; color: rgb(206,199,199);}预习： 从零开始学前端：CSS盒子模型属性 — 今天你学习了吗？（Day14）
------富贵必从勤苦得，男儿须读五车书。