文章目录

1. CSS 基本介绍
2. 选择器
3. 常用元素属性
4. 元素的显示模式
5. 盒模型
6. 弹性布局

1. CSS 基本介绍

1.1 认识 CSS

CSS（Cascading Style Sheets）：

CSS，即层叠样式表是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
样式定义如何显示 HTML 元素
样式通常存储在样式表中
多个样式定义可层叠为一个，即同一个元素可以应用多个样式，这些样式之间会产生叠加

1.2 CSS 基本语法规范

1.2.1 基本语法

选择器 {
    
    
	一条/N条声明
}

选择器：绝对针对谁修改
声明：决定修改的内容
声明的属性是以键值对的形式写的，其中不同键值对之间以分号区号，每个键值对的键和值以冒号区分

内部样式示例：

<!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>test1</title>
    <style>
        p {
      
      
            /* 设置字体颜色 */
            color: green;
            /* 设置字体大小 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>我绿了</p>
</body>
</html>

CSS 代码可以放到一个专门的 style 标签里面（内部样式），style 标签本身放到页面的任意位置，一般是放到 head 标签中
CSS 中的注释符是 /* */，可以使用快捷键 Ctrl + /
上述示例中，选择器为段落标签 p，声明的内容包含将字体颜色 color 设置为 green，将字体大小 font-size 设置为 30px

1.2.2 样式风格

紧凑风格

p {
      
       color: green; font-size: 30px;}

展开风格（推荐）

p {
      
       
    color: green;
    font-size: 30px;
}

1.2.3 样式大小写

由于在 CSS 中不区分大小写，因此

在开发时，统一使用小写字母
属性名也是使用脊柱命名法，即一个属性若是由多个单词构成，中间用 - 隔开

1.2.4 空格规范

冒号后面带空格
选择器和 { 符号之间带有空格

1.3 引入方式

1.3.1 内部样式

基本介绍： 将 CSS 代码放到一个专门的 style 标签里面，style 标签本身可以放到页面的任意位置，一般是放到 head 标签中

示例代码：

<!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>test1</title>
    <style>
        p {
      
      
            /* 设置字体颜色 */
            color: green;
            /* 设置字体大小 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>我绿了</p>
</body>
</html>

优点： 内部样式能够实现样式和页面结构分离

缺点： 样式和页面结构分离的不够彻底，尤其是 CSS 内容较多时

1.3.2 行内样式

基本介绍： 将 CSS 代码以 style 属性的方式写到标签中

示例代码：

<!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>test1</title>
</head>
<body>
    <p style="color: green ;font-size: 30px">我绿了</p>
</body>
</html>

优点： 适合写简单的样式

缺点： 只针对某个标签生效，不能写太复杂的样式

注意： 行内样式的优先级较高，会覆盖其它样式

1.3.3 外部样式

基本介绍： 实际开发中最常用的方式，先创建一个 CSS 文件，再使用 link 标签引入 CSS

示例代码：

创建一个 CSS 文件（这里创建一个 style.css），里面写具体样式的内容
```
p {
      
      
    color: green;
    font-size: 30px;
}
```

在 HTML 文件中，通过 link 标签引入写好的 CSS

<!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>test1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>我绿了</p>
</body>
</html>

link 标签中的 rel 属性值固定为 stylesheet
link 标签中的 href 属性值为 CSS 的路径

优点： 外部样式可以使样式和页面结构彻底分离

缺点：使用外部样式会受到浏览器缓存影响，修改之后不一定立刻生效

补充： 浏览器的缓存知识

浏览器的缓存是计算机中一种常见的提升性能的技术手段。网页依赖的资源（HTML/CSS/JS/图片/字体等）通常是从服务器上获取的，如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来（即存到本地磁盘上），再次访问就可以直接从磁盘读取资源，从而提高访问效率。

可以通过 Ctrl + F5 强制刷新页面，使得浏览器重新获取 CSS 文件

2. 选择器

2.1 选择器的功能

CSS 选择器用于选中页面中指定的标签元素。就好比打游戏时，你要先选中攻击的敌人，之后才能给予对方你想造成的伤害。

2.2 选择器的种类

这里主要将选择器分成两大类，八小类来进行介绍

基础选择器：由单个选择器构成的
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
复合选择器：将多种基础选择器结合起来使用
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器

除了上述介绍的八种选择器，CSS 中还有很多其它的选择器，这里只具体介绍这八种常用的选择器

参考文档：https://www.w3school.com.cn/cssref/css_selectors.asp

2.3 基础选择器

2.3.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>test1</title>
    <style>
        p {
      
      
            color: green;
            font-size: 30px;
        }
        div {
      
      
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>我绿了</p>
    <div>我红了</div>
</body>
</html>

2.3.2 类选择器

基本介绍： 可以对标签设置一个或多个类 class 属性，然后选择器的对象可以为某个类名，选中后就能对所有属于该类的标签内容进行修改

语法细节：

标签中设置的 class 属性的值：不能使用纯数字、中文、标签名来命名
如果 class 属性的值过长，可以使用 - 分割
一个类可以被多个标签使用，一个标签也可以使用多个类（多个类名之间使用空格分割）
CSS 中使用点号 . 开头表示类选择器，点好 . 后面是具体的类名

特点： 可以差异化表示不同的标签，可以让多个标签使用同一个样式

示例代码：

<!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>test1</title>
    <style>
        .red {
      
      
            color: red;
        }
        .green {
      
      
            color: green;
        }
        .font-size {
      
      
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p class="red">我红了</p>
    <p class="green">我绿了</p>
    <div class="red font-size">我红了</div>
</body>
</html>

2.3.3 id 选择器

基本介绍： 可以对每个标签设置一个 id 属性，然后选择器的对象可以为 id 名，选中后就能对是某个 id 的标签的内容进行修改

语法细节：

每个标签都只能设置一个 id 属性，且 id 属性值是唯一的
CSS 中使用 # 开头表示 id 选择器，# 后面是具体的 id 值

特点： 通过 id 选择器能选择具体的某个标签进行内容的修改

示例代码：

<!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>test1</title>
    <style>
        #one {
      
      
            color: red;
        }
        #two {
      
      
            color: green;
        }
    </style>
</head>
<body>
    <p id="one">我红了</p>
    <p id="two">我绿了</p>
</body>
</html>

2.3.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>test1</title>
    <style>
        * {
      
      
            color: red;
        }

    </style>
</head>
<body>
    <p>我红了</p>
    <div>我也红了</p>
    <p>我们都红了</p>
</body>
</html>

2.3.5 基础选择器小结

选择器	作用	特点	优先级
标签选择器	能够选出所有相同的标签	不能差异化选择	较低
类选择器	能够选出一个或多个同类标签	根据需求选择，最灵活，最常用	较高
id 选择器	能够选出某个唯一 id 的标签	同一个 id 在一个 HTML 中只能出现一次	最高
通配符选择器	能够选出所有标签	特殊清空使用（如清楚浏览器的默认样式）	最低

由于选择器可以组合使用，因此在基础选择器中有一个优先级（即对元素的针对性，针对性越强，优先级就越高），组合的基础选择器会按照优先级更高的显示修改的内容

不过由于 CSS 还有复合选择器，所以优先级其实是有一个复杂的计算规则的，这个要根据具体情况判断

2.4 复合选择器

2.4.1 后代选择器

基本介绍： 后代选择器的选择对象为某个父元素的某个子元素（包括孙子元素）

语法细节：

元素1 元素2 {
    
    样式声明}

元素1是父级，元素2是子级
元素1和元素2之间要使用空格分割
后代选择器只会影响元素2，不会影响元素1
后代选择器不仅仅可以是标签选择器的组合，还可以是类选择器或 id 选择器的组合

示例代码：

<!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>test1</title>
    <style>
        ul li {
      
      
            color: red;
        }
        .green li {
      
      
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>弥豆子</li>
        <li>弥豆子</li>
        <li>弥豆子</li>
    </ul>
    <ol class="green">
        <li>善逸</li>
        <li>善逸</li>
        <li>善逸</li>
    </ol>
</body>
</html>

2.4.2 子选择器

基本介绍： 和后代选择器类似，选择器的对象为某个父元素的子元素，但是只能是子元素，不能是孙子元素

语法细节：

元素1>元素2 {
    
    样式声明}

元素1是父级，元素2是子级
元素1和元素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>test1</title>
    <style>
        .red>a {
      
      
            color: red;
        }
    </style>
</head>
<body>
    <div class="red">
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div>
</body>
</html>

2.4.3 并集选择器

基本介绍： 并集选择器用于选择多组标签，可以对这些标签集体声明

语法细节：

元素1,
元素2,
...,
元素N {
    
    样式声明}

通过逗号将各个元素分割开
任何基础选择器都可以使用并集选择器
并集选择器建议竖着写，每个选择器占一行

示例代码：

<!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>test1</title>
    <style>
        div,
        p,
        ul>li {
      
      
            color: pink;
        }
    </style>
</head>
<body>
    <div>弥豆子</div>
    <p>善逸</p>
    <ul>
        <li>伊之助</li>
        <li>碳治郎</li>
    </ul>
</body>
</html>

2.4.4 伪类选择器

基本介绍： 伪类选择器分为链接伪类选择器和 :focus 伪类选择器

链接伪类选择器

语法细节：

选择器的对象	含义
`a:link`	选择未被访问过的链接
`a:visted`	选择已被访问过的链接
`a:hover`	选择鼠标指针悬停在上的链接
`a:active`	选择鼠标按下了但是未弹起的链接

注意事项： 对于链接选择器，一般按照 LVHA （记忆规则“绿化”）的顺序书写，如果把 active 拿到前面去，就会导致 active 失效

示例代码：

<!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>test1</title>
    <style>
        a:link {
          
          
            color: red;
        }
        a:visited {
          
          
            color: black;
        }
        a:hover {
          
          
            color: blue;
        }
        a:active {
          
          
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">我是链接</a>
</body>
</html>

:focus 伪类选择器

基本介绍：:focus 伪类选择器可以选择获取焦点的 input 表单元素（这里只介绍这一种，理解就行）

示例代码：

<!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>test1</title>
    <style>
        .one>input:focus {
          
          
            color: red;
        }
        .two>input:focus {
          
          
            color: green;
        }
    </style>
</head>
<body>
    <div class="one">
        <input type="text">
        <input type="text">
    </div>
    <div class="two">
        <input type="text">
        <input type="text">
    </div>
</body>
</html>

2.4.5 复合选择器小结

选择器	作用	注意事项
后代选择器	选择后代元素	后代包含孙子元素
子选择器	选择子元素	子元素只能是儿子，不能是孙子
并集选择器	选择具有相同样式的元素	更好的做到代码复用
链接伪类选择器	选择不同状态的链接	注意 LVHA 书写顺序
:focus 伪类选择器	选择被选中的元素	这里只介绍 input:focus

3. 常用元素属性

CSS 的属性有很多，就像 Java 中很多的方法一样，这里只重点介绍一些常用元素。如需了解更多，可以看看参考文档。

参考文档：https://www.w3school.com.cn/cssref/index.asp

3.1 字体属性

3.1.1 文字字体

属性：

font-family

注意事项：

字体名称可以用中文，但是不建议
如果值有多个字体，则多个字体之间用逗号分割（将会从左到右查找字体，如果查找不到，会使用默认字体）
字体可以使用引号括起来，以防止字体之间有空格
建议使用常用字体，并且保证设置的字体在个人机器上存在

示例代码：

<!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>test1</title>
    <style>
        #one {
      
      
            font-family: '宋体';
        }
        #two {
      
      
            font-family: "Microsoft YaHei";
        }
    </style>
</head>
<body>
    <div id="one">我是宋体</div>
    <div id="two">我是微软雅黑</div>
</body>
</html>

3.1.2 文字大小

属性：

font-size

注意事项：

由于不同浏览器的默认字号不一样，因此最好给一个明确的值
font-size 的值可以是具体的数字，单位是像素px

font-size 的值也可以是固定的英文单词

值	描述
xx-small、x-small、small、medium、large、x-large、xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

实际上设置的字体中，字符框的高度会受浏览器的缩放影响，与实际设置的值不同

示例代码：

<!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>test1</title>
    <style>
        #one {
      
      
            font-size: 10px;

        }
        #two {
      
      
            font-size: xx-large;
        }
    </style>
</head>
<body>
    <div id="one">我是10px的大小</div>
    <div id="two">我是xx-large的大小</div>
</body>
</html>

3.1.3 文字粗细

属性：

font-weight

注意事项：

font-weight 设置的值可以是数字，没有单位，但是取值范围必须是[100，900]这个区间的整百的值

font-weight 设置的值可以是英文单词

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
inherit	规定应该从父元素继承字体的粗细。

数字400等同于 normal，而700等同于 bold。

示例代码：

<!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>test1</title>
    <style>
        #one {
      
      
            font-weight: 700;
        }
        #two {
      
      
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="one">我是加粗字体</div>
    <div id="two">我是加粗字体</div>
</body>
</html>

3.1.4 文字样式

属性：

font-style

注意事项：

font-style 设置的值可以为如下几个

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

其实很少把某个文字变倾斜，但是经常会把倾斜的字体改成正常的

示例代码：

<!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>test1</title>
    <style>
        #one {
      
      
            font-style: italic;
        }
        #two em{
      
      
            font-style: normal;
        }
    </style>
</head>
<body>
    <div id="one" >我背正改斜了</div>
    <div id="two"><em>我改邪归正了</em></div>
</body>
</html>

3.2 文本属性

3.2.1 文本颜色

属性：

color

注意事项：

color 的值可以是一些表示颜色的英文单词（red、green、blue、black等）
color 的值可以是十六进制，形如：#ff0000
color 的值可以是 RGB 方式，形式如：rgb(255, 0, 0)

补充： RGB 的简单介绍

计算机是通过 RGB 的方式来表示颜色的，R（红色）、G（绿色）、B（蓝色），如果将红绿蓝三个颜色都拉满，就会变成白色，如果这三种颜色都很浅则会变成黑色。通过对这三种颜色按照不同的比例搭配，就能混合出五彩斑斓的效果

色深表示一个颜色，在 CSS 中使用8个bit位来表示一个颜色，即一个字节表示一个颜色。

通过色深表示颜色有两种方法

一个是用十六进制表示，由于一个十六进制数字是4个bit位，因此一个颜色需要两个十六进制数字，一个RGB的值需要六个十六进制数字，即形如：#ff0000。（每两个十六进制数字表示一个颜色，00表示这个分量没有值，ff表示这个分量的值拉满，若是每个颜色的两位数都相同，则可以简化，例如 #ff0000 可以写出 #f00）

另一个直接对每个分量用十进制数字表示，由于一个颜色有8个bit位，故每个分量的值从0~255，写法形如：rgb(255, 0, 0)

示例代码：

<!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>test1</title>
    <style>
        #one {
      
      
            color: red;
        }
        #two {
      
      
            color: #ff0000;
        }
        #three {
      
      
            color: rgb(255,0,0);
        }
    </style>
</head>
<body>
    <div id="one" >弥豆子</div>
    <div id="two">善逸</div>
    <div id="three">伊之助</div>
</body>
</html>

3.2.2 文本对齐

属性：

text-align

注意事项：

text-align 的值可以是

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值

该属性不仅能控制文本对齐，也能控制图片等元素居中或者靠右

示例代码：

<!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>test1</title>
    <style>
        #one {
      
      
            text-align: left;
        }
        #two {
      
      
            text-align: center;
        }
        #three {
      
      
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="one" >弥豆子</div>
    <div id="two">善逸</div>
    <div id="three">伊之助</div>
</body>
</html>

3.2.3 文本装饰

属性：

text-decoration

注意事项：

text-decoration 的值可以为

值	描述
none	默认，即什么都不加
underline	定义文本下的一条线，即下划线
overline	定义文本上的一条线，即上划线
line-through	定义穿过文本下的一条线，即删除线
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

none 可以给 a 标签去掉下划线

示例代码：

<!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>test1</title>
    <style>
        #one {
      
      
            text-decoration: none;
        }
        #two {
      
      
            text-decoration: overline;
        }
        #three {
      
      
            text-decoration: underline;
        }
        #four {
      
      
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div id="one" >啥都没有</div>
    <div id="two">上划线</div>
    <div id="three">下划线</div>
    <div id="four">删除线</div>
</body>
</html>

3.2.4 文本缩进

属性：

text-indent

注意事项：

text-indent 的值可以是数字，单位可以有 px 或者 em。px 就是以像素单位，而 em 单位表示当前元素的文字大小，即 1em 表示一个文字大小
缩进可以是负值，表示往左缩进，会导致开头文字不在显示框中

示例代码：

<!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>test1</title>
    <style>
        /* #one {
            text-indent: 0em;
        } */
        #two {
      
      
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div id="one" >无缩进的文字</div>
    <div id="two">两个文字距离缩进的文字</div>
</body>
</html>

3.2.5 文本行高

属性：

line-height

注意事项：

行高指的是上下文本行之间的基线距离（行高=文字本身的高度+行间距）
line-height 的值为行高，单位是px

补充： HTML 中展示文字涉及到的几个基准线

示例代码：

<!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>test1</title>
    <style>
        div {
      
      
            font-size: 30px;
            line-height: 60px;
        }
    </style>
</head>
<body>
    <div>第一行</div>
    <div>第二行</div>
    <div>第三行</div>
</body>
</html>

3.3 背景属性

3.3.1 背景颜色

属性：

background-color

注意事项：

background-color 的值和 color 的值是一样的，可以通过三种方式设置
background-color 默认的值是 transparent，表示透明

示例代码：

<!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>test1</title>
    <style>
        .one {
      
      
            background-color: #ff0000;
        }
        .two {
      
      
            background-color: rgb(0,0,255);
        }
        .three {
      
      
            background: transparent;
        }
    </style>
</head>
<body>
    <div class="one">红色背景</div>
    <div class="two">蓝色背景</div>
    <div class="three">透明背景</div>
</body>
</html>

3.3.2 背景图片

属性：

background-image: url()

注意事项：

background-image 的 url 中是图片路径
url 上可以加引号，也可以不加
background-image 默认是按照“平铺”的方式来展示图片的

示例代码：

<!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>test1</title>
    <style>
        .one {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
        }
        .two {
      
      
            background-image: url(./image/善逸.jpg);
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
    <div class="two">善逸</div>
</body>
</html>

在这里插入图片描述

3.3.3 背景平铺

属性：

background-repeat

注意事项：

background-repeat 是用来设置平铺方式的，取值如下

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复
repeat-x	背景图像将在水平方向重复，即水平平铺
repeat-y	背景图像将在垂直方向重复，即垂直平铺
no-repeat	背景图像将仅显示一次，不进行平铺
inherit	规定应该从父元素继承 background-repeat 属性的设置。

background-repeat 默认取值是 repeat

示例代码：

<!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>test1</title>
    <style>
        .one {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            background-repeat: no-repeat;
        }
        .two {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            background-repeat: repeat-x;
        }
        .three {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 600px;
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div class="one">不平铺</div>
    <div class="two">水平平铺</div>
    <div class="three">垂直平铺</div>
</body>
</html>

3.3.4 背景位置

属性：

background-position

注意事项：

background-position 的值可以有三类

值	描述
top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

计算机的平面坐标系，左上角为原点，往右为x正轴，往下为y正轴
如果参数的两个值都是方位名词，则与前后参数顺序无关（如：left center 和 center left 一个意思）
如果只指定了一个方位名词，则第二个默认居中（如：left 其实表示 left center）
如果参数是精确值，则第一个肯定是x，第二个肯定是y（如：100 200 表示x为100，y为200）
如果参数是精确值，，且只给定了一个参数，则该参数一定是x，另一个默认垂直居中（如：100 表示横坐标为100，垂直居中）
如果参数是混合单位，则第一个值一定为x，第二个值为y（如：100 center 表示横坐标为100，垂直居中）

示例代码：

<!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>test1</title>
    <style>
        .one {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            background-repeat: no-repeat;
            background-position: 0 0;
        }
        .two {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            background-repeat: no-repeat;
            background-position: center center;
        }
        .three {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            background-position: 100% 100%;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="one">背景左上角</div>
    <div class="two">背景居中</div>
    <div class="three">背景右下角</div>
</body>
</html>

3.3.5 背景尺寸

属性：

background-size

注意事项：

background-size 的值可以有四类

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

contain 是把尺寸放到适应的最大尺寸，而 cover 是用背景图将背景区域完全覆盖掉，可能会导致部分区域超过显示区域

示例代码：

<!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>test1</title>
    <style>
        .one {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 600px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
        body {
      
      
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
</body>
</html>

3.4 圆角矩形

3.3.1 基本用法

border-radius

border-radius 的值表示矩形四个角内切圆的半径
内切圆半径越大，矩形的圆角化就越圆
border-radius 其实是一个符合写法，还可以针对四个角分别设置
- border-top-left-radius 表示左上角
- border-top-right-radius 表示右上角
- border-bottom-right-radius 表示右下角
- border-bottom-left-radius 表示左下角
border-radius 本身可以直接设置4个值，值的顺序是按照左上——右上——右下——左下顺时针排列

3.3.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>test1</title>
    <style>
        .one {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 600px;
            width: 600px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 600px;
        }
        body {
      
      
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
</body>
</html>

3.3.3 生成圆角矩形

当 border-radius 的值适合时，就能生成圆角矩形

示例代码：

<!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>test1</title>
    <style>
        .one {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 600px;
            width: 600px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-radius: 50px;
        }
        body {
      
      
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
</body>
</html>

4. 元素的显示模式

在 CSS 中，对于 HTML 的标签的显示模式有很多。这里主要介绍：块级元素和行内元素

4.1 块级元素

常见的块级元素：

h1 - h6
p
div
ul
ol
li
...

特点：

独占一行
高度、宽度、内外边距、行高都可以控制
宽度默认是父级元素宽度的100%
内部可以嵌套块级元素和行内元素

注意：

文字类的元素内部不能使用块级元素
p 标签主要用于存放文字，内部不能放块级元素，尤其是 div

4.2 行内元素

常见的行内元素：

a
strong
b
em
i
del
s
ins
u
span
...

特点：

不独占一行，一行可以显示多个元素
设置高度、宽度、行高均是无效的
左右外边距是有效的，上下外边距是无效的，内边距都是有效的
默认宽度就是本身的内容宽度
行内元素只能容纳文本和其它行内元素，不能放块级元素

4.3 改变显示模式

属性： 使用 display 属性可以修改元素的显示模式

display

display: block 表示改成块级元素
display: inline 表示改成行内元素

示例代码：

<!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>test1</title>
    <style>
        span {
      
      
            display: block;
        }
    </style>
</head>
<body>
    <span>弥豆子</span>
    <span>善逸</span>
</body>
</html>

5. 盒模型

5.1 基本介绍

每一个 HTML 元素都相当于一个矩形的“盒子”。这个盒子由如下几部分构成

边框 border：盒子的边框
内边距 padding：边框与内容之间的距离
外边距 margin：盒子与盒子之间的距离
内容 content：盒子里面装的东西

5.2 边框

5.2.1 基础属性

属性：

border-width
border-style
border-color

border-width 表示边框的粗细
border-style 表示边框的样式，默认是没边框
- solid 表示实线边框
- dashed 表示虚线边框
- dotted 表示点线边框
border-color 表示边框颜色
可以对边框的四个方向分别改变
- border-top 上边框
- border-bottom 下边框
- border-left 左边框
- border-right 右边框

示例代码：

<!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>test1</title>
    <style>
        .one {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            width: 300px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-width: 5px;
            border-style: solid;
            background-color: black;
        }
        body {
      
      
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
</body>
</html>

5.2.2 边框会撑大盒子

我们设置的 width 和 heigth 属性是不包含边框的。如果没有边框，此时元素的尺寸就和设置的是一样的；如果有了边框，那么整个元素就会被撑大。

为了在布局时，方便计算，我们更想要在设置尺寸时能够包含边框。可以将 box-sizing 属性设置为 border-box 来表示设置的 width 和 heigth 包含了边框。

* {
    
    
	box-sizing: border-box;
}

5.3 内边距

5.3.1 基础属性

属性： 通过 padding 属性来设置内容和边框之间的距离

padding

padding-top 表示上内边距
padding-bottom 表示下内边距
padding-left 表示左内边距
padding-right 表示右内边距

可以把多个方向的 padding 合并到一起，但是写法需要注意，示例如下

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

示例代码：

<!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>test1</title>
    <style>
        div {
      
      
            height: 200px;
            width: 300px;
            padding-top: 5px;
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <div>
        弥豆子
    </div>
</body>
</html>

5.3.2 内边距会撑大盒子

内边距其实也会撑大盒子，和边框一样，可以将 box-sizing 属性设置为 border-box 来表示设置的 width 和 heigth 包含了内边距。

* {
    
    
	box-sizing: border-box;
}

5.4 外边距

5.4.1 基础属性

属性： 外边距是控制盒子和盒子之间距离的，通过 margin 属性控制

margin

margin-top 表示上外边距
margin-bottom 表示下外边距
margin-left 表示左外边距
margin-right 表示右外边距

可以把多个方向的 margin 合并到一起，但是写法需要注意，示例如下

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

示例代码：

<!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>test1</title>
    <style>
        div {
      
      
            height: 200px;
            width: 300px;
            padding-top: 5px;
            padding-left: 5px;
            margin-top: 5px;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div>
        弥豆子
    </div>
    <div>
        弥豆子
    </div>
</body>
</html>

5.4.2 块级水平元素居中

前提： 把水平 margin 设为 auto，即 margin-left 和 margin-right 设为 auto

方法： 有三种方式

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：

该方法和 text-align 不一样（后面介绍），margin: auto 是给块级元素水平居中，text-align: center 是让行内元素或者行内块元素居中的

对于垂直居中，不能使用该方法

示例代码：

<!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>test1</title>
    <style>
        .one {
      
      
            background-image: url(./image/弥豆子.jpg);
            height: 300px;
            width: 300px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            border-width: 5px;
            border-style: solid;
            margin: auto;
        }
        body {
      
      
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">弥豆子</div>
</body>
</html>

5.5 去除浏览器默认样式

由于浏览器会给元素加上一些默认的样式，尤其是内外边距。因此为了保证不同浏览器上都能按照统一的样式显示，往往我们会去除浏览器的默认样式。方法如下

* {
    
    
    margin: 0;
    padding: 0;
}

6. 弹性布局

6.1 认识 flex 布局

flex 是 flexible box 的缩写，意思是”弹性盒子“，用来为盒装模型提供最大的灵活性。
任何一个容器都可以指定为 flex 布局
flex 布局的本质是给父盒子添加 display: flex 属性，来控制盒子的位置和排列方式
采用 flex 布局的元素，称为 flex 容器（flex container），简称”容器”，通过 display:flex 设置
flex 容器的所有子元素自动成为容器成员，称为 flex 项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。
当给父元素设置了 display: flex 属性，此时父元素里面的元素都要遵循弹性布局规则，并且子元素就不再按照块级元素/行内元素的规则来排列了

注意：
当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效

6.2 常用属性

6.2.1 justify-content

基本介绍：

该属性用于设置主轴上的子元素排列方式

属性取值：

取值	描述
flex-start	默认值，项目位于容器的开头
flex-end	项目位于容器的结尾
center	项目位于容器的中央
space-between	项目在行与行之间留有间隔
space-around	项目在行之前/行之间和行之后留有间隔

示例代码1： 未指定 justify-content 属性时，默认按照从左到右的方向布局

<!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>test1</title>
    <style>
        div {
      
      
        width: 100%;
        height: 150px;
        background-color: red;
        display: flex;
        }
        div span {
      
      
        width: 100px;
        height: 100px;
        background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>

示例代码2： 将示例代码1增加 justify-content: flex-end，此时元素都排列到右侧

示例代码3： 将示例代码1增加 justify-content: center，此时元素都居中排列

示例代码4： 将示例代码1增加 justify-content: space-around，此时元素平分了剩余空间

示例代码5： 将示例代码1增加 justify-content: space-between，此时两边元素贴近边缘，再平分剩余空间

6.2.2 align-items

基本介绍：

该属性用于设置侧轴上的元素排列方式

属性取值：

取值	描述
stretch	默认值，行拉伸以占据剩余空间
center	项目位于容器的中央
flex-start	项目位于容器的开头
flex-end	项目位于容器的末端
baseline	项目被定位到容器的基线

示例代码1： 未指定 align-items 属性时，子元素没有被显示指定高度就会填满父元素高度

<!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>test1</title>
    <style>
        div {
      
      
        width: 500px;
        height: 500px;
        background-color: green;
        display: flex;
        }
        div span {
      
      
        width: 150px;
        background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

示例代码2： 将示例代码1增加 align-items: center，此时元素实现垂直居中

示例代码3： 将示例代码1增加 align-items: flex-start，此时元素实现在最顶部

示例代码4： 将示例代码1增加 align-items: end，此时元素实现在最底部

示例代码5： 将示例代码1增加 align-items: baseline，此时元素对准基线

【Web 三件套】两万字带你入门 CSS

文章目录

1. CSS 基本介绍

1.1 认识 CSS

1.2 CSS 基本语法规范

1.2.1 基本语法

1.2.2 样式风格

1.2.3 样式大小写

1.2.4 空格规范

1.3 引入方式

1.3.1 内部样式

1.3.2 行内样式

1.3.3 外部样式

2. 选择器

2.1 选择器的功能

2.2 选择器的种类

2.3 基础选择器

2.3.1 标签选择器

2.3.2 类选择器

2.3.3 id 选择器

2.3.4 通配符选择器

2.3.5 基础选择器小结

2.4 复合选择器

2.4.1 后代选择器

2.4.2 子选择器

2.4.3 并集选择器

2.4.4 伪类选择器

2.4.5 复合选择器小结

3. 常用元素属性

3.1 字体属性

3.1.1 文字字体

3.1.2 文字大小

3.1.3 文字粗细

3.1.4 文字样式

3.2 文本属性

3.2.1 文本颜色

3.2.2 文本对齐

3.2.3 文本装饰

3.2.4 文本缩进

3.2.5 文本行高

3.3 背景属性

3.3.1 背景颜色

3.3.2 背景图片

3.3.3 背景平铺

3.3.4 背景位置

3.3.5 背景尺寸

3.4 圆角矩形

3.3.1 基本用法

3.3.2 生成圆形

3.3.3 生成圆角矩形

4. 元素的显示模式

4.1 块级元素

4.2 行内元素

4.3 改变显示模式

5. 盒模型

5.1 基本介绍

5.2 边框

5.2.1 基础属性

5.2.2 边框会撑大盒子

5.3 内边距

5.3.1 基础属性

5.3.2 内边距会撑大盒子

5.4 外边距

5.4.1 基础属性

5.4.2 块级水平元素居中

5.5 去除浏览器默认样式

6. 弹性布局

6.1 认识 flex 布局

6.2 常用属性

6.2.1 justify-content

6.2.2 align-items

猜你喜欢