CSS ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天 2.1. 认识CSS CSS 表示层叠

这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

此 CSS 笔记为课下自学时，因CSS内容较多故贴至此处，以供复习

首发：icodeq.com

2.1. 认识CSS

CSS 表示 层叠样式表 (Cascading Style Sheet，简称:CSS，又称为又称串样式列表、级联样式表、串接样式表、阶层式样式表)，是为网页添加样式的代码。
CSS是一种语言吗?(知道即可)
- MDN解释: CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言;
- 维基百科解释:是一种计算机语言，但是不算是一种编程语言;

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);

CSS如何编写呢?

CSS这么重要，那么它的语法规则是怎么样的呢?

声明(Declaration)一个单独的CSS规则，如 color: red; 用来指定添加的CSS样式。
- 属性名(Property name) :要添加的css规则的名称;
- 属性值(Property value) :要添加的css规则的值;
但是有个问题:我们会编写了，要编写到什么位置呢?

如何将CSS样式应用到元素上?

CSS提供了3种方法，可以将CSS样式应用到元素上:
- 内联样式(inline style)
- 内部样式表(internal style sheet)、文档样式表(document style sheet)、内嵌样式表(embed style sheet)
- 外部样式表(external style sheet)
疑问:三种方式，学好哪一个呢?
- 每一个都很重要，目前开发中不同的场景都会用到

2.3. 三种编写规则

内联样式(inline style)

内联样式(inline style)，也有人翻译成行内样式。
- 内联样式表存在于HTML元素的style属性之中。

CSS样式之间用分号 ; 隔开，建议每条CSS样式后面都加上分号 ;
很多资料不推荐这种写法:
- 1.在 原生的HTML编写 过程中确实这种写法是不推荐的
- 2.在 Vue的template 中某些动态的样式是会使用内联样式的;
所以，内联样式的写法依然需要掌握。

内部样式表(internal style sheet)

内部样式表(internal style sheet)
- 将CSS放在HTML文件 <head> 元素里的 <style> 元素之中。

在 Vue 的开发过程中，每个组件也会有一个 style 元素，和内部样式表非常的相似(原理并不相同);

外部样式表(external style sheet)

外部样式表(external style sheet) 是将css编写一个独立的文件中，并且通过 <link> 元素引入进来;
使用外部样式表主要分成两个步骤:
- 第一步:将 css 样式在一个独立的 css 文件中编写(后缀名为.css);
- 第二步:通过 <link> 元素引入进来;
link元素的作用，后续单独讲解。

@import

可以在 style元素 或者 CSS文件 中使用 @import 导入其他的CSS文件

2.4. CSS中的注释

/* 注释 */

CSS 代码也可以添加注释来方便阅读:
- CSS 的注释和 HTML 的注释是不一样的;
- /* 注释内容 */

2.5. 常见的CSS

必须掌握的CSS属性

必须掌握的CSS属性

在开发中90+%的时间写的都是这些属性;

赶紧开始?

不要小看这几个CSS属性，里面涉及到的概念是非常多的;

你必须了解CSS的很多特性，才能真正理解里面的每个属性;

并且在遇到一些问题的时候知道如何去调试

CSS属性的官方文档

CSS 官方文档地址
- www.w3.org/TR/?tag=css
CSS 推荐文档地址:
- developer.mozilla.org/zh-CN/docs/…
由于浏览器版本、 CSS 版本等问题，查询某些 CSS 是否可用:
- 可以到 caniuse.com/ 查询 CSS 属性的可用性;
- 这个网站在后续的 browserlist 工具中我们再详细说明;

目前需要掌握的CSS属性

要想深刻理解所有常用 CSS属性 ，最好先学会以下几个最基础最常用的CSS属性
- font-size :文字大小
- color :前景色(文字颜色)
- background-color :背景色
- width :宽度
- height :高度

CSS属性- background-color

background-color 决定背景色

CSS属性- color

color 属性用来设置文本内容的
- 包括文字、装饰线、边框、外轮廓等的颜色

2.6. 案例练习

星球介绍

有水平排布(了解)

三. 知识点补充

3.1. link元素

link 元素是外部资源链接元素，规范了文档与外部资源的关系
- link 元素通常是在 head 元素中
最常用的链接是样式表( CSS ); 此外也可以被用来创建站点图标(比如 “favicon” 图标);
link 元素常见的属性:
- href :此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的。
- rel :指定链接类型，常见的链接类型:developer.mozilla.org/zh-CN/docs/…
  - icon :站点图标;
  - stylesheet :CSS样式;

3.2. 进制

认识进制

进制的概念:
- 维基百科:进位制是一种记数方式，亦称进位计数法或位值计数法。
- 通俗理解:当数字达到某个值时，进一位(比如从1位变成2位)。
按照进制的概念，来理解一下十进制:
- 当数字到9的时候，用一位已经表示不了了，那么就进一位变成2位。
- 在东北没有什么是一顿烧烤不能解决的，如果有，那就两顿。
按照上面的来理解，二进制、八进制、十六进制:
- 二进制 :当数字到1的时候，用一位已经表示不了了，那么就进一位。
- 八进制 :当数字到7的时候，用一位已经表示不了了，那么就进一位。
- 十六进制 :等等，用一位如何表示十六个数字呢?a(10)、b(11)、c(12) 、 d(13) 、 e(14) 、 f(15)

◼ OK，下面我们简单学习一下计算机中的二进制、八进制、十六进制。

人类的十进制

计算机中的进制

进制之间的转换(课下了解)

3.3. 颜色表示方法

color keywords(颜色关键字)
RGB
- 十六进制: #aabbcc;
- 缩写: #abc
- 函数: rgb(0~255, 0~255, 0~255)

在CSS中，颜色，有以下几种表示方法:
颜色关键字(color keywords):
- 是不区分大小写的标识符，它表示一个具体的颜色;
- 可以表示哪些颜色呢?
- developer.mozilla.org/zh-CN/docs/…
RGB颜色:
- RGB 是一种色彩空间，通过R(red，红色)、G(green，绿色)、B(blue，蓝色)三原色来组成了不同的颜色;
- ✓ 也就是通过调整这三个颜色不同的比例，可以组合成其他的颜色;
- RGB各个原色的取值范围是 0~255;

RGB的表示方法

3.4. Chrome调试工具

3.5. 浏览器的渲染流程

一. CSS属性 - 文本

1.1. text-decoration (常用)

text-decoration 用于设置文字的装饰线
- decoration 是装饰/装饰品的意思;
text-decoration 有如下常见取值:
- none :无任何装饰线
  - ✓ 可以去除 a元素 默认的下划线
- underline :下划线
- overline :上划线
- line-through :中划线(删除线)

◼ a元素有下划线的本质是被添加了 text-decoration 属性

1.2. text-transform(了解)

text-transform 用于设置文字的大小写转换
- Transform 单词是使变形/变换(形变);
text-transform 有几个常见的值:
- capitalize :(使...首字母大写, 资本化的意思)将每个单词的首字符变为大写
- uppercase :(大写字母)将每个单词的所有字符变为大写
- lowercase :(小写字母)将每个单词的所有字符变为小写
- none :没有任何影响

◼ 实际开发中用 JavaScript代码转化的更多.

1.3. text-indent(一般)

text-indent用于设置第一行内容的缩进
- text-indent: 2em; 刚好是缩进2个文字

1.4. text-align(重要)

案例: 文字的居中(字面理解)
案例: 图片的居中(MDN)
案例: div元素的居中(W3C inline-level)
- 特性
- 或者其他方法

也就是说 text-align 只能把行内元素居中

如果是块级别元素可以用 margin: 0 auto; 来对齐

或者使用 inline-block 来使用 text-align

text-align: 直接翻译过来设置文本的对齐方式 ;
MDN: 定义行内内容(例如文字)如何相对它的块父元素对齐;
常用的值
- left :左对齐
- right :右对齐
- center :正中间显示
- justify :两端对齐

text-align-last ：justify 最后一行文字的排布

1.5. letter-word-spacing(一般)

letter-spacing、word-spacing分别用于设置字母、单词之间的间距
- 默认是0，可以设置为负数

二. CSS属性 - 字体

2.1. font-size(高度)

20px; 2em; 200%

font-size 决定文字的大小
常用的设置
- 具体数值+单位
  - ✓ 比如 100px
  - ✓ 也可以使用 单位 (不推荐):1em代表100%，2em代表200%，0.5em代表50%
    - 字体大小可以继承(先略过)
- 百分比
  - ✓ 基于父元素的 font-size 计算，比如50%表示等于父元素font-size的一半

2.2. font-family(重要,不过一般仅设置一次)

font-family 用于设置
- 可以设置1个或者多个字体名称;
- 浏览器会选择列表中第一个该计算机上有安装的字体;
- 或者是通过 @font-face 指定的可以直接下载的字体。

2.3. font-weight(重要)

