【CSS】入门详解

一、简介与基础选择器

第一章 CSS概述

1. HTML 的局限性

HTML ，只关注内容的语义。例如<h1>表示大标题，<p>表示段落。

早期的时候，HTML 只能做一些简单的样式，网页非常丑，而且使 HTML 代码臃肿。

2. CSS-网页的美容师

CSS 是层叠样式表Cascading Style Sheets）的简称。

CSS 也是一种标记语言。

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

3. CSS和HTML

• HTML 呈现结构，CSS 决定样式，结构与样式分离。
• 每一个 HTML 标签也称之为一个元素。
• CSS 是同过 CSS 属性 对 HTML 元素进行修饰，CSS 属性是作用在元素上的。

第二章 CSS基本语法

1. 元素和元素之间的关系

父子关系：div>p1 div>span2 span1>span2

祖先后代关系：div是p1、span1、span2的祖先 p1是span1的祖先

兄弟关系：p1和span2是兄弟关系

2. CSS 的使用方法

2.1 行内式

css 写在标签内的 style 属性中

<p style="color:red;"</p>

• 适合修改简单样式
• 设置当前标签样式
• 书写繁琐，不推荐大量使用。

2.2 内嵌式

将 CSS 代码写在 HTML 页面内部，单独放在一个 <style> 标签中。

<style>
    p {
        color:red
    }
</style>

2.3 外部式

css 写在独立的 css 文件中，再在 html 文件中把 css 文件导入

<link rel="stylesheet" type="text/css" href="./style.css">

3. CSS 基本语法格式

CSS 由两个部分组成：选择器 声明块。

选择器： 选择器用来选中页面中的指定元素。

声明块： 声明块用来为选中的元素设置具体样式。

声明块由一对大括号括起来，大括号里边是一个一个的声明。

声明是一个键值对结构，一个属性名对应一个属性值，属性名和属性值使用冒号连接；声明以分号结尾。

• 内嵌式和外嵌式格式

  选择器 {
    属性名:属性值;
    属性名:属性值;
  }
  

• 行内式格式

  <标签名 style="属性名:值； 属性名:值；属性名:值；"></标签名>
  

HTML属性和CSS属性设置不同

<!-- 使用 HTML 属性设置图片的大小 -->
<img src="images/01.jpg" alt="01" width="400" height="400">
​
<!-- 使用CSS属性设置图片的大小 -->
<img src="images/01.jpg" alt="01" style="width:400px;height:400px;">

3. CSS 的层叠性

通过不同方式为某个元素设置的样式会叠加到一起，称为 CSS 的层叠性。

4. CSS 注释

/* 注释内容 */

5. CSS基本长度单位

单位	语义
em	字体大小的倍数
px	像素，屏幕上显示的最小单位，用于网页设计，直观方便
pt	是一个标准的长度单位，1pt＝1/72英寸，用于印刷业，非常简单易用
cm	厘米
mm	毫米
%	百分比，设置宽高参照元素宽高，设置字体大小参照默认字体大小

6. CSS基本颜色设置方式

• 使用颜色名表示颜色，如red,green,blue…

• RGB十进制数字表示颜色

  计算机三元色： red: 0 ~ 255 0% ~ 100% green：0 ~ 255 0% ~ 100% blue：0 ~ 255 0% ~ 100%

• hex十六进制表示

  0. 十六进制表示颜色的原理与 rgb 方式相同
  1. 十六进制数字 ff 等于十进制数字 255
  2. 使用6位十六进制数字表示，每两位表示一种原色
  3. 三组原色都是两个相同的数字，可以简写

第三章 CSS基本选择器

1. 选择器的作用

选择器就是根据不同需求把不同标签选择出来。

2. 基本选择器分类

2.1 标签选择器

直接用HTML 标签名作为选择器，按标签名称分类，为页面某一类标签指定统一的 CSS 样式。

 div {}

• 优点：标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。
• 缺点：不能设置差异化样式，只能选择全部当前标签。

2.2 ID选择器

可以为标有特定 id 的 HTML 元素指定特定的样式。

以 id 属性来设置 id 选择器，用 # 来定义。

 #id名 {}

• 元素的ID名必须是唯一的！别人切勿使用

2.3 类选择器

差异化选择不同标签，单独选一个或者某个标签。

在HTML中以class属性表示，在CSS中用.显示

.class名 {}

• 类选择器用 . 标识，紧跟类名。
• 长名称或词组使用 - 连接单词。
• 可以理解为这个标签起了一个名字，不要用纯数字、中文，命名有意义。
• 多个元素可以设置相同的类名
• 一个元素可以设置多个类名，用空格隔开

