1、三种样式表

● 内部样式表：一般写在head元素中

● 内联样式表：元素的全局属性style中

● 外部样式表：一般在head元素中（推荐）

<link rel="stylesheet" href="../../css/index.css">

2、css代码语法

css语法=选择器+申明块

● 选择器

① 基础选择器

对将来学习Python爬虫很有帮助

I、元素选择器 elementname

本色出演，不需要加其他字符。

II、类选择器 .classname

点不能省略

III、ID选择器 #idname

井号不能省略

② 属性选择器 elementname[attr]

③ 伪类选择器

选中某些元素的某种状态

I、link：超链接未访问时的状态

II、visted：超链接访问后的状态

III、hover：鼠标悬停的状态

IV、激活状态，鼠标按下状态

爱恨法则：love hate

④ 关系选择器

I、邻近兄弟元素选择器 A + B

作用 only one 元素。A跟B有同一个“父亲”，B紧跟A元素，好比亲兄弟。

II、兄弟元素选择器 A ~ B

注意：是A的相邻元素。A和B有同一个“父亲”，B不必须紧跟A。

III、直接子元素选择器 A > B

直接子元素，只选择一代，不是所有的子元素都能集成A的“财产”

IV、后代元素选择器A B

A B 选择所有后代，范围更广，使用频率最高。

3、css层叠

当同一样式多次应用到同一元素时，css会通过层叠解决声明冲突

哪一种样式会最终被选中呢？

遵循的3个准则：

比较重要性 > 比较特殊性 > 比较源次序

● 比较重要性

先去掉一种特殊情况：重要声明，在属性值后加!important

● 比较特殊性

css层叠会选择特殊性最高的样式

特殊性从高到低：

内联样式 > id选择器 > 类选择器 > 元素选择器

类比场景：打扫卫生

“内联样式”的特殊性：好比老师走到Python大星面前，对他说：你负责擦窗户。

“id选择器”的特殊性：老师说学号为040105的学生打扫走道

“类选择器”的特殊性：老师说第一组打扫教室

“元素选择器”的特殊性：三年级二班打扫操场东南角

我们知道css中会出现组合的情况，这个时候怎么比较特殊性呢？

我们可以通过“积分制”来判断

“内联样式”----------------积分1000

“id选择器”----------------积分100

“类选择器”----------------积分10

“元素选择器”--------------积分1

属性选择器、伪类选择器也各自积10分；

伪元素选择器积1分

最终，谁的总积分高，就听谁的！

4、继承

● 子元素会继承父元素的所有属性吗？

儿子会继承父亲的部分基因，而不是全部基因。

● 什么情况下子元素会继承父元素的属性？

当子元素的继承属性没有指定值时，就会继承父元素同一属性

● 什么样的属性能被继承？

一般来说，跟文字内容相关的属性都能被继承，比如说font、color等属性

● 什么样的属性不能被继承？

常见的border、background等属性不能被继承

我们可以通过MDN官方文档查看css属性是否可以被继承

5、属性值的计算过程

● 什么叫确定声明值？

指样式表中没有起冲突的属性值

● 如果属性值发生冲突怎么办？

层叠冲突

● 如果某些继承属性在样式表中没有说明，会如何？

继承父元素的继承属性

● 如果是非继承属性，会如何？

使用默认值

举个栗子描绘下“属性值得计算过程”：

通缉犯画像：根据目击证人的描述，明确该罪犯带着眼镜，黄头发，此乃“确认声明值”；

该罪犯长得有点像电影明星黄X和王XX，更偏向王XX，此乃“层叠冲突”；

听口音该罪犯是东北人，可能正往北方跑，此乃“使用继承”；

肤色yellow，此乃“使用默认值”

6、盒模型

● 什么是盒模型？

我们在页面“审查”时经常看到的这个红色区域就是盒模型

● 盒模型分类

① 行盒：display属性等于inline的元素

注意：display属性是非继承属性

② 快盒：display属性等于block的元素

行盒和块盒最大的区别：

● 常见的块盒元素

容器元素、h1~h6、p

● 常见的行盒元素

span、a、img、video、audio

● 盒模型的4个组成部分

每一个颜色区域代表一个组成部分

从内到外依次是：

① 内容区，我们也叫“内容盒”

我们最最最常见的width、height设置的是盒子内容的宽高

② 填充（外边距）padding

有四个属性：

padding-left，padding-right，padding-top、padding-bottom；

这四个属性可以简写为padding。

I、padding：上 右 下 左

传四个参数，你可以想象成一个顺时针的钟

II、padding 上下 左右

传两个参数，第一个是上下边距的参数，第二个是左右边距的参数

③ 边框 border

边框样式：border-style

边框宽度：border-width

边框颜色：border-color

简写为border

④ 外边距 margin

有四个属性：

margin-left，margin-right，margin-top、margin-bottom

这四个属性可以简写为margin

使用方式和padding一样

7、盒模型应用

● 改变宽高作用范围

默认情况下，width 和 height 设置的是内容盒宽高

实际工作中，UI设计师给到是ps源文件，标注的是我们前面说到的“边框盒”的宽高。

默认情况下，我们width和height是设置的“内容盒”的宽高。

有一个“神器“” -- box-sizing 属性

box-sizing: border-box;

这样设置后，width和height的作用范围就是“边框盒”。

● 改变背景作用范围

默认情况下，背景作用范围是“边框盒”。

有一个“神器“” -- background-clip 属性

background-clip: content-box;

这样设置后，width和height的作用范围就是“内容盒”