font-weight用于设置文字的粗细(重量)
常见的取值:
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 :每一个数字表示一个重量
- normal :等于 400
- bold :等于 700
strong、b、h1~h6等标签的 font-weight 默认就是bold

2.4. font-style(一般)

font-style 用于设置文字的常规、斜体显示
- normal:常规显示
- italic(斜体):用字体的斜体显示(通常会有专门的字体)
- oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)
em、i、cite、address、var、dfn 等元素的 font-style 默认就是 italic

2.5. font-varient(了解)

小写字母以大写显示, 但是高度保持小写的高度

font-variant 可以影响小写字母的显示形式
- variant 是变形的意思;
可以设置的值如下
- normal :常规显示
- small-caps :将小写字母替换为缩小过的大写字母

2.6. line-height(常用)

两个 基线(baseline) 距离
一行文本 -> line-height
行高 - 文本高度 = 行距

line-height 用于设置文本的行高
- 行高可以先简单理解为一行文字所占据的高度

行高的严格定义是: 两行文字基线(baseline)之间的间距
基线(baseline) : 与小写字母x最底部对齐的线

注意区分 height 和 line-height 的区别
- height :元素的整体高度
- line-height :元素中每一行文字所占据的高度
应用实例: 假设 div 中只有一行文字，如何让这行文字在div内部垂直居中
- 让 line-height 等同于 height

2.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选择器

CSS选择器(selector)

开发中经常需要找到特定的网页元素进行设置样式
- 思考:如何找到特定的那个元素?
什么是CSS选择器
- 按照一定的规则 选出符合条件的元素 ，为之添加CSS样式
选择器的种类繁多，大概可以这么归类
- 通用选择器(universal selector)
- 元素选择器(type selectors)
- 类选择器(class selectors)
- id选择器(id selectors)
- 属性选择器(attribute selectors)
- 组合(combinators)
- 伪类(pseudo-classes)
- 伪元素(pseudo-elements)

3.1. 统配选择器

通用选择器( universal selector )
- 所有的元素都会被选中;
一般用来给所有元素作一些通用性的设置
- 比如内边距、外边距
- 比如重置一些内容;
效率比较低，尽量不要使用;

3.2. 简单选择器(重要)

简单选择器是开发中用的最多的选择器:
- 元素选择器( type selectors ), 使用 元素的名称; div
- 类选择器( class selectors ), 使用 .类名 ; .class
- id选择器( id selectors ), 使用 #id; #id

id注意事项

一个 HTML 文档里面的 id值 是 唯一 的，不能重复
- id 值 如果由多个单词组成，单词之间可以用 中划线-、下划线_ 连接，也可以使用 驼峰标识
- 最好不要用标签名作为 id 值

◼ 中划线又叫 连字符(hyphen)

3.3. 属性选择器

拥有某一个属性 [att]
属性等于某个值 [att=val]