2.4 全局选择器

用 * 定义通配符选择器，选取页面中所有标签。

* {}

2.5 基本选择器之间的权重

0. ID选择器 > 类名选择器 > 标签选择器 > 全局选择器
1. 如果选择器权重相同，后面的覆盖前面
2. 行内式设置的样式大于任何一个选择器

2.6 基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	选中所有相同标签	不能差异化选择	较多	p{color:red;}
类选择器	选出一个或多个标签	可以根据需求选择	较多	.nav {color: red;}
id 选择器	一次只能选出一个标签	一个 id 属性在页面中只能出现一次	一般配合 js 使用	#nav {color: red;}
通配符选择器	选择所有标签元素	选择的太多，有部分不需要	特殊情况使用	* {color: red; }

第四章 CSS常用属性

1. 字体属性

字体属性	语义	属性值
font-size	设置字体大小	单位是 px
font-family	字体族科	单个字体名称或者字体列表
font-weight	字体粗细	normal：正常，默认值。 lighter：细。 bold：粗。 100900之间的数字： 100300表示细，400、500表示正常， 600及以上表示粗
font-style	字体样式	normal：正常，默认值。 italic：斜体字
font	复合属性	顺序不能变，字体和字号属性必须有

line-height也可以写在font复合属性里面

1.1 字体系列

CSS 使用 font-family 属性定义文本字体系列。 尽量使用默认字体，保证不同浏览器的兼容性。

字体族科的设置：

font-family: "Microsoft YaHei";
font-family: "微软雅黑";
font-family: 微软雅黑;

设置字体列表：

font-family: "Microsoft YaHei", 宋体, sans-serif;
font-family: SimSun, Arial, "Arial Narrow", HELVETICA;

• 衬线字体 serif：字体笔画粗细不一致，如宋体、仿宋体、楷体等
• 非衬线字体 sans-serif：字体笔画粗细一致，如微软雅黑、黑体、兰亭黑、思源黑体等

1.2 字体大小

CSS 使用 font-size 属性定义字体大小。

body {font-size: 16px;}

• px 大小是我们网页常用单位
• 谷歌浏览器默认是 16px，规定文字大小最小是 12px

1.3 字体粗细

CSS 使用 font-weight 属性设置字体粗细

p {font-weight: 700;}

实际开发中，更常用数字来表示加粗或变细。400为normal，700 为 bold。100~300表示细，400、500表示正常，600及以上表示粗，无单位

1.4 文字样式

CSS 使用 font-style 属性设置文本风格。

p { font-style: italic; }

属性值	描述
normal	正常显示
italic	斜体

• 平常很少给字体加斜体，而是用斜体标签em,i

1.5 字体复合属性写法

规则

至少需要设置字体大小font-size和字体族科font-family 先写大小再写族科

font: 14px 宋体;
font: 12px 宋体,仿宋体,serif;

同时设置 粗体字、字体大小、字体族科 将font-weight的值写在大小前面

font: 800 16px "Microsoft Yahei",黑体,sans-serif;

同时设置 斜体字、字体大小、字体族科

font: italic 16px "Microsoft Yahei",黑体,sans-serif;

同时设置 粗体字、斜体字、字体大小、字体族科

font: 800 italic 16px "Microsoft Yahei",黑体,sans-serif;
font: italic  800  16px "Microsoft Yahei",黑体,sans-serif;

1.6 子属性和复合属性的关系

0. 复合属性写在子属性的后面，覆盖掉子属性，即使复合属性中没有设置对应的值，也会使用默认值覆盖
1. 子属性写在复合属性后面，会覆盖掉复合属性中与子属性对应的那个值

2. 文本属性

属性名	语义	属性值
color	设置文字的颜色	颜色
letter-spacing	设置字间距	长度（不能用百分比）
word-spacing	设置词间距	长度（不能用百分比）
text-indent	设置首行缩进	长度
text-decoration	设置文本修饰线	none：无修饰线。 underline：下划线。 overline：上划线。 line-throuth：删除线
text-align	设置文本在元素中的水平对齐方式	left：靠左对齐。 right：靠右对齐。 center：居中对齐
vertical-align	设置行内或行内块与同行文本如何对齐	baseline：基线对齐，默认值。 top：顶线对齐。 bottom：底线对齐。 middle：中线对齐。 sub：下标字。 super：上标字。 长度：设置元素底部与基线的距离， 正值在基线上面,负值在基线下面
line-height	行高	长度

2.1 vertical-align

主要设置行内或行内块元素与同行的文本如何对齐，baseline默认值是基线对齐