● 溢出处理

overflow属性应运而生

常用的3个属性值：hidden、scroll、auto;

hidden：溢出部分隐藏

scroll：出现滚动条

auto：自动

● 空白处理

可以看到单行文字过多时，显示3个点

8、行盒模型

● 常见的行盒

包含具体内容的元素，如span、strong、em、i、img、video、audio

● 行盒一般的特征

① 行盒沿内容沿伸

② 行盒的宽高设置无效

行盒的宽高跟字体大小、行高、字体类型有关

③ 填充区、边框、外边距

水平方向：生效，和块盒一样

垂直方向：不会实际占用空间

● 行块盒

不独占一行（行盒特征），盒模型所有尺寸都生效（块盒特征）

分页应用

效果：

9、视觉格式化模型

I、 常规流

默认情况下，所有元素都属于常规流布局。

● 总体规则

块盒独占一行，行盒水平依次排列

● 包含块

每个盒子都有它的包含块，包含块决定了盒子的排列区域

绝大数情况下，盒子的包含块是其父元素的“内容盒”

● 水平方向

重点！重点！重点！

当块盒没有设置width时，width的默认值为auto

当块盒没有设置margin时，margin默认值是0

auto的作用：将剩余空间吸收完

当margin和width都设置为auto时，width优先将剩余空间吸收完。

当宽度、内边距、边框，外边距计算完，仍然有剩余空间，该剩余空间被margin-right（土黄色区域）全部吸收。

在常规流中，块盒在其包含块中居中，前提是宽度已设置，然后左右margin设置为auto。

● 垂直方向

如果height设置为auto，适应内容的高度

如果margin设置auto，表示0

● 百分比取值

padding、宽、margin相对的是包含块的宽度！宽度！宽度！！！

包含块的高度是否取决于子元素的高度，设置百分比无效。

包含块的高度不取决于子元素的高度，百分比相对于父元素的高度

● 上下外边距的合并

两个常规流块盒，上下外边距相邻，会进行合并。

两个外边距取最大值

兄弟元素的上下外边距

父子元素的上下外边距

方法 ① ：

父元素增加border，使其内外边距不相临

方法 ② ：

父元素增加padding，子元素margin去掉

● 常规流总结

常规流分为行盒和块盒，块盒横向撑满包含块，纵向外边距的合并。

下一个行盒的头部接上上一个行盒的尾部。

II、 浮动

● 应用场景

① 文字环绕

② 横向排列

忘记了吗？前面我们还能使用“行块盒”（display:inline-block）实现横向排列。

● 浮动的基本特点

① float:left /*左浮动，元素靠上靠左*/

② float:right /*右浮动，元素靠上靠右*/

浮动元素的包含块，和常规流一样，是父元素的内容盒

● 浮动后的盒子虽然是block，但是没有独占一行

页面效果：

我们可以通过“元素审查”看到class为left和right的元素设置为float后，

分别显示在父元素内容盒的左右两边，并不是独占一行

● 浮动盒子的宽度特点

当浮动盒子的宽度为auto时，适应内容的宽度

● 浮动盒子的高度特点

高度为auto时，无论是常规流还是浮动以及定位中，都是一致的，适应内容的高度

● 浮动在包含块中排列时，会避开常规流块盒

页面效果：

● 常规流块盒在排列时，无视浮动盒子

● 常规流块盒在排列时，会避开浮动盒子

从上图中我们可以看到，文字在块盒中，但是文字却环绕在img四周，

这是因为浏览器会自动生成一个行盒包裹文字，该行盒叫“匿名行盒”，

块盒p的总宽度还是不变的。

① 如果我们修改p元素的margin-left，会发生什么？

结合我们之前学过的知识，修改p元素的margin-left，是相对于包含块的，并不是img元素

② 修改img元素的margin-right

● 高度坍塌

如下图，父常规流盒子未设置高度，尽管子浮动盒子有高度，

但是没有将父盒子撑起，这就是所谓的父元素“高度坍塌”

使用clear属性清除浮动

方案 ① 增加一个div

方案 ② 使用伪元素

III、 定位

● 定位概念

手动控制元素在包含块中的精准位置

● 四种类型的定位

static：静态定位（不定位）

relative：相对定位

absolute：绝对定位

fixed：固定定位

● 定义元素

一个元素，只要position的取值不是static，认为该元素是一个定位元素

● 相对定位

position: relative;

相对定位不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。

盒子的偏移不会对其他元素造成任何影响。

● 绝对定位

position: absolute;

绝对定位是相对于包含块的位置，脱离文档流。

包含块的位置：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）。

● 固定定位

position: fixed;

固定定位除了包含块的位置其他和绝对定位一样，脱离文档流。

固定定位的包含块：

固定为视口（浏览器的可视窗口）

● 定位下的居中

针对绝对定位和固定定位

① 定宽（高）

② 将左右（上下）距离设置为0

③ 将左右（上下）margin设置为auto

绝对定位和固定定位margin为auto时，吸收剩余空间

汇总

>>>Python Web全栈之旅04--Web前端●走入CSS的世界

>>>Python Web全栈之旅05--Web前端●CSS层叠样式的理解

>>>Python Web全栈之旅06--Web前端●盒模型

>>>Python Web全栈之旅07--Web前端●行盒模型

>>>Python Web全栈之旅08--Web前端●视觉格式化模型

>>>Python Web全栈之旅09--Web前端●CSS浮动

>>>Python Web全栈之旅10--Web前端●CSS定位