其他了解的(不用记)
- [attr*=val]: 属性值包含某一个值val;
- [attr^=val]: 属性值以val开头;
- [attr$=val]: 属性值以val结尾;
- [attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-;
- [attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;

3.4. 后代选择器(重要)

后代选择器一: 所有的后代(直接/间接的后代)
- 选择器之间以空格分割

后代选择器二:直接子代选择器(必须是直接子代)
- 选择器之间以 > 分割;

3.5. 兄弟选择器

兄弟选择器一:相邻兄弟选择器 +
- 使用符号 + 连接

兄弟选择器二:普遍兄弟选择器 ~（选的是后面的）
使用符号 ~ 连接

3.6. 选择器组(重要)

交集选择器

div.box

既是一个div, 也必须有一个 class 为box

并集选择器

div, p, h1 {}

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)
- 在开发中通常为了 精准的选择某一个元素;

并集选择器: 符合一个选择器条件即可 (两个选择器以,号分割)
- 在开发中通常为了给多个元素设置相同的样式;

3.7. 伪类

伪类的由来(概念)

动态伪类

hover

了解

link

visited

focus

hover

active

什么是伪类呢?
- Pseudo-classes: 翻译过来是伪类;
- 伪类是 选择器的一种，它用于选择处于特定状态的元素;

◼ 比如我们经常会实现的: 当手指放在一个元素上时, 显示另外一个颜色;

伪类(pseudo-classes)

常见的伪类有

动态伪类 (dynamic pseudo-classes)
- :link、:visited、:hover、:active、:focus
目标伪类 (target pseudo-classes)
- :target
语言伪类(language pseudo-classes)
- :lang()
元素状态伪类(UI element states pseudo-classes)
- :enabled、:disabled、:checked
结构伪类(structural pseudo-classes)(后续学习)
- :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
- :first-child、:last-child、:first-of-type、:last-of-type
- :root、:only-child、:only-of-type、:empty
否定伪类(negation pseudo-classes)(后续学习)
- :not()
所有的伪类: developer.mozilla.org/zh-CN/docs/…

动态伪类(dynamic pseudo-classes)

使用举例

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接(鼠标在链接上长按住未松开)

使用注意

:hover必须放在 :link 和 :visited 后面才能完全生效
:active 必须放在 :hover 后面才能完全生效
所以建议的编写顺序是 :link、:visited、:hover、:active

除了 a元素， :hover 、:active 也能用在其他元素上

动态伪类 - `: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

伪元素(pseudo-elements)

常用的伪元素有
- :first-line、::first-line
- :first-letter、::first-letter
- :before、::before //重点
- :after、::after //重点
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如 ::first-line

伪元素 - `::first-line` - `::first-letter`(了解)

::first-line 可以针对首行文本设置属性
::first-letter 可以针对首字母设置属性

伪元素 - `::before` 和 `::after` (常用)

::before 和 ::after 用来在一个元素的 内容之前或之后插入 其他内容(可以是文字、图片)
- 常通过 content 属性 来为一个元素添加修饰性的内容。
使用伪元素的过程中，不要将 content 省略，如果没有文字就用 content: ""。
如果位置不对的话可以用相对定位来进行微调 position: relative; left: 5px; top: 2px;
如果要设置宽和高，先把它变成一个 div ：display: inline-block;

2.1. CSS属性继承

CSS的某些属性具有继承性( Inherited ):
- 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
- 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
如何知道一个属性是否具有继承性呢?
- 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
  - 一般和文本/字体相关的很多属性都具备继承;
- 这些不用刻意去记, 用的多自然就记住了;
- xmind、多查文档
另外要多学会查阅文档,文档中每个属性都有标明其继承性的

可以强制继承
- `item : inherit`

常见的继承属性有哪些呢?(不用记)

2.2. CSS属性层叠

一个CSS属性可以多次设置:

* 判断一: 权重, 优先级;
* 判断二: 先后顺序;

常见的选择器:

* !important -> 10000
* 内联 -> 1000
* id -> 100
* 类/伪类/属性 -> 10
* 元素 -> 1
* 统配 -> 0

CSS的翻译是层叠样式表,什么是层叠呢?
- 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
- 那么属性会被一层层覆盖上去;
- 但是最终只有一个会生效;
那么多个样式属性覆盖上去,哪一个会生效呢?
- 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
- 判断二: 先后顺序, 权重相同时, 后面设置的生效;
那么如何知道元素的权重呢?

选择器的权重

按照经验，为了方便比较CSS属性的优先级，可以给CSS属性所处的环境定义一个权值(权重)
- !important:10000
- 内联样式:1000
- id选择器:100
- 类选择器、属性选择器、伪类:10
- 元素选择器、伪元素:1
- 通配符:0

2.3. 元素的类型

* div -> 块级元素
* span -> 行内级
* 有本质的区别 -> display: block
* span -> 块级
* div -> 行内级

display:

* block
  * 独占一行(父元素)
  * 可以设置宽度和高度
  * 默认高度是内容的高度
* inline-block
  * 和其他行内级元素在同一行显示
  * 可以设置宽度和高度
  * 默认宽高由内容决定
* inline
  * 和其他行内级元素在同一行显示
  * 不能设置宽度和高度
  * 宽高由内容决定

在前面我们会经常提到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属性而已;

那么我们是否可以通过 display 来改变元素的特性呢?
- 当然可以!

2.4. 元素的隐藏方法

* display: none
* visibility: hidden
* rgba -> alpha
* opacity -> 设置透明度
  * 所有的子元素都会跟着一起设置

CSS中有个 display 属性，能修改元素的显示类型，有 4 个常用值
- block:让元素显示为块级元素
- inline:让元素显示为行内级元素
- inline-block:让元素同时具备行内级、块级元素的特征
- none:隐藏元素
事实上 display 还有其他的值, 比如 flex , 后续会专门学习;

display值的特性(非常重要)

block元素:
- 独占父元素的一行
- 可以随意设置宽高
- 高度默认由内容决定
inline-block元素:
- 跟其他行内级元素在同一行显示
- 可以随意设置宽高
- 可以这样理解
  - ✓ 对外来说，它是一个行内级元素
  - ✓ 对内来说，它是一个块级元素
inline:
- 跟其他行内级元素在同一行显示;
- 不可以随意设置宽高;
- 宽高都由内容决定;

行内替换元素（`inline-replaced`)(补充)

和其他的行内级元素在同一行显示
可以设置宽度和高度
img 是 行内替换元素 不是 行内块级元素

编写HTML时的注意事项

块级元素、inline-block元素
- 一般情况下，可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)
- 特殊情况，p元素不能包含其他块级元素
行内级元素(比如a、span、strong等)
- 一般情况下，只能包含行内级元素

元素隐藏方法

方法一: display 设置为 none
- 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
方法二: visibility设置为hidden
- 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
- 默认为visible, 元素是可见的;
方法三: rgba 设置颜色,将 a 的值设置为0
- rgba的 a 设置的是 alpha值, 可以设置透明度, 不影响子元素;
方法四: opacity 设置透明度,设置为 0
- 设置整个元素的透明度, 会影响所有的子元素;

CSS样式不生效技巧

为何有时候编写的 CSS 属性不好使，有可能是因为
- 选择器的优先级太低
- 选择器没选中对应的元素
CSS属性的使用形式不对
- ✓ 元素不支持此 CSS 属性，比如 span 默认是不支持 width 和 height 的
- ✓ 浏览器不支持此 CSS 属性，比如旧版本的浏览器不支持一些 css module3 的某些属性
- ✓ 被同类型的 CSS 属性覆盖，比如 font 覆盖 font-size
建议
- 充分利用浏览器的开发者工具进行调试(增加、修改样式)、查错

2.5. overflow

* visible
* hidden
* scroll
* auto

overflow: 用于控制内容溢出时的行为
visible:溢出的内容照样可见
hidden:溢出的内容直接裁剪
scroll:溢出的内容被裁剪，但可以通过滚动机制查看
- 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto:自动根据内容是否溢出来决定是否提供滚动机制

2.6. HTML嵌套的规范

* 块级/行内块级可以嵌套其他元素
* p元素不能嵌套div元素
* 行内级元素不能嵌套块级元素

三. 盒子模型

3.1. 认识盒子模型

* 照片墙
* HTML元素都是盒子
* 盒子模型组成属性:
  * content
  * padding
  * border
  * margin

3.2. content

* width/height
* width: auto
* min-width/max-width

设置内容是通过宽度和高度设置的:
- 宽度设置: width
- 高度设置: height
注意: 对于行内级非替换元素来说, 设置宽高是无效的!
另外我们还可以设置如下属性:
- min-width:最小宽度，无论内容多少，宽度都大于或等于min-width
- max-width:最大宽度，无论内容多少，宽度都小于或等于max-width
- 移动端适配时, 可以设置最大宽度和最小宽度;
下面两个属性不常用:
- min-height:最小高度，无论内容多少，高度都大于或等于min-height
- max-height:最大高度，无论内容多少，高度都小于或等于max-height

3.3. padding

内边距:
* 四个方法
* padding
  * 4/3/2/1

padding属性用于设置盒子的内边距 , 通常用于设置边框和内容之间的间距;
padding包括四个方向,所以有如下的取值:
- padding-top:上内边距
- padding-right:右内边距
- padding-bottom:下内边距
- padding-left:左内边距
padding 单独编写是一个缩写属性:
- padding-top、padding-right、padding-bottom、padding-left的简写属性
- padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
padding 并非必须是四个值,也可以有其他值;

3.4. border

边框

* width
* style
* color

```css
div {
  border: 10px solid red;
}
```

设置边框的方式

边框宽度
- border-top-width、border-right-width、border-bottom-width、border-left-width
- border-width 是上面4个属性的简写属性
边框颜色
- border-top-color、border-right-color、border-bottom-color、border-left-color
- border-color是上面4个属性的简写属性
边框样式
- border-top-style、border-right-style、border-bottom-style、border-left-style
- border-style是上面4个属性的简写属性

边框的样式设置值

边框的样式有很多,我们可以了解如下的几个:
groove:凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
ridge:山脊, 和 grove 相反，边框看上去好象是从画布中凸出来

同时设置的方式

如果我们相对 某一边 同时设置 宽度 样式 颜色,可以进行如下设置:
border-top
border-right
border-bottom
border-left
border : 统一设置 4 个方向的边框

3.5. border-radius

圆角:

* 具体的值, 比如6px
* 百分比 -> border box(了解)
  * 50%

border-radius 用于设置盒子的圆角
border-radius 常见的值 :
- 数值: 通常用来设置 小的圆角, 比如 6px;
- 百分比: 通常用来设置一定的弧度或者圆形;

border-radius补充

border-radius 事实上是一个缩写属性:
- 将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
- 开发中比较少见一个个圆角设置;
如果一个元素是正方形, 设置 border-radius 大于或等于50% 时，就会变成一个 圆.

一. 盒子模型

1.1. margin

* margin的设置问题
  * top/right/bottom/left
* margin和padding的选择
* margin的传递和折叠
  * 父子的传递
  * 兄弟的折叠
* margin进行水平居中
  * 0 auto;

外边距 - `margin`

margin属性用于设置盒子的外边距,通常用于元素和元素之间的间距;
margin包括四个方向,所以有如下的取值:
- margin-top:上内边距
- margin-right:右内边距
- margin-bottom:下内边距
- margin-left:左内边距
margin单独编写是一个缩写属性:
- margin-top、margin-right、margin-bottom、margin-left的简写属性
- margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
margin也并非必须是四个值, 也可以有其他值;

`margin` 的其他值

上下 `margin` 的传递

margin-top传递
- 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的 margin-top 值会传递给父元素
margin-bottom传递
- 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是 auto ，那么这个块级元素的 margin-bottom 值会传递给父元素
如何防止出现传递问题?
- 给父元素设置 padding-top\padding-bottom
- 给父元素设置border
- 触发BFC: 设置 overflow 为 auto（Block formating context）
建议
- margin一般是用来设置兄弟元素之间的间距
- padding一般是用来设置父子元素之间的间距

上下`margin`的折叠

垂直方向上相邻的2个 margin( margin-top 、 margin-bottom )有可能会合并为1个margin，这种现象叫做collapse(折叠)
水平方向上的 margin ( margin-left、margin-right)永远不会collapse
折叠后最终值的计算规则
- 两个值进行比较，取较大的值
如何防止margin collapse?
- 只设置其中一个元素的margin

上下margin折叠的情况

块级元素的居中

在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
行内级元素(包括 inline-block元素)
- 水平居中:在父元素中设置 text-align: center
块级元素
- 水平居中:margin: 0 auto

1.2. outline

* 外轮廓（很少会用到）

```css
a, input {
  outline: none;
}
```

outline 表示元素的外轮廓
- 不占用空间
- 默认 显示在border的外面
outline相关属性有
- outline-width: 外轮廓的宽度
- outline-style:取值跟border的样式一样，比如solid、dotted等
- outline-color: 外轮廓的颜色
- outline:outline-width、outline-style、outline-color的简写属性，跟border用法类似
应用实例
- 去除a元素、input元素 的 focus轮廓效果

1.3. box-shadow

box-shadow: offset-x offset-y blur-radius spread-radius color

盒子阴影 – `box-shadow`

**box-shadow **属性可以设置一个或者多个阴影
- 每个阴影用<shadow>表示
- 多个阴影之间用逗号,隔开，从前到后叠加
<shadow>的常见格式如下
- 第1个<length>:offset-x, 水平方向的偏移，正数往右偏移
- 第2个<length>:offset-y, 垂直方向的偏移，正数往下偏移
- 第3个<length>:blur-radius, 模糊半径
- 第4个<length>:spread-radius, 延伸半径
<color>:阴影的颜色，如果没有设置，就跟随color属性的颜色
inset:外框阴影变成内框阴影

盒子阴影 – 在线查看

我们可以通过一个网站测试盒子的阴影:
- html-css-js.com/css/generat…

1.4. text-shadow

text-shadow: offset offset-y blur color;

文字阴影 - `text-shadow`

text-shadow用法类似于 box-shadow ，用于给文字添加阴影效果
<shadow>的常见格式如下(没有向内)

我们可以通过一个网站测试文字的阴影:
- html-css-js.com/css/generat…

行内非替换元素的注意事项

以下属性对行内级非替换元素不起作用
- width、height、margin-top、margin-bottom
以下属性对行内级非替换元素的效果比较特殊
- padding-top、padding-bottom、上下方向的border

综合案例练习

1.5. box-sizing

content-box
border-box(常用)

CSS属性 - `box-sizing`

box-sizing 用来设置盒子模型中宽高的行为
content-box
- padding、border都布置在width、height外边
border-box
- padding、border都布置在width、height里边

`box-sizing: content-box`

元素的实际占用宽度 = border + padding + width
元素的实际占用高度 = border + padding + height

`box-sizing: border-box`

元素的实际占用宽度 = width
元素的实际占用高度 = height

IE盒子模型

1.6. 注意事项

* width/height/margin-top/margin-bottom 对于行内非替换元素是无效的
* padding-top/bottom, border-top/bottom 对于行内非替换元素有特殊效果

1.7. 水平居中

* 行内级元素
  * text-align: center
* 块级元素 有宽度
  * margin: 0 auto;

元素的水平居中方案

在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
行内级元素(包括 inline-block元素)
- 水平居中:在父元素中设置 text-align: center
块级元素
- 水平居中:margin: 0 auto

二. 案例练习

2.1. 京东小按钮

<!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>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    /* a样式 */
    .btn {
      display: inline-block;
      width: 70px;
      height: 25px;

      /* 水平和垂直居中 */
      line-height: 25px;
      text-align: center;
      
      border-radius: 13px;
    }

    .btn:hover {
      background-color: #c81623;
      color: #fff;
    }

    .new {
      background-color: #e1251b;
      color: #fff;
    }

    .vip {
      background-color: #363634;
      color: #e5d790;
    }

  </style>
</head>
<body>
  
  <!-- 新人福利 -->
  <a class="btn new" href="https://xinren.jd.com/?channel=99#/home" target="_blank">新人福利</a>
  <a class="btn vip" href="https://passport.jd.com/new/login.aspx" target="_blank">PLUS会员</a>

</body>
</html>

2.2. 小米的商品

<!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>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/demo02.css">
  <style>
    body {
      text-align: center;
    }
  </style>
</head>
<body>
  
  <a class="item" href="https://www.mi.com/xiaomipad5pro" target="_blank">
    <img src="../images/xiaomi01.webp" alt="">
    <h3 class="title">小米平板5 Pro</h3>
    <p class="desc">
      全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
    </p>
    <div class="price">
      <span class="new-price">2399元起</span>
      <span class="old-price">2499元</span>
    </div>
  </a>

</body>
</html>

2.3. B站视频展示

<!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>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    a {
      display: block;
    }

    .item {
      width: 300px;
      margin: 0 auto;
    }

    .item .album img {
      width: 100%;
      border-radius: 8px;
    }

    .item .info p {
      font-size: 15px;
      margin-top: 8px;

      /* 显示一行 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical; */
    }

    .item .info .anchor {
      font-size: 13px;
      color: #888;
      margin-top: 5px;
    }

    .item .info .anchor::before {
      content: url(../images/widget-up.svg);
      display: inline-block;
      width: 16px;
      height: 16px;
      position: relative;
      top: 1px;
    }
  </style>
</head>
<body>
  
  <div class="item">
    <div class="album">
      <a href="#">
        <img src="https://i0.hdslb.com/bfs/archive/9c763bf06b7765462eac62cc0a9a34b260d3f9c8.jpg@672w_378h_1c.webp" referrerpolicy="no-referrer" alt="">
      </a>
    </div>
    <div class="info">
      <a href="#">
        <p>萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？</p>
      </a>
      <a class="anchor" href="#">
        <span class="nickname">Muxi慕喜咩</span>
        <span class="time">3-20</span>
      </a>
    </div>
  </div>

</body>
</html>

显示省略号

/* 显示一行 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 
*/

三. 背景设置

3.1. background-image

background-image用于设置元素的背景图片
- 会盖在(不是覆盖) background-color的上面
如果设置了多张图片
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
注意:如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

3.2. background-repeat

background-repeat 用于设置背景图片是否要平铺
常见的设值有
- repeat:平铺
- no-repeat:不平铺
- repeat-x:只在水平方向平铺
- repeat-y:只在垂直平方向平铺

3.3. background-size

background-size 用于设置背景图片的大小
- auto:默认值, 以背景图本身大小显示
- cover:缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
- contain:缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
- <percentage>:百分比，相对于背景区(background positioning area)
- length:具体的大小，比如100px

3.4. background-position

background-position 用于设置背景图片在水平、垂直方向上的具体位置
- 可以设置具体的数值 比如 20px 30px;
- 水平方向还可以设值:left、center、right
- 垂直方向还可以设值:top、center、bottom
- 如果只设置了1个方向，另一个方向默认是center

3.5. background-attachment

background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
可以设置以下3个值
- scroll:此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动
- local:此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
- fixed:此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

3.6. background

background是一系列背景相关属性的简写属性

常用格式是

background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
其他属性也都可以省略，而且顺序任意

3.7. background-image和img区别和选择

利用 background-image 和 img 都能够实现显示图片的需求，在开发中该如何选择?

总结
- img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
- background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息

一. 列表元素

列表的实现方式

事实上现在很多的列表功能采用了不同的方案来实现:
- 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
- 方案二: 使用列表元素, 使用元素语义化的方式实现;
事实上现在很多的网站对于列表元素没有很强烈的偏好,更加不拘一格,按照自己的风格来布局:
- 原因是列表元素默认的CSS样式, 让它用起来不是非常方便;
- 比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等;
- 虽然我们可以通过重置来解决, 但是我们更喜欢自由的div;
HTML提供了3组常用的用来展示列表的元素
- 有序列表:ol、li
- 无序列表:ul、li
- 定义列表:dl、dt、dd

1.1. 三种列表

有序列表 – `ol – li`

* ol > li
* ul > li
* dl > dt > dd

ol( ordered list )
- 有序列表，直接子元素只能是 li
li(list item)
- 列表中的每一项

无序列表 – `ul - li`

ul(unordered list)
- 无序列表，直接子元素只能是li
li(list item)
- 列表中的每一项

定义列表 – `dl – dt - dd`

dl( definition list )
- 定义列表，直接子元素只能是dt、dd
dt ( definition term )
- term 是项的意思, 列表中每一项的项目名
dd( definition description )
- 列表中每一项的具体描述，是对 dt 的描述、解释、补充
- 一个 dt 后面一般紧跟着 1 个或者多个 dd

1.2. 列表案例

总结思路

二. table元素

在网页中,对于某些内容的展示使用表格元素更为合适和方便

2.1. table常见

* table
* tr
* td

编写表格最常见的是下面的元素:
table
- 表格
tr(table row)
- 表格中的行
td(table data)
- 行中的单元格
另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了

2.2. 案例练习

股票表格

table {
    border-collapse: collapse;
}

这里我们需要用到一个非常重要的属性:
- border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。
- table { border-collapse: collapse; }
- 合并单元格的边框

2.3. table元素

* thead
* tbody
* tfoot
* caption
* th

thead
- 表格的表头
tbody
- 表格的主体
tfoot
- 表格的页脚
caption
- 表格的标题
th
- 表格的表头单元格

2.4. 单元格合并

* colspan
* rowspan
* 练习: 课程表

在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的
- 一个单元格可能会跨多行或者多列来使用;

这个时候我们就要使用单元格合并来完成;

如何使用单元格合并呢?

单元格合并分成两种情况:
跨列合并: 使用colspan
- ✓ 在最左边的单元格写上colspan属性, 并且省略掉合并的td;
跨行合并: 使用rowspan
- ✓ 在最上面的单元格协商rowspan属性, 并且省略掉后面 tr 中的 td;

2.5. 作业

三. 表单元素

3.1. 常见表单

* input
* form
* label
* select/option
* textarea

form
- 表单, 一般情况下，其他表单相关元素都是它的后代元素
input
- 单行文本输入框、单选框、复选框、按钮等元素
textarea
- 多行文本框
select、option
- 下拉选择框
button
- 按钮
label
- 表单元素的标题

3.2. input元素

type
- text
- password
- time
- date
disabled/autofoucs/readonly
MDN文档
boolean属性写法

input元素的使用

表单元素使用最多的是 input 元素
input元素有如下常见的属性:
type: input的类型
- text:文本输入框(明文输入)
- password:文本输入框(密文输入)
- radio:单选框
- checkbox:复选框
- button:按钮
- reset:重置
- submit:提交表单数据给服务器
- file:文件上传
readonly:只读
disabled:禁用
checked:默认被选中
- 只有当 type 为 radio 或 checkbox 时可用
autofocus:当页面加载时，自动聚焦
name:名字
- 在提交数据给服务器时，可用于区分数据类型
value:取值
- type类型的其他取值和 input 的其他属性, 查看文档:
- developer.mozilla.org/zh-CN/docs/…

布尔属性(boolean attributes)

常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
布尔属性可以没有属性值，写上属性名就代表使用这个属性
- 如果要给布尔属性设值，值就是属性名本身

3.3. input模拟按钮

* 三种按钮
  * 普通
  * 重置
  * 提交
* button

表单可以实现按钮效果:
- 普通按钮(type=button):使用value属性设置按钮文字
- 重置按钮(type=reset):重置它所属form的所有表单元素(包括input、textarea、select)
- 提交按钮(type=submit):提交它所属form的表单数据给服务器(包括input、textarea、select)

我们也可以通过按钮来实现:

3.4. input和label结合

label元素一般跟input配合使用，用来表示input的标题
labe可以跟某个input绑定，点击label就可以激活对应的input变成选中

3.5. radio/checkbox

* name
* value

radio的使用

我们可以将type类型设置为 radio 变成 单选框:
- name值相同的 radio 才具备单选功能

checkbox的使用

我们可以将type类型设置为checkbox变成多选框:
- 属于同一种类型的checkbox，name值要保持一致

3.6. textarea/select/option

textarea的使用

textarea的常用属性:
- cols:列数
- rows:行数
缩放的CSS设置
- 禁止缩放:resize: none;
- 水平缩放:resize: horizontal;
- 垂直缩放:resize: vertical;
- 水平垂直缩放:resize: both;

select和option的使用

option是select的子元素，一个option代表一个选项
select常用属性
- multiple:可以多选
- size:显示多少项
option常用属性
- selected:默认被选中

3.7. form表单

* action 服务器地址
* method
  * get/post
* target
* 模拟百度一下

form通常作为表单元素的父元素:
- form可以将整个表单作为一个整体来进行操作;
- 比如对整个表单进行重置;
- 比如对整个表单的数据进行提交;
form常见的属性如下:
action
- 用于提交表单数据的请求URL
method
- 请求方法(get和post)，默认是get
target
- 在什么地方打开URL(参考a元素的target)

请求方式的对比

四. Emmet

了解, 用到的时候知道可以这么写, 提高一点效率即可

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.
- 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低.
- VsCode内置了 Emmet语法 ,在后缀为.html/.css中输入缩写后按 Tab/Enter键即会自动生成相应代码

`>` (子代)和 `+` (兄弟)

`*` (多个)和 `^` (上一级)

`()`(分组)

属性(`id属性`、`class属性`、`普通属性`) `{}`(内容)

`$`(数字)

隐式标签

CSS Emmet

结构伪类 - `:nth-child`

:nth-child(1)
- 是父元素中的第1个子元素
:nth-child(2n)
- n代表任意正整数和0
- 是父元素中的第偶数个子元素(第2、4、6、8......个)
- 跟:nth-child(even)同义
:nth-child(2n + 1)
- n代表任意正整数和0
- 是父元素中的第奇数个子元素(第1、3、5、7......个)
- 跟:nth-child(odd)同义
nth-child(-n + 2)
- 代表前2个子元素

结构伪类 - `:nth-last-child( )`

:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
- :nth-last-child(1)，代表倒数第一个子元素
- :nth-last-child(-n + 2)，代表最后2个子元素
:nth-of-type()用法跟:nth-child()类似
- 不同点是:nth-of-type()计数时只计算同种类型的元素
:nth-last-of-type()用法跟 :nth-of-type() 类似
- 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

结构伪类 - `:nth-of-type( )`、`:nth-last-of-type( )`

其他常见的伪类(了解):
- :first-child，等同于:nth-child(1)
- :last-child，等同于:nth-last-child(1)
- :first-of-type，等同于:nth-of-type(1)
- :last-of-type，等同于:nth-last-of-type(1)
- :only-child，是父元素中唯一的子元素
- :only-of-type，是父元素中唯一的这种类型的子元素
下面的伪类偶尔会使用:
- :root，根元素，就是HTML元素
- :empty 代表里面完全空白的元素

否定伪类(negation pseudo-class)

:not()的格式是:not(x)
- x是一个简单选择器
- 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类(除否定伪类)
:not(x)表示 除x以外的元素

一. 结构伪类

1.1. nth-child

- `nth-child(2)`
- `nth-child(2n+1)`
- `nth-child(-n+5)`

结构伪类 - `:nth-child`

:nth-child(1)
- 是父元素中的第1个子元素
:nth-child(2n)
- n代表任意正整数和0
- 是父元素中的第偶数个子元素(第2、4、6、8......个)
- 跟:nth-child(even)同义
:nth-child(2n + 1)
- n代表任意正整数和0
- 是父元素中的第奇数个子元素(第1、3、5、7......个)
- 跟:nth-child(odd)同义
nth-child(-n + 2)
- 代表前2个子元素

1.2. nth-last-child/nth-of-type/nth-last-of-type

结构伪类 - `:nth-last-child( )`

:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
- :nth-last-child(1)，代表倒数第一个子元素
- :nth-last-child(-n + 2)，代表最后2个子元素
:nth-of-type()用法跟:nth-child()类似
- 不同点是:nth-of-type()计数时只计算同种类型的元素
:nth-last-of-type()用法跟 :nth-of-type() 类似
- 不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数

结构伪类 - `:nth-of-type( )`、`:nth-last-of-type( )`

其他常见的伪类(了解):
- :first-child，等同于:nth-child(1)
- :last-child，等同于:nth-last-child(1)
- :first-of-type，等同于:nth-of-type(1)
- :last-of-type，等同于:nth-last-of-type(1)
- :only-child，是父元素中唯一的子元素
- :only-of-type，是父元素中唯一的这种类型的子元素

1.3. 其他结构伪类

`first-child`

相对比较重要的两个伪类:
```css
:root => html
:empty => 小程序
```

下面的伪类偶尔会使用:
- :root，根元素，就是HTML元素
- :empty 代表里面完全空白的元素

1.4. 否定伪类

:not(简单选择器)

否定伪类(negation pseudo-class)

:not()的格式是:not(x)
- x是一个 简单选择器
- 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类(除否定伪类)
:not(x)表示 除x以外的元素

二. 额外知识补充

2.1. border的图形

三角形
旋转(后续)

假如我们将border宽度设置成50会是什么效果呢?
- 如果我们进一步, 将另外三边的颜色去除呢?
- 如果我们将这个盒子旋转呢?
所以利用border或者CSS的特性我们可以做出很多图形:
- css-tricks.com/the-shapes-…

2.2. 网络字体

* 拿到字体
* @font-face
* 使用它
* 兼容性

在之前我们有设置过页面使用的字体: font-family
- 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。
- 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的;
- 这就是所谓的 Web-safe 字体;
- 并且这种默认可选的字体并不能进行一些定制化的需求;

Web fonts的工作原理

首先, 我们需要通过一些渠道获取到希望使用的字体(不是开发来做的事情):
- 对于某些收费的字体, 我们需要获取到对应的授权;
- 对于某些公司定制的字体, 需要设计人员来设计;
- 对于某些免费的字体, 我们需要获取到对应的字体文件;
其次, 在我们的 CSS代码 当中使用该字体(重要):
- 具体的过程看后面的操作流程;
最后, 在部署静态资源时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中;
用户的角度:
- 浏览器一个网页时, 因为代码中有引入字体文件, 字体文件会被一起下载下来;
- 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体;
- 在浏览器中使用对应的字体显示内容;

使用Web Fonts

课堂上为了给大家演示，通过如下的方式获取到了字体文件:
第一步:在字体天下网站下载一个字体
- www.fonts.net.cn/fonts-zh-1.…
- 默认下载下来的是ttf文件;
第二步:使用字体;
使用过程如下:
- 1.将字体放到对应的目录中
- 2.通过@font-face来引入字体, 并且设置格式
- 3.使用字体
注意: @font-face 用于加载一个自定义的字体;

web-fonts的兼容性

我们刚才使用的字体文件是 .ttf, 它是TrueType字体.
- 在开发中某些浏览器可能不支持该字体, 所以为了浏览器的兼容性问题, 我们需要有对应其他格式的字体;
TrueType字体:拓展名是 .ttf
- OpenType/TrueType字体:拓展名是 .ttf、.otf，建立在TrueType字体之上
- Embedded OpenType字体:拓展名是 .eot， OpenType字体的压缩版
- SVG字体:拓展名是 .svg、 .svgz
- WOFF表示Web Open Font Format web开放字体: 拓展名是 .woff，建立在TrueType字体之上
这里我们提供一个网站来生产对应的字体文件:
- https://font.qqe2.com/# 暂时可用

这被称为"bulletproof @font-face syntax(刀枪不入的@font-face语法)“:
- 这是 Paul Irish 早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax)。
src用于指定字体资源
- url指定资源的路径
- format用于帮助浏览器快速识别字体的格式;

2.3. 字体图标

* 选择图标
* 下载代码
* 在项目中使用

```html
<i>字符实体</i>
<i class="iconfont icon-video"></i>
```

补充: 如果有新的图标

* 使用最新下载的字体

思考:字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢?
- 当然可以，这个就叫做字体图标。
字体图标的好处:
- 放大不会失真
- 可以任意切换颜色
- 用到很多个图标时，文件相对图片较小
字体图标的使用:
- 登录阿里icons (www.iconfont.cn/)
- 下载代码，并且拷贝到项目中
将字体文件和默认的css文件导入到项目中

字体图标的使用

字体图标的使用步骤:
- 第一步: 通过link引入iconfont.css文件
- 第二步: 使用字体图标
使用字体图标常见的有两种方式:
- 方式一: 通过对应字体图标的Unicode来显示代码;
- 方式二: 利用已经编写好的class , 直接使用即可;

2.4. CSS Sprite

将多个图标放到一张图片

使用图片
* width/height
* background-position

什么是CSS Sprite
- 是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
- 有人翻译为:CSS雪碧、CSS精灵
使用CSS Sprite的好处
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减小图片总大小
- 解决了图片命名的困扰，只需要针对一张集合的图片命名
Sprite图片制作(雪碧图、精灵图)
- 方法1: Photoshop, 设计人员提供
- 方法2: www.toptal.com/developers/…

精灵图的使用

精灵图如何使用呢?
- 精灵图的原理是通过只显示图片的很小一部分来展示的;
- 通常使用背景:
  - ✓ 1.设置对应元素的宽度和高度
  - ✓ 2.设置精灵图作为背景图片
  - ✓ 3.调整背景图片的位置来展示
如何获取精灵图的位置
- www.spritecow.com/

2.5. cursor

cursor: pointer

cursor可以设置鼠标指针(光标)在元素上面时的显示样式
cursor常见的设值有
- auto:浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
- default:由操作系统决定，一般就是一个小箭头
- pointer:一只小手，鼠标指针挪动到链接上面默认就是这个样式
- text:一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
- none:没有任何指针显示在元素上面

三. 元素定位(布局)

3.1. 对标准流的理解

标准流(Normal Flow)

默认情况下，元素都是按照normal flow( 标准流、常规流、正常流、文档流【document flow】)进行排布
- 从左到右、从上到下按顺序摆放好
- 默认情况下，互相之间不存在层叠现象

`margin-padding`位置调整

在标准流中，可以使用margin、padding对元素进行定位
- 其中margin还可以设置负数
比较明显的缺点是
- 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
- 不便于实现元素层叠的效果
如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢?
- 我们可以通过position属性来进行设置;

3.2. 元素的定位

常见的值:

* static
* relative
* absolute
* fixed
* sticky

定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为:
例如放在另一个元素的上面;
或者始终保持在浏览器视窗内的同一位置;

认识`position`属性

默认值:
- static:默认值, 静态定位
使用下面的值, 可以让元素变成定位元素(positioned element)
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
- sticky:粘性定位

静态定位 - static

position属性的默认值
- 元素按照normal flow布局
- left 、right、top、bottom没有任何作用

3.3. 相对定位

* relative
  * 相对自己原来的位置(标准流中的位置)
  * left/right/top/bottom
* 小案例
  * 3 + 2 = 5
* img居中显示(了解)
  * 背景完成

元素按照normal flow布局
可以通过left、right、top、bottom进行定位
- 定位参照对象是元素自己原来的位置
相对定位的应用场景
- 在不影响其他元素位置的前提下，对当前元素位置进行微调

3.4. 固定定位

* fixed
  * 相对视口(可视区域viewport)
  * 不会随着内容的滚动而滚动
* 练习:
  * 顶部/反馈

元素脱离normal flow(脱离标准流、脱标)
可以通过left、right、top、bottom进行定位
定位参照对象是视口(viewport)
当画布滚动时，固定不动

画布和视口

视口(Viewport)  文档的可视区域
- 如右图红框所示
画布(Canvas)
- 用于渲染文档的区域
- 文档内容超出视口范围，可以通过滚动查看
- 如右图黑框所示
宽高对比
- 画布 >= 视口

定位元素的特点

可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束
- 不再严格按照从上到下、从左到右排布
- 不再严格区分块级、行内级，块级、行内级的很多特性都会消失
不再给父元素汇报宽高数据
脱标元素内部默认还是按照标准流布局

一. 绝对定位(absolute)

1.1. 绝对定位（重点）

1.会脱离标准流
2.相对的参照对象
  * 最近的祖先定位元素;
  * 如果祖先元素都没有定位, 相对视口
3.子绝父相
  * 子元素绝对定位
  * 父元素相对定位
4.子绝父绝
  * 子元素绝对定位
  * 父元素绝对定位
5.子绝父固
  * 子元素绝对定位
  * 父元素固定定位

元素脱离 normal flow(脱离标准流、脱标)
可以通过left、right、top、bottom进行定位
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口
定位元素(positioned element)
- position值不为static的元素
- 也就是position值为relative、absolute、fixed的元素

子绝父相（了解）

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是:
- 父元素设置position: relative(让父元素成为定位元素，而且父元素不脱离标准流)
- 子元素设置position: absolute
- 简称为“子绝父相”
- 当然，也有子绝父绝子绝父固不要死记

1.2. position设置absolute/fixed特性

1.都是脱离标准流
2.可以任何设置宽度和高度
3.默认宽度高度是包裹内容
4.不再给父级元素汇报宽度和高度
5.自己内部依然按照标准流布局
6.公式
  * 包含块的width = left + right + margin-left + margin-right + width
    * left0 right0 margin 0 auto width: 200px -> 水平居中
    * left 0 right 0 margin 0 -> 宽度沾满包含块的宽度
  * 垂直方向也是一样
    * 俺也一样

将`position`设置为`absolute`/`fixed`元素的特点

可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束
- 不再严格按照从上到下、从左到右排布
- 不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)的很多特性都会消失
不再给父元素汇报宽高数据
脱标元素内部默认还是按照标准流布局
绝对定位元素(absolutely positioned element)
- position值为absolute或者fixed的元素
对于绝对定位元素来说
- 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
- 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
- left: 0、right: 0、top: 0、bottom: 0、margin:0
如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
- left: 0、right: 0、top: 0、bottom: 0、margin: auto
- 另外，还得设置具体的宽高值(宽高小于定位参照对象的宽高)

auto到底是什么?

800 = 200 + ml0 + mr0 + 0 + 0
auto -> 交给浏览器你来出来
width: auto;
1.行内非替换元素 -> width: 包裹内容
2.块级元素 -> width: 包含块的宽度
3.绝对定位元素 -> width: 包裹内容

1.3. 绝对定位案例

网易云item的练习
  * 基本布局
  * 背景
  * 绝对定位

这个案例看似简单, 但是里面涉及的知识点非常多
- 按照自己的思路一步步布局即可, 不要着急;
1.慢点做, 不要着急
2.如果有些东西做不出来, 去回顾之前的知识
3.多参考的代码

<!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>
    /* 重置代码 */
    a {
      text-decoration: none;
      color: #333;
    }

    /* 公共的CSS */
    .sprite_01 {
      background-image: url(https://img.onmicrosoft.cn/micro-code-images/music_sprite_01.png);
      display: inline-block;
    }

    .sprite_02 {
      background-image: url(https://img.onmicrosoft.cn/micro-code-images/music_sprite_02.png);
      display: inline-block;
    }

    .sprite_02_icon_music {
      width: 14px;
      height: 11px;
      background-position: 0 -24px;
    }

    .sprite_02_icon_play {
      width: 16px;
      height: 17px;
      background-position: 0 0;
    }

    /* 布局代码 */
    .item {
      width: 140px;
      margin: 0 auto;
    }

    .item .top {
      position: relative;
    }

    .item .top img {
      /* 将图片下面的多出来的区域去除 */
      vertical-align: top;
      /* display: block; */
    }

    .item .top .cover {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      background-image: url(https://img.onmicrosoft.cn/micro-code-images/music_sprite_01.png);
      background-position: 0 0;
    }

    .item .top .info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 27px;
      padding-left: 10px;
      line-height: 27px;

      font-size: 12px;
      color: #ccc;

      background-image: url(https://img.onmicrosoft.cn/micro-code-images/music_sprite_01.png);
      background-position: 0 -537px;
    }

    .item .top .info .icon-music {
      position: relative;
      top: 1px;
      /* display: inline-block; */
      /* width: 14px;
      height: 11px; */

      /* background-image: url(https://img.onmicrosoft.cn/micro-code-images/music_sprite_02.png); */
      /* background-position: 0 -24px; */
    }

    .item .top .info .count {
      margin-left: 4px;
    }

    .item .top .info .icon-play {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto 0;

      /* display: inline-block; */
      /* width: 16px;
      height: 17px; */
      /* background-image: url(https://img.onmicrosoft.cn/micro-code-images/music_sprite_02.png); */
      /* background-position: 0 0; */
    }


    /* 底部的样式 */
    .item .bottom {
      display: block;
      margin-top: 8px;
      font-size: 14px;
    }

    .item .bottom:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  
  <div class="item">
    <div class="top">
      <img src="https://img.onmicrosoft.cn/micro-code-images/music_album01.jpg" alt="音乐封面">
      <a class="cover" href="#"></a>
      <div class="info">
        <i class="sprite_02 sprite_02_icon_music icon-music"></i>
        <span class="count">62万</span>
        <i class="sprite_02 sprite_02_icon_play icon-play"></i>
      </div>
    </div>
    <a class="bottom" href="#">
      天气好的话，把耳机分给我一半吧
    </a>
    <i class="sprite_02 sprite_02_icon_play"></i>
    <i class="sprite_02 sprite_02_icon_music"></i>
  </div>

</body>
</html>

jcode

1.4. 粘性定位 sticky

* 基本演练
  * 默认相对定位
  * top: 0 -> 固定(绝对)

* top/bottom/left/right -> 最近的滚动视口

另外还有一个定位的值是position: sticky，比起其他定位值要新一些.
- sticky是一个大家期待已久的属性;
- 可以看做是相对定位和固定(绝对)定位的结合体;
- 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;
- 当达到这个阈值点时, 就会变成固定(绝对)定位;
sticky是相对于最近的滚动祖先包含滚动视口的( the nearest ancestor scroll container’s scrollport )

1.5. position多个值总结

1.6. `z-index`

* 只对定位元素有效
* 兄弟比较

z-index属性用来设置定位元素的层叠顺序(仅对定位元素有效)
- 取值可以是正整数、负整数、0
比较原则
- 如果是兄弟关系
  - ✓ z-index越大，层叠在越上面
  - ✓ z-index相等，写在后面的那个元素层叠在上面
- 如果不是兄弟关系
  - ✓ 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
  - ✓ 而且这2个定位元素必须有设置z-index的具体数值

二. 浮动

2.1. 认识浮动

float
  * none
  * left
  * right

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
- float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果;
- 但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具;
绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
可以通过float属性让元素产生浮动效果，float的常用取值
- none:不浮动，默认值
- left:向左浮动
- right:向右浮动

2.2. 浮动规则

* 规则一: 向左浮动或者向右浮动
* 规则二: 不能超出包含块;
* 规则三: 浮动元素不能层叠
* 规则四: 浮动元素会将行内级元素内容推出
  * 图文环绕效果
* 规则五: 浮动只能左右浮动, 不能超出本行的高度

浮动规则一

元素一旦浮动后, 脱离标准流
- 朝着向左或向右方向移动，直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
- 定位元素会层叠在浮动元素上面

浮动规则二

如果元素是向左(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界

浮动规则三

规则三: 浮动元素之间不能层叠
- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素(左浮找左浮，右浮找右浮)
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止

浮动规则四

浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
- 比如行内级元素、inline-block元素、块级元素的文字内容

浮动规则五

规则五: 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

2.3. 练习一 - 去除间隙

浮动常用的场景
- 解决行内级元素、inline-block元素的水平间隙问题

<!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>
    .box {
      /* font-size: 0; */
      /* display: flex; */
    }

    span {
      background-color: orange;
      /* font-size: 16px; */

      /* float: left;
      margin-right: 5px; */
    }
  </style>
</head>
<body>
  <!-- 
    将多个行内级元素中间的空格(间隙)去除的方法
      1. 删除换行符(不推荐)
      2. 将父级元素的font-size设置为0, 但是需要子元素设置回来
      3. 通过子元素(span)统一向一个方向浮动即可
      4. flex布局(还没有学习)
   -->
  
  <div class="box">
    <span>aaa</span>
    <span>bbb</span>
    <span>ccc</span>
  </div>

</body>
</html>

jcode

2.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>
    /* 样式的重置 */
    ul, li {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    a {
      text-decoration: none;
      color: #333;
    }

    /* 全局设置 */
    body {
      background-color: #f2f2f2;
    }

    /* 内容样式 */
    ul > li {
      float: left;
      margin-left: 12px;
    }

    ul > li > a {
      display: inline-block;
      width: 36px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      border-radius: 6px;
      background-color: #fff;
      color: #3951b3;
      font-size: 14px;
    }

    ul > li > a:hover, ul > li.active > a {
      background-color: blue;
      color: #fff;
    }

    ul > li.next > a {
      width: 80px;
    }

  </style>
</head>
<body>
  
  <!-- 结构: HTML -->
  <ul>
    <li class="item"><a href="#">1</a></li>
    <li class="item"><a href="#">2</a></li>
    <li class="item"><a href="#">3</a></li>
    <li class="item"><a href="#">4</a></li>
    <li class="item active"><a href="#">5</a></li>
    <li class="item"><a href="#">6</a></li>
    <li class="item"><a href="#">7</a></li>
    <li class="item"><a href="#">8</a></li>
    <li class="item"><a href="#">9</a></li>
    <li class="item"><a href="#">10</a></li>
    <li class="item next"><a href="#">下一页 &gt;</a></li>
  </ul>

</body>
</html>

jcode

2.5. 练习三 - 京东多列布局

浮动布局方案:
- 实现京东页面下面的布局
这个注意听，讲到了 负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>
    /* 公共的class */
    .content {
      width: 1190px;
      margin: 0 auto;
      background-color: orange;
      height: 800px;
    }

    /* 布局样式 */
    .box {
      /* margin: 0 -5px; */
      /* 3.方案三: 设置负的的margin(没有兼容性) */
      margin-right: -10px;
    }

    .item {
      width: 230px;
      height: 322px;
      background-color: purple;
      color: #fff;

      /* 浮动 */
      float: left;
      margin-right: 10px;
      /* margin: 0 5px; */
    }

    /* 1.有可能存在兼容性 */
    /* .item:nth-child(5n) {
      margin-right: 0;
    } */
    
    /* 2.麻烦一点点 */
    /* .item.last-item {
      margin-right: 0;
    } */
  </style>
</head>
<body>
  
  <div class="content">
    <div class="box">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
  </div>

</body>
</html>

jcode

一. 浮动float

1.1. 两个案例

* 自己做一下
* 第二个边框不要现在必须学会

浮动练习三

浮动布局方案:
- 实现京东页面下面的布局

<!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>
    .content {
      width: 1190px;
      margin: 0 auto;
      background-color: #f00;
      height: 1000px;
    }

    .wrapper {
      margin-right: -10px;
    }

    .item {
      width: 290px;
      background-color: purple;
      margin-bottom: 10px;

      float: left;
      margin-right: 10px;
    }

    .item.left {
      height: 370px;
    }

    .item.right {
      height: 180px;
    }
  </style>
</head>
<body>
  
  <div class="content">
    <div class="wrapper">
      <div class="item left"></div>
      <div class="item left"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
      <div class="item right"></div>
    </div>
  </div>

</body>
</html>

{% raw %}

`, } }, }) {% endraw %}