0. 注意需要将 vertical-align设置给行内或行内块元素本身
1. 可以实现上标字和下标字
2. 可以设置文字在单元格（td、th）中的垂直对齐方式（只适用于单元格，其他元素一概不可以）

2.2 行间距

2.2.1 行高的概念

0. 什么是行高？ 上一行文字的中线与下一行文字的中线之间的距离
1. 什么是行距？ 上一行文字的底线与下一行文字的顶线之间的距离
2. 行高与行距关系 设置行高影响行距

line-height 设置行间的距离，行间距=文本高度+上间距+下间距

2.2.2 应用

使用行高实现元素中的一行文字垂直居中，满足以下条件：

0. 只有一行文字
1. 行高与高度一致

2.2.3 line-height是font子属性

font: 800 1.5em/200px 宋体;
/* 1.5em是字体大小 200px是行高*/

3. 背景属性

属性名	语义	属性值
background-color	设置背景颜色	颜色
background-image	设置背景图片地址	url(图像地址)
background-repeat	设置背景图片重复方式	repeat：重复，默认值。 repeat-x：只在水平方向重复。 repeat-y：只在垂直方向重复。 no-repeat：不重复。
background-position	设置背景图片在元素上的位置	关键字、长度、百分比
background-attachment	设置背景图像是否随着页面其余部分滚动	scroll：图像随着对象内容滚动。 fixed：固定。
background	复合属性	多个值使用空格分隔(没有顺序要求，也无数量要求)

3.1 背景颜色

• 元素默认的背景颜色是透明色，background-color 的默认值是 transparent
• 给 body 元素设置背景颜色就是给整个页面设置背景颜色

3.2 背景图片位置

1. 参数是关键字

• 水平位置： left right center

  垂直位置： top bottom center

• 若两个值都是方位名词，则两个值前后顺序无关，比如left top和top left 效果一致。

• 若只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

2. 参数是指定坐标（用长度）

• 使用两个长度表示坐标，分别是 X 坐标和 Y 坐标

• 长度表示的坐标与关键字混搭

• 若只设置一个值，设置的是水平方向，垂直方向默认 center

  坐标原点：元素的左上角

  通过坐标指定背景图片左上角的位置

3. 参数是百分比

• 第一个百分比参照元素宽度，第二个百分比参照元素高度
• 根据百分比标记元素上的位置，根据百分比标记图片上的位置，两个点重合
• 只设置一个值，设置的是水平方向，垂直方向默认 center

4. 两个子属性

• background-position-x
• background-position-y

3.3 背景图像固定

0. 设置 background-attachment的值为 fixed,背景图片定位的参照是视口
1. 背景图片是属于元素，背景图片的位置只有在元素上的时候才可以显示
2. 能够实现的效果： 背景图片不随着元素滚动；元素滚动的时候能够显示背景图片的不同位置

4. 鼠标光标

属性名	语义	属性值
cursor	设置鼠标光标样式	pointer：小手。 move：移动图标。

也可以自定义，在属性值前用url(图片地址)用逗号隔开

5. 列表属性

属性	语义	属性值
list-style-type	设置项目符号的类型	none：无项目符号（常用） disc：实心点 circle：圆圈 square：小方框 decimal：数字
list-style-position	设置项目符号的位置	outside: 符号在li外面，默认值 inside: 符号在li里面。
list-style-image	使用图片自定义列表项目符号	url(图片地址)
list-style	复合属性	没有数量和顺序要求

注意： 列表样式只有设置给 ul、ol、li 才会生效！

6.表格属性

属性名	语义	属性值
table-layout	设置列宽固定。	auto：默认值。 fixed：固定。
border-spacing	设置单元格之间的距离	长度
border-collapse	设置相邻边框合并在一起	separate: 独立，默认值。 collspase：合并。
cpations-side	设置表格标题位置	top：标题在上,默认值。 bottom：标题在下面。
empty-cells	设置没有内容的单元格显示还是隐藏	show：显示，默认值。 hide：隐藏

0. 以上 5 个 css 属性，只有设置给 table 元素才能生效
1. 如果设置 border-collapse：collapse; border-spacing和empty-cells都无法生效

二、复合选择器与特性

第一章 复合选择器

由基础选择器组合而成。

1. 后代选择器

后代选择器又称为包含选择器，可以选择父元素里的子元素。写法是将外层标签写在前面，内层标签写在后面，中间空格分开。

选择器1 选择器2 { }

• 上述语法表示选择元素 1 里面所有的元素 2
• 可以连续嵌套，比如可以是孙子等

2. 子选择器

子元素选择器（子选择器）只能选择作为元素的最近一级子元素。简单理解就是选亲儿子。

选择器1 > 选择器2 { }

