目录
[7.1 h元素](#7.1 h元素)
[7.2 p元素](#7.2 p元素)
[7.3 img元素](#7.3 img元素)
[7.3.1 img元素](#7.3.1 img元素)
[7.4 a元素](#7.4 a元素)
[7.4.1 a元素](#7.4.1 a元素)
[7.4.2 a元素-锚点链接](#7.4.2 a元素-锚点链接)
[8. iframe元素](#8. iframe元素)
[9.2 div、span元素的区别](#9.2 div、span元素的区别)
[2.4 @import](#2.4 @import)
[6.1 font-size(重要)](#6.1 font-size(重要))
[6.2 font-family](#6.2 font-family)
[6.4 font-style(一般)](#6.4 font-style(一般))
[6.5 line-height(常用)](#6.5 line-height(常用))
[7. font](#7. font)
[8.6 兄弟选择器](#8.6 兄弟选择器)
[8.7选择器组 -- 交集选择器](#8.7选择器组 – 交集选择器)
HTML
1.完整的HTML结构
一个完整的HTML结构包括哪几部分呢？
- 文档声明
- html元素
- ✓ head元素
- ✓ body元素
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html</title>
</head>
<body>
</body>
</html>2.文档声明
◼ HTML最上方的一段文本我们称之为 文档类型声明，用于声明文档类型
◼ <!DOCTYPE html>
HTML文档声明，告诉浏览器当前页面是HTML5页面；
让浏览器用HTML5的标准去解析识别内容；
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；
◼ HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多(了解即可)
3.html元素
◼元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。
所有其他元素必须是此元素的后代。
html
<!DOCTYPE html>
<html lang="zh-CN">
</html>◼ W3C标准建议为html元素增加一个lang属性，作用是
帮助语音合成工具确定要使用的发音;
帮助翻译工具确定要使用的翻译规则;
◼ 比如常用的规则：
lang="en"表示这个HTML文档的语言是英文；
lang="zh-CN"表示这个HTML文档的语言是中文；
4.head元素
◼ HTML head 元素 规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。
什么是元数据（meta data），是描述数据的数据；
这里我们可以理解成对整个页面的配置：
◼ 常见的设置有哪些呢？一般会至少包含如下2个设置。
◼ 网页的标题：title元素
◼ 网页的编码：meta元素
可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；
一般都使用utf-8编码，涵盖了世界上几乎所有的文字；
html
<meta charset="utf-8" />5.body元素
◼ body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。
之后学习的大部分HTML元素都是在body中编写呈现的；
6.HTML元素
◼ HTML元素本身很多，但是常用的元素就是那么几个。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
我们只需要记住常用的，不常用的学会查看文档即可；
◼ 常用的元素（暂时掌握下面几个就够了，90%时间都在写这几个）：
p元素、h元素； img元素、a元素、iframe元素；
div元素、span元素； ◼ 下阶段学习的元素：
ul、ol、li元素； button元素、input元素；
table、thead、tbody、thead、th、tr、td；
◼ HTML5新增元素（后续学习）
7.常见的元素
7.1 h元素
◼ 在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素
◼<h1>-<h6>标题 (Heading) 元素呈现了六个不同的级别的标题
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html</title>
</head>
<body>
<!--
标题标签：h1-h6
注意：无效标签按照纯文本内容展示在页面中
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
◼ 注意：h元素通常和SEO优化有关系（什么是SEO，后续再介绍）
7.2 p元素
◼ 如果我们想表示一个段落，这个时候可以使用p元素。
◼ HTML元素（或者说 HTML 段落元素）表示文本的一个段落。
p元素是paragraph单词的缩写，是段落、分段的意思；
p元素多个段落之间会有一定的间距；
7.3 img元素
7.3.1 img元素
◼ HTML 元素将一份图像嵌入文档。
img是image单词的所以，是图像、图像的意思；
事实上img是一个可替换元素（ replaced element ）；
◼ img有两个常见的属性：
src属性：source单词的缩写，表示源
✓ 是必须的，它包含了你想嵌入的图片的文件路径。
alt属性：不是强制性的，有两个作用
✓ 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
✓ 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；
html
<img src="./imgs/女学生.jpeg" alt="这是一个女学生" width="200px" />
<img src="./imgs/女学生.jpe" alt="这是一个女学生" width="200px" />效果图：
7.3.2图片的路径
◼ 设置img的src时，需要给图片设置路径：
网络图片：一个URL地址（后续会专门讲URL）；
✓ 网络图片的设置非常简单，给一个地址即可；
本地图片：本地电脑上的图片，后续会和html一起部署到服务；
◼ 本地图片的路径有两种方式：
方式一：绝对路径（几乎不用）；
✓ 从电脑的根目录开始一直找到资源的路径；
方式二：相对路径（常用）；
✓ 相当于当前文件的一个路径；
✓ . 代表当前文件夹（1个.），可以省略
✓ .. 代表上级文件夹（2个.）
◼ 对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \
7.4 a元素
7.4.1 a元素
◼ 在网页中我们经常需要跳转到另外一个链接，这个时候我们使用a元素；
◼ HTML<a>元素，（或称锚（anchor）元素）：
定义超链接，用于打开新的URL；
◼ a元素有两个常见的属性：
href：Hypertext Reference的简称
✓ 指定要打开的URL地址；
✓ 也可以是一个本地地址；
target：该属性指定在何处显示链接的资源。
✓ _self：默认值，在当前窗口打开URL；
✓ _blank：在一个新的窗口中打开URL；
✓ 其他不常用, 后面iframe可以讲一下；
download：该属性指定在何处显示链接的资源。
✓ 导致浏览器将链接的 URL 视为下载资源。
7.4.2 a元素-锚点链接
◼ 锚点链接可以实现：跳转到网页中的具体位置
◼ 锚点链接有两个重要步骤：
在要跳到的元素上定义一个id属性；
定义a元素，并且a元素的href指向对应的id；
7.2.3其他URL地址
◼ a元素一定是用来跳转到新网页的么？
1.下载资源
2.发送邮件
8. iframe元素
◼ 宽度默认是 300 像素，高度默认是 150 像素。
◼ 利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
◼ frameborder属性
用于规定是否显示边框
✓ 1：显示
✓ 0：不显示 ◼ a元素target的其他值:
_parent：在父窗口中打开URL
_top：在顶层窗口中打开URL
html
<iframe src="./video.html" frameborder="1"></iframe>9.div、span
9.1div、span元素的历史
◼ 在HTML中有两个特殊的元素div元素、span元素：
div元素：division，分开、分配的意思；
span元素：跨域、涵盖的意思；
◼ 这两个元素有什么作用呢？无所用、无所不用。
◼ 产生的历史：
网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可；
比如h1元素可以是一段普通的文本+CSS修饰样式；
这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理；
◼ 所以，理论上来说：
我们的页面可以没有div、span；
我们的页面也可以全部都是div、span；
9.2 div、span元素的区别
◼ 这个时候有一个问题：我出现一个不就可以了吗？
◼ div元素和span元素都是"纯粹的" 容器，也可以把他们理解成"盒子"，它们都是用来包裹内容的；
div元素：多个div元素包裹的内容会在不同的行显示；
✓ 一般作为其他元素的父容器，把其他元素包住，代表一个整体
✓ 用于把网页分割为多个独立的部分
span元素：多个span元素包裹的内容会在同一行显示；
✓ 默认情况下，跟普通文本几乎没差别
✓ 用于区分特殊文本和普通文本，比如用来显示一些关键字
10.不常用元素
◼ strong元素：内容加粗、强调；
通常加粗会使用css样式来完成；
开发中很偶尔会使用一下；
◼ i元素：内容倾斜；
通常斜体会使用css样式来完成；
开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）；
◼ code元素：用于显示代码 偶尔会使用用来显示等宽字体；
◼ br元素：换行元素
开发中已经不使用；
◼ 更多元素详解，查看MDN文档：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
11.HTML全局属性
◼ 我们发现某些属性只能设置在特定的元素中：
比如img元素的src、a元素的href；
◼ 也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为 "全局属性（Global Attributes）"
全局属性有很多：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes
◼ 常见的全局属性如下：
id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样 式（使用 CSS）时标识元素。
class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选 择和访问特定的元素；
style：给元素添加内联样式；
title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的。
邂逅CSS
1.认识CSS
◼ CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表） 是为网页添加样式的代码。
◼ CSS是一种语言吗？(知道即可)
MDN解释：CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言；
维基百科解释：是一种计算机语言，但是不算是一种编程语言；
◼ 早期的网页都是通过HTML来编写的，但是我们希望HTML页面可以更加丰富:
这个时候就增加了很多具备特殊样式的元素：比如i、strong、del等等；
后来也有不同的浏览器实现各自的样式语言，但是没有统一的规划；
1994年，哈肯·维姆·莱和伯特·波斯合作设计CSS，在1996年的时候发布了CSS1；
直到1997年初，W3C组织才专门成立了CSS的工作组，1998年5月发布了CSS2；
在2006~2009非常流行 "DIV+CSS"布局的方式来替代所有的html标签；
从CSS3开始，所有的CSS分成了不同的模块（modules），每一个"modules"都有于CSS2中额外增加的功能，以及向后 兼容。
直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。
◼ 总结：CSS的出现是为了美化HTML的，并且让结构（HTML）与样式（CSS）分离；
美化方式一：为HTML添加各种各样的样式，比如颜色、字体、大小、下划线等等；
美化方式二：对HTML进行布局，按照某种结构显示（CSS进行布局 -- 浮动、flex、grid）；
2.编写CSS样式
◼ CSS这么重要，那么它的语法规则是怎么样的呢？
◼ 声明（Declaration）一个单独的CSS规则，如 color: red; 用来指定添加的CSS样式。
属性名（Property name）：要添加的css规则的名称；
属性值（Property value）：要添加的css规则的值；
◼ 但是有个问题：我们会编写了，要编写到什么位置呢？
◼ CSS提供了3种方法，可以将CSS样式应用到元素上优先级由高到低：
内联样式（inline style）
内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
外部样式表（external style sheet）
2.1内联样式
◼ 内联样式（inline style），也有人翻译成行内样式。
内联样式表存在于HTML元素的style属性之中
html
<div style="color: red; font-size: 15px">我是一个div标签</div>◼ CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;
◼ 很多资料不推荐这种写法：
1.在原生的HTML编写过程中确实这种写法是不推荐的
2.在Vue的template中某些动态的样式是会使用内联样式的；
◼ 所以，内联样式的写法依然需要掌握。
2.2内部样式表
◼ 内部样式表（internal style sheet） 将CSS放在HTML文件元素里的
html
<style>
img {
width: 200px;
height: 200px;
object-fit: cover;
object-position: center;
border: 1px solid red;
}
</style>◼ 在Vue的开发过程中，每个组件也会有一个style元素，和内部样式表非常的相似（原理并不相同）；
2.3外部样式表
◼ 外部样式表（external style sheet） 是将css编写一个独立的文件中，并且通过元素引入进来； ◼ 使用外部样式表主要分成两个步骤：
第一步：将css样式在一个独立的css文件中编写（后缀名为.css）；
第二步：通过元素引入进来；
2.4 @import
◼ 可以在style元素或者CSS文件中使用@import导入其他的CSS文件
3.CSS注释
◼ CSS代码也可以添加注释来方便阅读：
CSS的注释和HTML的注释是不一样的；
/* 注释内容 */
4.常见的CSS属性
见md文档
◼ CSS官方文档地址
https://www.w3.org/TR/?tag=css
◼ CSS推荐文档地址：
◼ 由于浏览器版本、CSS版本等问题，查询某些CSS是否可用：
可以到https://caniuse.com/查询CSS属性的可用性；
这个网站在后续的browserlist工具中我们再详细说明；
5.目前需要掌握的CSS属性
font-size：文字大小
color：前景色（文字颜色）
background-color：背景色
width ：宽度
height：高度
6.CSS属性-字体
6.1 font-size(重要)
◼ font-size决定文字的大小
◼ 常用的设置
具体数值+单位
✓ 比如100px
✓ 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%
em 单位的值是相对于元素的父元素的字体大小
百分比
✓ 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
6.2 font-family
◼ font-family用于设置文字的字体名称
可以设置1个或者多个字体名称;
浏览器会选择列表中第一个该计算机上有安装的字体;
或者是通过 @font-face 指定的可以直接下载的字体。
html
selector {
font-family: font1, font2, font3, ..., generic-family;
}font1, font2, font3：这是你期望使用的具体字体名称。若第一种字体在用户的系统中不可用，浏览器就会尝试使用第二种字体，依此类推。generic-family：这是通用字体族名称，属于备选项。当列表中所有具体字体都不可用时，浏览器会使用通用字体族来显示文本。通用字体族有serif（有衬线字体）、sans-serif（无衬线字体）、monospace（等宽字体）、cursive（手写风格字体）和fantasy（奇幻字体）。
6.3font-weight
◼ font-weight用于设置文字的粗细（重量）
◼ 常见的取值:
◼ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
◼ normal：等于400
◼ bold：等于700
◼ strong、b、h1~h6等标签的font-weight默认就是bold
6.4 font-style(一般)
◼ font-style用于设置文字的常规、斜体显示
◼ normal：常规显示
◼ italic(斜体)：用字体的斜体显示(通常会有专门的字体)
◼ oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)
◼ em、i、cite、address、var、dfn等元素的font-style默认就是italic
6.4font-variant(了解)
◼ font-variant可以影响小写字母的显示形式
variant是变形的意思;
◼ 可以设置的值如下
normal：常规显示
small-caps：将小写字母替换为缩小过的大写字母
html
<p style="font-variant: small-caps">aaaaa</p>
6.5 line-height(常用)
◼ line-height用于设置文本的行高
◼ 行高可以先简单理解为一行文字所占据的高度
◼ 行高的严格定义是：两行文字基线（baseline）之间的间距
◼ 基线（baseline）：与小写字母x最底部对齐的线
◼ 注意区分height和line-height的区别
height：元素的整体高度
line-height：元素中每一行文字所占据的高度
◼ 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中
让line-height等同于height
7. font
◼ font是一个缩写属性
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
font-style font-variant font-weight font-size/line-height font-family
◼ 规则:
font-style、font-variant、font-weight可以随意调换顺序，也可以省略
/line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略
css
selector {
font: font-style font-variant font-weight font-size/line-height font-family;
}各属性含义如下：
font-style：设置字体的样式，可选值有normal（正常）、italic（斜体）、oblique（倾斜）。font-variant：设置小型大写字母的字体显示文本，可选值有normal（正常）、small-caps（小型大写字母）。不过该属性在现代网页设计中使用较少。font-weight：设置字体的粗细，可选值有normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细），还可以使用具体的数值，如100-900。font-size：设置字体的大小，可以使用像素（px）、百分比（%）、em、rem等单位。line-height：设置行高，即文本行与行之间的垂直间距，可以是一个无单位的数值（表示相对于字体大小的倍数），也可以使用具体的长度单位。font-family：设置字体族，可以是具体的字体名称，也可以是通用字体族，如serif、sans-serif、monospace等。
8.CSS常见选择器
8.1CSS选择器（selector）
◼ 开发中经常需要找到特定的网页元素进行设置样式
思考：如何找到特定的那个元素？
◼ 什么是CSS选择器
按照一定的规则选出符合条件的元素，为之添加CSS样式
◼ 选择器的种类繁多，大概可以这么归类
通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）
8.2通用选择器
◼ 通用选择器（universal selector）
所有的元素都会被选中;
◼ 一般用来给所有元素作一些通用性的设置
比如内边距、外边距;
比如重置一些内容;
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}◼ 效率比较低，尽量不要使用;
8.3简单选择器（基本选择器）
◼ 简单选择器是开发中用的最多的选择器:
元素选择器（type selectors）, 使用元素的名称;
类选择器（class selectors）, 使用 .类名 ;
id选择器（id selectors）, 使用 #id;
id注意事项：
◼ 一个HTML文档里面的id值是唯一的，不能重复
id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
最好不要用标签名作为id值
◼ 中划线又叫连字符（hyphen）
8.4属性选择器
◼ 拥有某一个属性 [att]
◼ 属性等于某个值 [att=val]
◼ 其他了解的(不用记)
[attr*=val]: 属性值包含某一个值val;
[attr^=val]: 属性值以val开头;
[attr$=val]: 属性值以val结尾;
[attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;
8.5后代选择器
◼ 后代选择器一: 所有的后代(直接/间接的后代)
选择器之间以空格分割
◼ 后代选择器二: 直接子代选择器(必须是直接自带)
选择器之间以 > 分割;
8.6 兄弟选择器
◼ 兄弟选择器一:相邻兄弟选择器（后者生效）
使用符号 + 连接
◼ 兄弟选择器二: 普遍兄弟选择器 ~（后面所有兄弟）
使用符号 ~ 连接
8.7选择器组 -- 交集选择器
◼ 交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)
在开发中通常为了精准的选择某一个元素;
◼ 并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)
在开发中通常为了给多个元素设置相同的样式;
8.8认识伪类
◼ 什么是伪类呢?
Pseudo-classes: 翻译过来是伪类;
伪类是选择器的一种，它用于选择处于特定状态的元素;
◼ 比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;
◼ 常见的伪类有
◼ 1.动态伪类（dynamic pseudo-classes）
:link、:visited、:hover、:active、:focus
◼ 2.目标伪类（target pseudo-classes）
:target
◼ 3.语言伪类（language pseudo-classes）
:lang( )
◼ 4.元素状态伪类（UI element states pseudo-classes）
:enabled、:disabled、:checked 伪类(pseudo-classes)
◼ 5.结构伪类（structural pseudo-classes）(后续学习)
:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-lastof-type( ) :first-child、:last-child、:first-of-type、:last-of-type :root、:only-child、:only-of-type、:empty
◼ 6.否定伪类（negation pseudo-classes）(后续学习)
:not()
◼ 所有的伪类: https://developer.mozilla.org/zhCN/docs/Web/CSS/Pseudo-classes
1.动态伪类
◼ 使用举例
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接（鼠标在链接上长按住未松开）
◼ 使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:hover、:active
◼ 除了a元素，:hover、:active也能用在其他元素上
2.动态伪类 - :focus
◼ :focus指当前拥有输入焦点的元素（能接收键盘输入）
文本输入框一聚焦后，背景就会变红色
◼ 因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
◼ 动态伪类编写顺序建议为
:link、:visited、:focus、:hover、:active
◼ 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
3.伪元素
◼ 常用的伪元素有
:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after
◼ 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
◼ ::first-line可以针对首行文本设置属性
◼ ::first-letter可以针对首字母设置属性
◼ ::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
常通过 content 属性来为一个元素添加修饰性的内容
9.CSS继承-层叠-元素类型
9.1 CSS属性的继承
◼ CSS的某些属性具有继承性(Inherited):
如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性; 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
◼ 如何知道一个属性是否具有继承性呢?
常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性; 这些不用刻意去记, 用的多自然就记住了;
◼ 另外要多学会查阅文档, 文档中每个属性都有标明其继承性的:
注意(了解): 继承过来的是计算值, 而不是设置值
常见的继承属性有哪些呢?(不用记)
9.2 CSS属性的层叠
◼ CSS的翻译是层叠样式表, 什么是层叠呢?
对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
那么属性会被一层层覆盖上去;
但是最终只有一个会生效;
◼ 那么多个样式属性覆盖上去, 哪一个会生效呢?
判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
判断二: 先后顺序, 权重相同时, 后面设置的生效;
◼ 那么如何知道元素的权重呢?
选择器的权重
◼ 按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值（权重）
!important：10000
内联样式：1000
id选择器：100
类选择器、属性选择器、伪类：10
元素选择器、伪元素：1
通配符：0
9.3 CSS属性的类型
◼ 在前面我们会经常提到div是块级元素会独占一行, span是行内级元素会在同一行显示.
到底什么是块级元素, 什么是行内级元素呢?
◼ HTML定义元素类型的思路:
HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等;
当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?
✓ 为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的;
比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起;
比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起;
而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行;
◼ 所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:
块级元素（block-level elements）: 独占父元素的一行
行内级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示
通过CSS修改元素类型
◼ 前面我们说过, 事实上元素没有本质的区别:
div是块级元素, span是行内级元素;
div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已;
9.4 display属性
◼ CSS中有个display属性，能修改元素的显示类型，有4个常用值
block：让元素显示为块级元素
inline：让元素显示为行内级元素
inline-block：让元素同时具备行内级、块级元素的特征
none：隐藏元素
◼ 事实上display还有其他的值, 比如flex, 后续会专门学习;
◼ block元素:
独占父元素的一行
可以随意设置宽高
高度默认由内容决定
◼ inline-block元素:
跟其他行内级元素在同一行显示
可以随意设置宽高 可以这样理解
✓ 对外来说，它是一个行内级元素
✓ 对内来说，它是一个块级元素
◼ inline:
跟其他行内级元素在同一行显示;
不可以随意设置宽高;
宽高都由内容决定;
编写HTML时的注意事项：
◼ 块级元素、inline-block元素
一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素） 特殊情况，p元素不能包含其他块级元素
◼ 行内级元素（比如a、span、strong等）
一般情况下，只能包含行内级元素
9.5 元素的隐藏
◼ 方法一: display设置为none
元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
◼ 方法二: visibility设置为hidden
设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
默认为visible, 元素是可见的;
◼ 方法三: rgba设置颜色, 将a的值设置为0
rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
rgba的局部性 ：父元素使用rgba设置颜色透明度，子元素需显式覆盖颜色才能避免透明效果
◼ 方法四: opacity设置透明度, 设置为0
设置整个元素的透明度, 会影响所有的子元素;
opacity的全局影响 ：若父元素使用opacity: 0，子元素无论是否设置颜色都会透明，因为opacity会强制继承到整个子树
9.6 overflow属性
◼ overflow用于控制内容溢出时的行为
visible：溢出的内容照样可见
hidden：溢出的内容直接裁剪
scroll：溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto：自动根据内容是否溢出来决定是否提供滚动机制
9.7 CSS样式不生效技巧
◼ 为何有时候编写的CSS属性不好使，有可能是因为
选择器的优先级太低
选择器没选中对应的元素
CSS属性的使用形式不对
✓ 元素不支持此CSS属性，比如span默认是不支持width和height的
✓ 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
✓ 被同类型的CSS属性覆盖，比如font覆盖font-size
◼ 建议
充分利用浏览器的开发者工具进行调试（增加、修改样式）、查错
10.CSS盒子模型
10.1 认识盒子模型
◼ 事实上, 我们可以把HTML每一个元素看出一个个的盒子:
|---------------------|----------------------------------------------------------------------------|
| ◼ 内容（content） | 
|
| 元素的内容width/height | |
| ◼ 内边距（padding） | |
| 元素和内容之间的间距 | |
| ◼ 边框（border） | |
| 元素自己的边框 | |
| ◼ 外边距（margin） | |
| 元素和其他元素之间的间距 | |
◼ 因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边:
10.2 内容width/height
◼ 设置内容是通过宽度和高度设置的:
宽度设置: width
高度设置: height
◼ 注意: 对于行内级非替换元素来说, 设置宽高是无效的!
◼ 另外我们还可以设置如下属性:
min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时, 可以设置最大宽度和最小宽度;
◼ 下面两个属性不常用:
min-height：最小高度，无论内容多少，高度都大于或等于min-height
max-height：最大高度，无论内容多少，高度都小于或等于max-height
10.3 内边距padding
◼ padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距;
◼ padding包括四个方向, 所以有如下的取值:
padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距
◼ padding单独编写是一个缩写属性：
padding-top、padding-right、padding-bottom、padding-left的简写属性
padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
◼ padding并非必须是四个值, 也可以有其他值;