浮动练习四

浮动布局方案:
- 实现考拉页面下面的布局

<!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>
    .content {
      width: 1100px;
      margin: 0 auto;
      height: 800px;
      background: #ccc;
    }

    .box {
      /* margin-left: 1px; */
    }

    .item {
      width: 221px;
      height: 168px;
      background: orange;
      color: #fff;

      float: left;

      border: 1px solid #000;
      margin-right: -1px;

      box-sizing: border-box;
    }

    .item.first {
      width: 220px;
    }
  </style>
</head>
<body>
  
  <div class="content">
    <div class="box">
      <div class="item first">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>

</body>
</html>

{% raw %}

`, } }, }) {% endraw %}

1.2. 清除浮动

伪元素:after

浮动的问题 – 高度塌陷

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
- 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
解决父元素高度坍塌问题的过程，一般叫做清浮动(清理浮动、清除浮动)
清浮动的目的是
- 让父元素计算总高度的时候，把浮动子元素的高度算进去
如何清除浮动呢? 使用clear属性

CSS属性 - clear

clear属性是做什么的呢?
- clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面;
clear的常用取值
- left:要求元素的顶部低于之前生成的所有左浮动元素的底部
- right:要求元素的顶部低于之前生成的所有右浮动元素的底部
- both:要求元素的顶部低于之前生成的所有浮动元素的底部
- none:默认值，无特殊要求
那么我们可以利用这个特性来清除浮动.

清除浮动的方法

事实上我们有很多方法可以清除浮动
方法一: 给父元素设置固定高度
- 扩展性不好(不推荐)
方法二: 在父元素最后增加一个空的块级子元素，并且让它设置clear: both
- 会增加很多无意义的空标签，维护麻烦
- 违反了结构与样式分离的原则(不推荐)
方法三: 给父元素添加一个伪元素
- 推荐;
- 编写好后可以轻松实现清除浮动;

方法三 – 伪元素清除浮动

给父元素增加::after伪元素
- 纯CSS样式解决，结构与样式分离(推荐)

/* 父级元素 */
.clearfix:after{
  content: '';
  display: block;
  clear: both;
  /* 浏览器兼容问题 */
  visibility: hidden;
  height: 0;
}

1.3. 多种布局对比

标准流
定位
浮动

二. flex布局

2.1. 认识flex布局

认识flexbox

Flexbox翻译为弹性盒子:
- 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
- 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;
- 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);
flex布局是目前web开发中使用最多的布局方案:
- flex 布局(Flexible 布局，弹性布局);
- 目前特别在移动端可以说已经完全普及;
- 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;
为什么需要flex布局呢?
- 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。
- 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;

原先的布局存在的痛点

原来的布局存在哪些痛点呢? 举例说明:
- 比如在父内容里面垂直居中一个块内容。
- 比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。
- 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

flex布局的出现

所以长久以来, 大家非常期待一种真正可以用于对元素布局的方案: 于是flex布局出现了;
- Nature and nature's laws lay hid in night; God said "Let Newton be" and all was light.
- 自然与自然的法则在黑夜隐藏，于是上帝说，让牛顿出现吧!于是世界就明亮了起来.
flexbox在使用时, 我们最担心的是它的兼容性问题:
- 我们可以在caniuse上查询到具体的兼容性

2.2. flex布局重要的概念

* flex container
* flex item
* main axis/cross axios
* main start/main end/cross start / cross end

两个重要的概念:
- 开启了 flex 布局的元素叫 flex container
- flex container 里面的直接子元素叫做 flex item
当flex container中的子元素变成了flex item时, 具备一下特点:
- flex item的布局将受flex container属性的设置来进行控制和布局;
- flex item不再严格区分块级元素和行内级元素;
- flex item 默认情况下是包裹内容的, 但是可以设置宽度和高度;
设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
- flex: flex container 以 block-level 形式存在
- inline-flex: flex container 以 inline-level 形式存在

flex布局的模型

2.3. flex container中的属性

◼ 应用在 flex container 上的 CSS 属性
* flex-flow       * flex-direction
* flex-wrap       * flex-flow
* justify-content * align-items
* align-content
◼ 应用在 flex items 上的 CSS 属性 
* flex-grow       * flex-basis
* flex-shrink     * order
* align-self 			* flex

`flex-direction`

flex items 默认都是沿着 main axis(主轴)从 main start 开始往 main end 方向排布
- flex-direction 决定了 main axis 的方向，有 4 个取值
- row(默认值)、row-reverse、column、column-reverse

`flex-wrap`

flex-wrap 决定了 flex container 是单行还是多行
- nowrap(默认):单行
- wrap:多行
- wrap-reverse:多行(对比 wrap，cross start 与 cross end 相反)

`flex-flow`

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
- 顺序任何, 并且都可以省略;

`justify-content`

justify-content 决定了 flex items 在 main axis 上的对齐方式
- flex-start(默认值):与 main start 对齐
- flex-end:与 main end 对齐
- center:居中对齐
- space-between: ✓ flex items 之间的距离相等 ✓ 与 main start、main end两端对齐
- space-around: ✓ flex items 之间的距离相等 ✓ flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
- space-evenly: ✓ flex items 之间的距离相等 ✓ flex items 与 main start、main end 之间的距离等于 flex items 之间的距离

`align-item`

align-items 决定了 flex items 在 cross axis 上的对齐方式
- normal:在弹性布局中，效果和stretch一样
- stretch:当 flex items 在 cross axis 方向的 size 为 auto 时，会自动拉伸至填充 flex container
- flex-start:与 cross start 对齐
- flex-end:与 cross end 对齐
- center:居中对齐
- baseline:与基准线对齐

`align-content`

align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似
- stretch(默认值):与 align-items 的 stretch 类似
- flex-start:与 cross start 对齐
- flex-end:与 cross end 对齐
- center:居中对齐
- space-between: ✓ flex items 之间的距离相等 ✓ 与 cross start、cross end两端对齐
- space-around: ✓ flex items 之间的距离相等 ✓ flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
- space-evenly: ✓ flex items 之间的距离相等 ✓ flex items 与 cross start、cross end 之间的距离等于 flex items 之间的距离

2.4. flex item中的属性

* order        * align-self
* flex-grow    * flex-shrink
* flex-basis   * flex

flex-item属性 - `order`

order 决定了 flex items 的排布顺序
- 可以设置任意整数(正整数、负整数、0)，值越小就越排在前面
- 默认值是 0

flex-item属性 - `flex items`

flex items 可以通过 align-self 覆盖 flex container 设置的 align-items
- auto(默认值):遵从 flex container 的 align-items 设置
- stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

flex-item属性 - `flex-grow`

flex-grow 决定了 flex items 如何扩展(拉伸/成长)
- 可以设置任意非负数字(正小数、正整数、0)，默认值是 0
- 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为
- flex container 的剩余 size * flex-grow / sum
flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-item属性 - `flex-shrink`

flex-shrink 决定了 flex items 如何收缩(缩小)
- 可以设置任意非负数字(正小数、正整数、0)，默认值是 1
- 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为
- flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和
flex items 收缩后的最终 size 不能小于 min-width\min-height

flex-item属性 - `flex-basis`

flex-basis 用来设置 flex items 在 main axis 方向上的 base size
- auto(默认值)、具体的宽度数值(100px)
决定 flex items 最终 base size 的因素，从优先级高到低
- max-width\max-height\min-width\min-height
- flex-basis
- width\height
- 内容本身的 size

flex-item属性 - `flex属性`

flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。

单值语法: 值必须为以下其中之一:
- 一个无单位数(<number>): 它会被当作<flex-grow>的值。
- 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。
- 关键字none，auto或initial.
双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
- 第二个值必须为以下之一:
  
  ✓ 一个无单位数:它会被当作<flex-shrink>的值。
  
  ✓ 一个有效的宽度值: 它会被当作 <flex-basis> 的值。
三值语法:
- 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
- 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink>的值。
- 第三个值必须为一个有效的宽度值，并且它会被当作<flex-basis>的值。

CSS ｜ 青训营笔记

2.1. 认识CSS

CSS的历史

CSS如何编写呢?

如何将CSS样式应用到元素上?

2.3. 三种编写规则

内联样式(inline style)

内部样式表(internal style sheet)

外部样式表(external style sheet)

@import

2.4. CSS中的注释

2.5. 常见的CSS

必须掌握的CSS属性

CSS属性的官方文档

目前需要掌握的CSS属性

CSS属性- background-color

CSS属性- color

2.6. 案例练习

三. 知识点补充

3.1. link元素

3.2. 进制

认识进制

人类的十进制

计算机中的进制

进制之间的转换(课下了解)

3.3. 颜色表示方法

RGB的表示方法

3.4. Chrome调试工具

3.5. 浏览器的渲染流程

一. CSS属性 - 文本

1.1. text-decoration (常用)

1.2. text-transform(了解)

1.3. text-indent(一般)

1.4. text-align(重要)

1.5. letter-word-spacing(一般)

二. CSS属性 - 字体

2.1. font-size(高度)

2.2. font-family(重要,不过一般仅设置一次)

2.3. font-weight(重要)

2.4. font-style(一般)

2.5. font-varient(了解)

2.6. line-height(常用)

2.7. font缩写属性

三. CSS选择器

CSS选择器(selector)

3.1. 统配选择器

3.2. 简单选择器(重要)

id注意事项

3.3. 属性选择器

3.4. 后代选择器(重要)

3.5. 兄弟选择器

3.6. 选择器组(重要)

3.7. 伪类

伪类(pseudo-classes)

动态伪类(dynamic pseudo-classes)

动态伪类 - :focus

伪元素(pseudo-elements)

伪元素 - ::first-line - ::first-letter(了解)

伪元素 - ::before 和 ::after (常用)

2.1. CSS属性继承

常见的继承属性有哪些呢?(不用记)

2.2. CSS属性层叠

选择器的权重

2.3. 元素的类型

通过CSS修改元素类型

2.4. 元素的隐藏方法

display值的特性(非常重要)

行内替换元素（inline-replaced)(补充)

编写HTML时的注意事项

元素隐藏方法

CSS样式不生效技巧

2.5. overflow

2.6. HTML嵌套的规范

三. 盒子模型

3.1. 认识盒子模型

3.2. content

3.3. padding

3.4. border

设置边框的方式

边框的样式设置值

CSS ｜青训营笔记

动态伪类 - `:focus`

伪元素 - `::first-line` - `::first-letter`(了解)

伪元素 - `::before` 和 `::after` (常用)

行内替换元素（`inline-replaced`)(补充)

外边距 - `margin`

`margin` 的其他值

上下 `margin` 的传递

上下`margin`的折叠

盒子阴影 – `box-shadow`

文字阴影 - `text-shadow`

CSS属性 - `box-sizing`

`box-sizing: content-box`

`box-sizing: border-box`

有序列表 – `ol – li`

无序列表 – `ul - li`

定义列表 – `dl – dt - dd`

`>` (子代)和 `+` (兄弟)