• 元素之间用大于号 > 隔开
• 1 为父级。2为子级，最终选择的是元素 2
• 元素 2 必须是亲儿子。

3. 交集选择器

选择器1选择器2 { }

4. 并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号 , 连接而成，任何形式的选择器都可以作为并集选择器的一部分。

选择器1,选择器2 { }

5. 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。 伪类选择器书写最大特点是用冒号 : 表示。 伪类选择器种类多，比如链接伪类选择器、结构选择器等。

链接伪类选择器	语义
:link	未访问过，只适用于超链接
:visited	已访问过，只适用于超链接
:hover	鼠标悬停在上面
:active	鼠标在元素上按下

多个伪类选择器一起使用，按照顺序书写： :link :visited :hover :active

6. 选择器权重(优先级)

6.1 基础选择器优先级

ID选择器 > 类选择器、伪类选择器 > 标签名选择器 > 全局选择器

6.2复合选择器优先级

1. 先比较ID选择器的数量，数量多该组合选择器优先级高
2. 如果ID选择器数量一致，再比较类选择器、伪类选择器的数量，数量多该组合选择器优先级高
3. 如果类选择器、伪类选择器的数量一致，再比标签名选择器的数量，数量多该组合选择器优先级高

1. 该规则适合于后代元素选择器、子元素选择器、交集选择器
2. 并集选择器，参与并集的选择器各自比较各自的

第二章 元素显示模式

元素显示模式就是元素(标签)以什么方式进行显示，比如div自己占一行，比如一行可以放多个span

作用：网页的标签非常多，不同地方使用不同，了解其特点可以更好布局

1. 块元素

块级元素的特点：

1. 独占一行
2. 高度、宽度、外边距以及内边距都可以控制。
3. 宽度默认是容器（父级宽度）的 100%。
4. 是一个容器及盒子，里面可以放行内或块级元素。

注意：

• 文字类的标签内不能放块级元素。
• 文字类元素有 p，h1-h6，尤其不能放 div 元素。

HTML默认显示模式是 block 的元素：

• 主体结构标签： html、body
• 格式排版标签： h1 ~ h6、p、br、hr、pre、div
• 列表标签： ul、ol、li、dl、dt、dd
• 表格标签： table、caption、thead、tbody、tfoot、tr
• 表单标签： form、option

2. 行内元素

行内元素的特点：

1. 相邻行内元素在一行上，一行可以显示多个。
2. 高、宽直接设置是无效的。
3. 默认宽度就是它本身内容宽度。
4. 行内元素只能容纳文本或其他行内元素。

注意：

• a 链接里面不能放链接
• 特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

HTML默认显示模式是 inline的元素：

• 文本标签： strong、em、del、ins、sub、sup、span
• 超链接标签： a
• 表单标签： label

3. 行内块元素

同时具有块元素和行内元素的特点。

行内块元素的特点：

1. 和相邻元素（行内块）在一行上，之间存在空白缝隙，一行可以显示多个。
2. 默认宽度是本身内容宽度。
3. 高度、行高、外边距、内边距都可以控制（块级元素特点）。

HTML默认显示模式是 inline-block的元素：

• 图片标签： img
• 表格标签： td、th
• 表单标签： input、textarea、select、button
• 内联框架： iframe

4. 显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级	独占一行	可以设置宽高	容器的100%	容器级可以包含任何标签
行内	一行可以放多个	不能设置宽高	本身内容宽高	容纳文本或其他行内元素
行内块	一行可以放多个	可以设置宽高	本身内容宽高

5. 修改元素的显示模式

特殊情况下，需要将一个元素的模式转换为另外一种显示模式，通过给元素设置 CSS 属性 display，使其具有另外一种模式的特性。

属性值	语义
:block	设置成块级
:inline	设置成行内
:inline-block	设置成行内块
:none	设置成隐藏

第三章 元素在布局中的特点

1. 行内元素或行内块元素

让行内元素或行内块元素进行居中，需要对其父元素设置文本对齐方式，因为行内元素或行内块元素可以被当做文本处理。

1.1 在父元素中水平居中

在其父元素上设置 text-align:center

1.2 在父元素中垂直居中

在其父元素上设置 line-height 属性，行高的值与高度相等即可

行内元素中无需设置，行内块元素需要根据不同情况进行调整：

• 情况一： 行内块元素中没有文字， 需要给行内块元素本身进行设置 vertical-align:middle
• 情况二： 行内块元素中有一行文字，可以通过给行内块元素本身设置 line-height 与行内块元素自己的高度一致
• 情况三： 行内块元素中有多行文字
  • 第一，给行内块元素本身设置 line-height,覆盖从父元素上继承的行高
  • 第二，给行内块元素本身进行设置 vertical-align:middle

