update：2022/1/10 18:37
- CSS 选择器-2
- 样式继承与覆盖
- CSS 单位及颜色
- 文档流模型及盒模型
- 浏览器默认样式
w3school HTML 教程 w3school HTML 标签参考手册 MDN HTML 教程 MDN HTML 元素参考 w3school CSS 教程 w3school CSS 参考手册 MDN CSS 教程 MDN CSS 参考手册 在线文档用于查阅参考资料
黑马程序员web前端开发入门教程 尚硅谷Web前端零基础入门HTML5+CSS3基础教程 在线视频学习资源用来辅助学习，上面两个是我个人觉得质量比较高的，二选一选择一个视频资源个人比较习惯的跟着学习即可
上节课我们讲了大多数选择器，接下来我们继续讲述剩余的选择器，包括剩余的伪类选择器和伪元素选择器：
参考 链接 中的表格，其中大多数使用都比较少，不过有些伪类比较有意思可以用来实现一些特殊的效果
表示页面中一些特殊的并不存在的元素（特殊的位置）
- ::first-letter，选择文本第一个字母
只适用于块级元素
- ::first-line，选择文本第一行
- ::selection，表示选中的内容
注意：以上三个伪元素选择器资料应用特定的CSS属性，具体请参考相关资料
- ::before，选择元素的开始，可以在元素开始插入一些内容
必须结合 content 属性使用
- ::after，选择元素的最后，可以在元素结束插入一些内容
必须结合 content 属性使用 参考 链接
为一个元素设置的样式，如果这个样式是允许继承的，也会应用到它的后代元素上 注意：不是所有样式都会被继承 样式的继承性请查阅相应元素的参考手册，会说明CSS属性的继承性
当一个元素被运用上多种样式，并且出现重名的样式属性时，浏览器必须从中选择一个属性值，这个过程就是样式的覆盖
样式继承有如下的规则：
- 由于继承而发生样式冲突时，最近祖先获胜
- 继承的样式和直接指定的样式冲突时，直接指定的样式获胜
- 直接指定的样式发生冲突时，样式权值高者获胜
样式权值：
- 内联样式： 1,0,0,0
- id 选择器： 0,1,0,0
- 类及伪类选择器： 0,0,1,0
- 标签及伪元素选择器： 0,0,0,1
- 通配选择器： 0,0,0,0
即：内联样式>>id选择器>>类及伪类选择器>>标签及伪元素选择器>>通配选择器
- 样式权值相同时，后者获胜
- !important的样式属性不被覆盖
可以使用!important来使样式获得最高的优先级 注意：除非不得已，避免使用!important
在HTML中，我们已经了解了一些颜色使用方式，如
- 颜色名，如
white等 - 十六进制，如
#de34e3 - rgb函数及rgba函数，如
rgb(12,34,250)
下面我们将继续介绍其他一些颜色使用方法
- hsl函数及hsla函数：
hsl(hue, saturation, lightness)，hsla(hue, saturation, lightness, alpha)
与之对应的是HSL颜色模式，
- 色相（hue）是色轮上从 0 到 360 的度数，0 是红色，120 是绿色，240 是蓝色
- 饱和度（saturation）是一个百分比值，可以认为是颜色的强度，0％ 表示灰色阴影，而 100％ 是全色
- 亮度（lightness）也是百分比，可以认为是应为颜色赋多少光，0％ 是黑色，50％ 是既不明也不暗，100％是白色
如 hsl(300, 76%, 72%)``hsla(221, 100%, 50%, 0.5)
hsla函数最后一个值alpha指定了不透明度
许多 CSS 属性接受“长度”值，长度是一个后面跟着长度单位的数字，数字和单位之间不能出现空格，但若值为 0，则可以省略单位 长度单位有两种，绝对单位和相对单位 绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸；相对长度单位规定相对于另一个长度属性的长度
| 绝对单位 | 描述 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 (1in = 96px = 2.54cm) |
| **px ** | 像素 (1px = 1/96th of 1in) |
| pt | 点 (1pt = 1/72 of 1in) |
| pc | 派卡 (1pc = 12 pt) |
其中最常用的是px
| 相对单位 | 描述 |
|---|---|
| em | 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍） |
| ex | 相对于当前字体的 x-height(极少使用) |
| ch | 相对于 "0"（零）的宽度 |
| rem | 相对于根元素的字体大小（font-size） |
| vw | 相对于视口*宽度的 1% |
| vh | 相对于视口*高度的 1% |
| vmin | 相对于视口*较小尺寸的 1％ |
| vmax | 相对于视口*较大尺寸的 1％ |
| % | 相对于父元素 |
网页是一个多层结构，通过 CSS 可以给每层设置样式，用户只能看到最上一层 这些多层结构中，最底下的一层即为文档流，默认情况下元素都在文档流中排列
- 块元素
在页面中独占一行 默认宽度把父元素撑满 默认高度被内容撑开
- 行内元素
不会在页面中独占一行，只占自身大小，即水平布局等式不强制成立 行内元素在页面中从左至右排列，如果一行不能容下，则换到第二行继续自左往右排列，即会自动换行 默认宽度和默认高度都被内容撑开
从文档流中脱离，不占据文档流中位置 脱离文档流后，块元素和行内元素行为均会表现为块元素，有以下特点： 不在页面中独占一行 宽高默认被内容撑开 设置 float、position、flex 等可使元素脱离文档流
所有 HTML 元素都可以视为盒子，在盒子模型中对页面的布局就变成将不同的盒子摆放到不同位置
盒子模型包括：外边距、边框、内边距以及内容区，如下图所示：
- **内容 ** - 框的内容，其中显示文本和图像等元素
- **内边距 ** - 清除内容周围的区域。内边距是透明的
- **边框 ** - 围绕内边距和内容的边框
- **外边距 ** - 清除边界外的区域。外边距是透明的
可见框即元素可以看到的区域，由内容区、边框、内边距组成，不包括外边距
下面我们来介绍常规情况下的盒子模型，包括块元素盒子模型和行内元素盒子模型 首先我们会先介绍内容区、内边距、外边距和边框，随后我们会详细介绍盒子模型，最后再介绍布局公式
分别设置内容区的宽高 可以取以下值：
- **auto ** 浏览器计算高度和宽度【默认】
- length 以 px 等定义高度或宽度
- % 以包含块的百分比定义高度或宽度
- initial 将高度或宽度设置为默认值
- inherit 从其父值继承高度或宽度
这也是大多数长度有关的属性的合法取值
设置元素的最大/最小宽度/高度 设置为none【默认】，表示忽略该属性
设置四个方向内边距 （i）取值 同width属性，要求为正值 允许取值为auto （ii）值个数： 可为1~4，不同数量下取值按如下情况所示 按顺时针顺序
- 四个值：上 右 下 左 按顺序分别设置上边距，右边距，下边距，左边距；下同
- 三个值：上 左右 下
- 两个值：上下 左右
- 一个值：上下左右
设置某方向内边距
指定四条边边框类型，必须设定 （i）取值：
- dotted 定义点线边框
- dashed 定义虚线边框
- solid 定义实线边框
- double 定义双边框
- none 定义无边框【默认】
- hidden 定义隐藏边框
- groove 定义 3D 坡口边框，效果取决于 border-color 值
- ridge 定义 3D 脊线边框，效果取决于 border-color 值
- inset 定义 3D inset 边框，效果取决于 border-color 值
- outset 定义 3D outset 边框，效果取决于 border-color 值
（ii）值个数
值个数的设置规则同padding值个数的规则
border-top-style、border-right-style、border-bottom-style、border-left-style等属性
指定一个方向的边的边框类型，少用
指定四个边框的宽度
（i）取值
同width属性，明显只能为正值
亦可取预设值thin、medium【默认】、strong
（ii）值个数
值个数的设置规则同padding值个数的规则
（iii）border-top-width、border-right-width、border-bottom-width、border-left-width等属性
指定一个方向的边的边框宽度，少用
指定四个边框的颜色
（i）取值
允许所有颜色模式，如rgb()等
亦可取transparent表示透明色
（ii）值个数
值个数的设置规则同padding值个数的规则
（iii）border-top-color、border-right-color、border-bottom-color、border-left-color等属性
指定一个方向的边的边框颜色，少用
同时设置四条边框宽度、颜色、样式，是border-width、border-style 以及 border-color 的简写属性，常用
（i）取值
width color style
如果不设置其中的某个值也是允许的
（ii）值个数
值个数的设置规则同padding值个数的规则
同时设置一个方向的一条边框宽度、颜色、样式，简写属性，常用 （i）取值 同border属性，width color style
为元素的四周指定外边距的属性 （i）取值 同width 允许取值为_auto_ （ii）值个数 同padding的值个数规则
为元素的四周指定外边距的属性 （i）取值 同margin （ii）值个数 同padding的值个数规则
指定元素的背景颜色 取值同border-color等
规定背景的绘制区域 取值：
- border-box【默认】 背景覆盖范围是内容区、内边距、边框
- padding-box 背景覆盖范围是内容区、内边距
- content-box 背景覆盖范围是内容区
指定用作元素背景的图像 默认情况下，图像会重复，以覆盖整个元素 取值应为一个指向图片链接的url
/* 示例：*/
body {
background-image: url("paper.jpg");
}取值：
- repeat【默认】 背景沿 x 轴和 y 轴双方向重复
- repeat-x 沿 x 轴方向重复
- repeat-y 沿 y 轴方向重复
- no-repeat 不重复
设置背景图片的位置 取值：
- top、left、center、right、bottom的组合
top left【默认】 top center top right center left center center center right bottom left bottom center bottom right
- 若仅指定一个值，另一个值默认是 center
即 top 相当于 top center
- 通过偏移量指定背景图片位置，第一个值是水平方向，第二个值是垂直方向
格式：x% y%
设置_背景图片_范围，规定 background-position 属性相对于什么位置来定位 取值：
- border-box【默认】 背景图片出现在内容、内边距、边框下，位置从边框左上角开始计算
- padding-box 背景图片出现在内容、内边距下，位置从内边距左上角开始计算
- content-box 背景图片出现在内容下，位置从内容区左上角开始计算
设置背景图片大小 取值：
- 数值：宽度 高度
- 如果只写一个值，第二个值默认为 auto，即等比缩放第二个值
- cover 图片比例不变，将元素铺满整个背景
- contain 图片比例不变，将图片在元素中完整显示
设置背景图片是否跟着元素滚动 取值：
- scroll【默认】 背景图片跟着元素滚动
- fixed 背景会固定在页面中，不跟着元素滚动，此时背景图片相对于视口定位
background-color属性与background-image 属性同时使用时，可能会出现冲突
如果两者需要同时使用时，强烈建议先设置背景图片，再指定背景颜色；其他顺序可能导致无法正常表现预期效果
背景各种属性的简写属性 支持所有background相关属性 不设置其中的某个值当然也是允许的，不要求所有值都必须设置
body {
background: #ffffff url("tree.png") no-repeat right top;
}当两个垂直外边距相遇时，它们将合并形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
兄弟元素之间 兄弟元素之间相邻外边距会折叠为一个外边距
- 两相邻外边距为正值，取两者之间最大
- 两相邻外边距一正一负，取两者之和
- 两相邻外边距为负值，取两者之间绝对值最大
一般而言无需处理兄弟元素之间相邻外边距折叠，其对于文字的排版有益
父子元素之间
父子元素之间相邻外边距，父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面
- 脱离文档流，如后面会学 float
- 不使用 margin，改用padding等
- 取消相邻，如用 ::before 选择器在父子元素之间加上一个元素
空元素
当一个块元素上边界 margin-top 直接贴到元素下边界 margin-bottom 时即其内容区为空时，也会发生边界折叠
拥有margin、border、padding、content等结构
一般而言，子元素在父元素内的元素总宽度应满足公式：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
若不成立，称为过度约束，此时遵循如下规则确定元素的实际宽度：
- 如果七个值中没有 auto，则会调整 margin-right 的值使等式满足
- 比如子元素 width 超过父元素内容区大小，margin-right 会调整为负值，使子元素溢出父元素
- 如果 width、margin-left、**margin-right **中有一个设置为 auto，则会调整被设置为 auto 的那个值，使等式成立
- 比如 width 默认值为 auto，所以块元素默认宽会充满整个父元素
- 如果 width、margin-left、margin-right 中有两个及以上设置为 auto
- 如果 width 设置为固定值，margin-left 和 margin-right 设置为 auto，则同时调整 margin-left 与 margin-right 使等式成立，此时子元素居中
- 如果 width 设为 auto，则子元素 width 调为最大，其余被设置为 auto 的属性取值为 0
另外设置 margin: auto 是设置子元素在父元素中居中的一种常用方法
（2）垂直方向布局 一般而言，默认情况下父元素高度被内容撑开，子元素在父元素内的元素总高度应满足公式：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
若父元素设置了高度，且子元素高度大于父元素，此时公式不成立，称为溢出，此时子元素会从父元素溢出：
此时可设置overflow属性来处理溢出问题，具体参看下一小节overflow属性的内容
（3）overflow属性
定义溢出元素内容区的内容的处理方式
取值：
- visible【默认】 内容不会被修剪，会呈现在元素框之外
- hidden 内容会被修剪，并且其余内容是不可见的
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（无论有无溢出都会产生滚动条）
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容（有溢出才会产生滚动条）
- inherit 规定应该从父元素继承 overflow 属性的值
行内元素盒模型的结构和块元素基本相同 但亦存在以下几点区别：
- 行内元素不支持设置 width 和 height，内容区宽高只由其内容决定
- 可以设置 border，但是垂直方向 border 不会影响布局
- 可以设置 padding，但是垂直方向 padding 不会影响布局
- 可以设置 margin，但是垂直方向 margin 不会影响布局
<div style="width: 200px; height: 200px; background-color: #ddd; padding: 25px; margin: 25px; border: 1px solid #000;">
<span style="width: 50px; height: 50px; background-color: #bbb; padding: 25px; margin: 25px; border: 1px solid #000;">我是行内元素</span>
<div style="width: 50px; height: 50px; background-color: #999; padding: 25px; margin: 25px; border: 1px solid #000;">我是块元素</div>
</div>
默认情况下width属性及height属性指的是内容区的大小
box-sizing属性可以改变盒子尺寸计算方式
取值有
- content-box【默认值】 宽高用来设置内容区大小 width = content
- border-box 宽高用来设置盒子可见框的大小 width = content + padding + border
box-sizing: border-box; 在前端开发中应用非常广泛，常常作为默认样式应用到所有元素上 在此设置下，能够有效方便地控制盒子的可见区域大小
display 属性规定是否以及如何显示元素，可以改变元素显示的类型
所有元素都有默认的display属性，如
- inline 将元素设置为行内元素（使用很少）
- **block **将元素设置为块元素
- **inline-block **将元素设置为行内块元素
行内块元素--行内元素和块元素揉合体，既可以设置宽高又不会独占一行
- none 将元素隐藏，并且隐藏后不占据文档流中空间
（与之相对的，visibility 属性隐藏后占据文档流中位置） 其他取值较少见，参考 链接 注意：设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素
浏览器会对 HTML 元素施加默认样式，但是不同浏览器的默认样式可能不同，通常情况下需要去除浏览器默认样式（特别是PC 端页面） 简单处理
*{
margin: 0;
padding: 0;
border: 0;
}导入样式表
- reset.css，清除所有默认样式
- normalize.css，统一所有默认样式
-
提交作业 ● 提交课后作业可以加积分，积累积分可以获得奖励 ● 课后作业发我的邮箱：[email protected] ● 发送邮件主题按如下格式：前端-姓名-第x周-第x次， 如 前端-陈思远-第1周-第1次 ● 每次课程作业在下下次课程之前发送到我的邮箱
-
本次课程作业内容
实现如下一个模块布局
- 不要求实现动画效果（包括图片放大效果、文字颜色渐变效果、中间线段长度延长效果、盒子阴影过渡效果等）
- 不要求实现盒子阴影效果（可以了解box-shadow属性尝试实现一下）
- 不要求实现鼠标移动图片放大效果
- 图片链接：https://www.xidian.edu.cn/__local/C/BD/8E/B4E1319F602F3F83CF5538DDABD_CA336AC2_43244.jpg
- 文字标题：【学党史·办实事】西电以教育评价综合改革促进师生全面发展
- 文字内容：教育评价事关教育发展方向。2020年9月中央印发《深化新时代教育评价改革总体方案》后，学校高度重视，将“研究实施系统性的校内教育评价机制改革方案，为师生全面发展和奋斗成才创造条件、搭建平台”，列为学校领导班子“我为群众办实事”重点任务，出台总体方案，助推学生、教师综合评价改革，取得了明显成效。
- 整个盒子是个超链接，点击在新窗口打开页面：https://news.xidian.edu.cn/info/2106/218032.htm
- 右箭头效果，网上有许多示例，可参考下述css代码，建议按实际情况按比例修改长度单位
.right-arrow {
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}<div class="right-arrow"></div>- 超链接取消默认下划线样式&设置文字大小&文字加粗&设置行高-使段落文字保持间距
/* 注意查阅相关参考手册 */
/* 取消默认下划线样式 */
a {
text-decoration: none;
}
/* 取消默认下划线样式 */
span {
font-size: 20px;
}
/* 文字加粗 */
span {
font-weight: bold;
}
/* 设置行高 */
span {
line-height: 25px;
}建议：
- 这次作业可能难度较之前有所提高，会综合运用盒子模型各种内容属性，会有所挑战性，可以慢慢做
- 开发时建议先完成html框架再添加css样式，建议先思考这个作业的整体框架再着手实现，以下为一个参考的框架
- 开发中有问题可以在群里提问，或者直接私聊我，我看到消息会尽快回复的
- 作业参考代码
已上传Gitee和Github仓库，上传了基本要求效果和最终要求效果的代码，均包括HTML和CSS两个文件 Gitee链接 GIthub链接 只需要完成基本要求的效果即可，不要求实现最终效果，最终效果代码仅供参考。 作业代码仅供参考，还希望大家能够自己独立完成作业，有问题可以在群里提问或者私戳我，希望大家在前端的学习过程中都能够有所思考，有所收获