2. 行内元素或行内块元素之间的空白问题

2.1 元素之间的空白(左右)

产生原因：

HTML 代码中的换行被作为空格显示，行内块元素被父元素作为文本处理。

解决方案：

• 方案一： 代码中不写换行和空格
• 方案二： 父元素设置字体大小为 0，再单独给行内块元素设置字体大小。

2.2 底部的空白(图片的幽灵空白)

产生原因：

行内块元素默认底部与文字基线对齐，底部的空白就是基线到底线的距离

解放方案：

• 方案一： 父元素设置字体大小为 0，需要行内块再单独设置字体大小（如果里面有文字）
• 方案二： 给行内块元素设置 vertical-align 值不是 baseline 都可以解决问题
• 方案三： 如果是图片，通常会将图片设置为 block

2.3 文字内容个数不同的行内块元素水平排列无法对齐

产生原因：

基线对象，如果一行文字，该文字与基线对齐；如果多行文字，最后一行文字与基线对齐；如果没有文字，元素的底部与基线对齐。

解决方案：

给行内块元素设置 vertical-align，值不为 baseline 都可以解决问题

3. 块级元素

3.1 水平居中

设置元素的左外边距和右外边距的值都为 auto。

注意：

让块级元素居中，是对元素本身进行设置。

浮动的元素以及绝对定位和相对定位的元素不能使用该方法进行居中。

3.2 水平和垂直都居中

要实现一个块级元素在父元素里面垂直居中对齐，需要对该元素设置定位；这种方式可以设置元素垂直居中，可以设置元素水平居中。

定位的元素水平居中： 设置 left:50%，设置 margin-left 为负的宽度的一半。

定位的元素垂直居中： 设置top:50%，设置 margin-top 为负的高度的一半。

第四章 三大特性

1. 层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：

• 样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式，后来居上
• 样式不冲突，不会层叠

2. 继承性

CSS 中子标签会继承父标签的某些样式，如文本颜色和字号。

• 恰当使用继承可以简化代码，降低 CSS 的复杂性

• 哪些可以被继承

  • 字体样式： font-style font-size font-weight font-family font

  • 文字颜色： color

  • 文本样式： letter-spacing word-spacing text-indent text-decoration text-align line-height

    注意：vertical-align 不能继承

2.1 行高的继承性

body {font: 12px/1.5 Microsoft Yahei;}

• 行高可以跟单位也可以不跟
• 如果子元素没有设置行高，则会继承父元素的行高为 1.5
• 此时子元素的行高是：当前子元素的文字大小*1.5
• body 行高 1.5 这样写法最大优势就是里面的子元素可以根据文字大小自动调整行高

3. 优先级

当一个元素指定多个选择器时，就会有有优先级的产生。

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID 选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important	∞ 无穷大

注意

• 继承的权重为 0，不管父元素权重多高，子元素得到的权重都是0，即使加了 important 权重也还是 0。
• a 链接，浏览器默认指定了一个样式，蓝色，下划线，不会继承父级样式
• 权重可以叠加，需要计算权重，但是没有进位。

三、盒子模型

第一章 盒子模型

1. 看透网页布局的本质

网页布局过程：

1. 准备网页元素，网页元素基本都是盒子 box
2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。
3. 往盒子里放东西。

本质：利用 CSS 摆盒子。

2. 盒子模型组成

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，包括：边框、外边距、内边距和实际内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DWOU5Kih-1693203757514)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230828133951348.png)]

影响盒子大小的因素：

1. 盒子的总宽度 = 内容宽度 + 左右内边距宽度 + 左右边框宽高
2. 盒子的总高度 = 内容高度 + 上下内边距宽度 + 上下边框宽度

注意： 外边距宽度不会被计算进盒子的总宽高，影响盒子的位置！

2.1 内容content

2.1.1 设置内容宽高的 CSS 属性

CSS 属性名	功能	属性值
width	固定宽度	长度
max-width	最大宽度	长度
min-width	最小宽度	长度
height	固定高度	长度
max-height	最大高度	长度
min-height	最小高度	长度

2.1.2 设置内容宽高的规则

1. 最大最小宽高主要用于显示默认计算的宽度
2. 最大最小宽高一般不与固定宽高一起使用

2.1.3 元素的默认宽高

行内元素：默认的宽高被里面的文字撑开

行内块元素：默认的宽高被里面的文字或者后代元素撑开

块级元素：

1. 默认宽度根据父元素内容的宽度进行计算

2. 默认高度被里面的文字或者后代元素撑开

   1. 块级元素默认总宽度 = 父元素内容宽度 - 该块级元素的左右外边距
   2. 块级元素默认内容宽度 = 父元素内容宽度 - 该块级元素的左右外边距 - 该块级元素的内边距 - 该块级元素的左右边框宽度

2.2 内边距padding

内边距 padding 也叫补白或填充，是边框和内容之间的空间。

2.2.1 相关属性

CSS 属性名	功能	属性值
padding-left	左内边距	长度
padding-right	右内边距	长度
padding-top	上内边距	长度
padding-bottom	下内边距	长度
padding	多个方向内边距	长度

2.2.2 设置规则

1. 使用百分比设置内边距，不论是哪个方向的内边距，参照的都是父元素内容宽度
2. 内边距不可以是负值，也不能设置为“auto”

padding 复合属性设置规则：

• 1 个值：上下左右
• 2 个值：上下，左右
• 3 个值：上，左右，下
• 4 个值：上，右，下，左，顺时针

不同显示模式的元素设置内边距：

1. 块级元素、行内块元素可以完美设置各个方向的内边距。
2. 行内元素可以完美设置左右内边距，上下内边距设置不完美。

2.3 边框border

CSS 属性名	功能	属性值
border-style	边框风格	none：无边框，默认值。 solid：实线. dashed：虚线。 dotted：点线。 double：双实线。
border-color	边框颜色	颜色
border-width	边框宽度	长度（不能用百分比）
border	复合属性	没有顺序和数量要求
border-left-style border-left-color border-left-width border-left border-right-style border-right-color border-right-width border-right border-top-style border-top-color border-top-width border-top border-bottom-style border-bottom-color border-bottom-width border-bottom

2.4 外边距 margin

外边距是元素与父级或其他兄弟级元素的距离。

2.5.1 相关属性

CSS 属性名	功能	属性值
margin-left	左外边距	长度
margin-right	右外边距	长度
margin-top	上外边距	长度
margin-bottom	下外边距	长度
margin	复合属性	1~4个长度

2.5.2 设置规则

1. 使用百分比设置外边距，不论任何方向，都参照父元素内容的宽度
2. 外边距可以是负值

不同显示模式的元素设置外边距：

1. 块级元素和行内块元素可以完美设置4个方向外边距
2. 行内元素只能设置左右外边距，上下外边距无法设置

2.5.3 典型应用：让块级盒子水平居中

1. 盒子必须指定宽度（width）

2. 盒子左右的外边距都设置为 auto

   .header {
     width: 960px;
     margin: 0 auto;
   }
   

使行内元素或行内块元素水平居中用text-align:center;

2.5.4 塌陷

什么是 margin 塌陷？

1. 第一个子元素的上外边距和最后一个子元素的下外边距，会塌陷到父元素上
2. 只有块级元素的上下外边距才有可能发生塌陷

如何解决 margin 塌陷？

1. 方案一： 给父元素设置边框
2. 方案二： 给父元素设置内边距
3. 方案三： 给父元素设置 overflow:hidden;

2.5.5 合并

什么是 margin 合并？

1. 上面兄弟元素的下外边距与下面兄弟元素的上外边距合并，两者之间距离取较大的一个外边距
2. 只有块级元素的上下外边距才会合并

如何解决 margin 合并？

不需要解决！

第二章 元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。

1. display 属性

display 属性用于设置一个元素应如何显示。

• display:none; 彻底隐藏因素，不占位置！
• display:block; 除了转换为块级元素之外，同时还有显示元素的意思 display 隐藏元素后，不再占有原来的位置。

后面应用及其广泛，搭配 JS 可以做很多的网页特效。

2. visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏

• visibility : visible;元素可视
• visibility : hidden;元素隐藏
• visibility 隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来位置，就用 visibility:hidden 如果隐藏元素不想要原来位置，就用 display:none （用处更多重点）

3. overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

CSS 属性名	功能	属性值
overflow	设置溢出内容显示方式	visible：显示，默认值。 hidden：隐藏。 scroll：显示滚动条。 auto：如果溢出显示滚动条
overflow-x	设置溢出内容显示方式（水平方向）	同上
overflow-y	设置溢出内容显示方式（垂直方向）	同上

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

auto 和 scroll 的区别：

auto: 如果内容没有溢出不显示滚动条，内容溢出显示滚动条
scroll:不论内容是否溢出，都显示滚动条

四、浮动和定位

第一章 浮动

1. 浮动简介

1.1传统网页布局方式

网页布局的本质——用 CSS 来摆放盒子，把盒子放到相应位置。

CSS 提供了三种传统布局方式：

• 普通流
• 浮动，浮动最初是用来实现文字环绕效果
• 定位

实际开发中，一个页面基本包含三种布局方式。

1.2 标准流（普通流/文档流）

所谓的标准流，就是标签按照规定好的默认方式排列。

1. 块级元素会独占一行，从上到下顺序排列 常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 常用元素：span、a、i、em

标准流是最基本的布局方式。

1.3 为什么需要浮动？

很多布局效果，标准流没办法完成，此时就可以利用浮动完成布局。浮动可以改变元素标签默认排列方式。

**浮动最典型应用：**让多个块级元素一行显示。

网页布局准则：

1. 第一准则，多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
2. 第二准则：先设置盒子大小，再设置盒子位置。

1.4 什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘及包含块或另一个浮动框的边缘。

选择器 { float: 属性值; }

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

1.5 浮动特性（重点）

加了浮动之后的元素，会具有一些特性。

1. 浮动元素会脱离标准流，浮动的元素如果与文档流的元素位置发生重叠，浮动元素显示在上面
2. 浮动元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

重要特性

1. 脱离文档流的控制（浮）移动到指定位置（动），脱离文档流的盒子，会漂浮在文档流的盒子上面，不再保留原先的位置。

2. 如果多个盒子都设置了浮动，则它们会按照属性值一行显示并且顶端对齐排列。

   浮动的元素是相互贴在一起的（没有间隙）

   若父级宽度放不下盒子，多出的盒子会另起一行对齐。

3. 浮动元素的显示特点

   • 若块级元素没有设置宽度，则默认和父级一样宽，但添加浮动后，默认宽高被内容撑开
   • 浮动盒子中间无间隙，紧挨着
   • 浮动元素可以完美设置宽高，内外边距（区别行内）
   • 不会被父元素当做文本（区别行内块）
   • 不存在外边距的塌陷和合并，左右外边距auto也无法居中（区别于块级）

1.6 浮动元素经常和标准流父级元素搭配使用

为了约束元素位置，一般采取：

先用标准流父元素上下排列位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

2. 常见网页布局浮动和标准流的父盒子搭配

1. 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

2. 一个元素浮动了，理论上其余兄弟元素也要浮动

   一个盒子里有多个盒子，其中一个盒子浮动，其他兄弟也应该浮动，防止引起问题。

   浮动的盒子只会影响浮动盒子后面的标准流，不会引起前面的标准流，前面的标准流已经占了一个格子。

3. 清除浮动

3.1 为什么需要清除浮动

理想情况下是让子盒子撑开父盒子
由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的盒子，对后面元素排版产生影响，这就是高度塌陷。

总结:为什么需要清除浮动？

1. 父级没高度
2. 子盒子浮动了
3. 影响下面布局了，应该清除浮动。

3.2 清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身具有高度，则不需要清除浮动
• 清除浮动之后，父级会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

3.3 清除浮动

语法：

选择器: {clear: 属性值;}

属性值	描述
left	不允许左侧有浮动元素
right	不允许右侧有浮动元素
both	同时清除左右两侧浮动

实际工作中，几乎只用clear:both

3.3.1对后面兄弟元素的影响

后面的兄弟元素会占据浮动元素原来的位置，显示在浮动元素的下层。

解决：

给紧邻在后面的兄弟元素设置 CSS 属性 clear:both;

3.3.2对父元素的影响

如果父元素没有设置固定高度，子元素浮动之后，父元素高度塌陷（浮动的子元素不会将父元素高度撑起）

• 方案一： 给父元素设置固定高度（不推荐）
• 方案二： 给父元素也设置浮动，以浮制浮（不推荐）
• 方案三： 给父元素设置CSS属性 overflow，值不为 visible（比较推荐）
• 方案四： 给父元素添加最后一个子元素（在所有浮动元素的后面），该元素是块级元素，设置 clear:both(不太推荐)
• 方案五： 实现元素与方案四相同，使用伪类选择器给元素动态创建最后一个子元素，设置为块级，设置 clear:both(推荐)

3.4清除浮动总结

3.4.1 额外标签法

额外标签法是在最后一个浮动元素末尾添加一个 空块级元素，给其赋以属性 clear:both;。

3.4.2 父元素添加 overflow

可以给父元素添加 overflow 属性，将其属性设置为 hidden、auto或scroll

缺点：无法显示溢出部分

3.4.3 父元素:after 伪元素法

实际上也是额外标签法的一种

.clearfix:after{
    content:"";      /* 必须拥有content属性  内容为空*/
    display: block;  /* 必须块标签才能清浮动 */
    clear: both;     /* 清除浮动* /
}

3.4.4 双伪元素法

.clearfix::before,.clearfix::after {
	content: "";
    display: table;
}
.clearfix::after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

第二章 定位

1. 为什么需要定位

一些固定盒子的效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：

1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

2. 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

2.1 定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个值：

值	语义	是否脱离文档流	移动位置
[static](#3. 静态定位 static (了解))	静态定位	否	不能使用边偏移
[relative](#4. 相对定位 relative（重要）)	相对定位	否(占有位置)	相对于自身位置移动
[absolute](#5. 绝对定位 absolute （重要）)	绝对定位	是(不占有位置)	带有定位的最近父级
[fixed](#7. 固定定位 fixed （重要）)	固定定位	是(不占有位置)	浏览器可视区

2.2 边偏移

边偏移就是定位的盒子移动到最终位置。有 top， bottom， left 和 right 4 个属性

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left： 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离。

3. 静态定位 static (了解)

静态定位是元素的默认定位方式，无定位的意思。

选择器 {position: static;}

静态定位按照标准流特性摆放位置，它没有边偏移,静态定位在布局时很少用到。

4. 相对定位 relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

选择器 {position: relative;}

相对定位的参考点:

它是相对于自己没有定位之前的位置来移动的（移动位置的时候参照点是自己原来的位置）。

相对定位的特点：

1. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它,也就是不脱标，继续保留原来位置
   它最典型的应用是给绝对定位当爹的。

2. 不会改变元素的显示模式（保持原来的行内、块级、行内块、浮动）

5. 绝对定位 absolute （重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的,也就是参考它的包含块。

选择器 {position: absolute;}

绝对定位的参考点：

1. 普通元素（包括相对定位）包含块就是它的父元素

2. 绝对定位的元素包含块是最近一级的有定位祖先元素

   如果没有定位的祖先元素，包含块就是整个页面（根元素）

绝对定位的特点:

1. 绝对定位不再占有原先的位置。（脱标）
2. 默认宽高被内容撑开，不存在外边距塌陷和合并（区别块元素）
3. 可以设置宽高、内外边距（区别于行内）
4. 不会被父元素作为文本（区别于行内、行内块）

6. 子绝父相

“子绝父相”这句话的意思是：子级是绝对定位的话，父级要用相对定位

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

• 父盒子需要加定位限制子盒子在父盒子内显示。

• 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

7. 固定定位 fixed （重要）

固定定位是元素固定于浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

选择器 {position: fixed;}

固定定位的参考点：

以浏览器的可视窗口为参照点移动元素。

• 跟父元素没有任何关系
• 不随滚动条滚动

固定定位的特点:

1. 固定定位不占有原先的位置。

   固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

2. 默认宽高被内容撑开，不存在外边距塌陷和合并（区别块元素）

3. 可以设置宽高、内外边距（区别于行内）

4. 不会被父元素作为文本（区别于行内、行内块）

固定定位小技巧：固定在版心右侧位置

1. 让固定定位的盒子 left:50%，走到浏览器可视区（也可以看做版心）的一半位置。
2. 让固定定位的盒子 margin-left:板心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了

8. 粘性定位 sticky (了解)

粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的 语法：

选择器 {
  position: sticky;
  top: 10px;
}

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加 top， left， right， bottom 其中一个才有效

跟页面滚动搭配使用。兼容性较差， IE 不支持。

9. 定位显示层级 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序（z 轴）

语法：

选择器 {z-index: 1;}

• 定位元素的显示层级高于不定位的元素
• 绝对定位、固定定位、相对定位显示层级是一样的，后面写的元素显示在上面，按照书写顺序，后来居上
• 可以使用 z-index 给定位的元素设置显示层级，属性值是纯数字
• 数字越大显示层级越高，可以是负值（显示层级是负值的定位元素，会显示在不定位元素的下面）
• 只有定位的盒子才有 z-index 属性

10. 定位的拓展

10.1 定位元素（绝对和固定）的默认宽高计算规则

1. 绝对定位和固定定位的元素的宽高默认是被内容撑开的

2. 绝对定位和固定定位的元素如果没有设置固定的宽度，可以同时设置 left 和 right，对默认宽度有影响

3. 绝对定位和固定定位的元素如果没有设置固定的高度，可以同时设置 top 和 bottom，对默认高度有影响

10.2 绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto;水平居中，但是可以通过以下计算方法实现水平和垂直居中。

方案一:

position: absoltue;
让盒子的左侧移动到父级元素的水平中心位置
left: 50%;
top: 50%;
让盒子向左移动自身宽度的一半
margin-left: -宽度/2;   (宽度是元素自己的内容宽度+左右内边距)
margin-top: -高度/2;   (高度是元素自己的内容高度+上下内边距)

方案二:

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

10.3 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题。

10.4 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素