层叠样式表 (Cascading Style Sheets).
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结
构分离.

一、基本语法规范

HTML 是页面的骨，CSS 就是页面的样式，就是皮，就是描述了任意一个网页的元素：大小、字体、颜色、背景、边框。每一个 CSS 包含两个部分：选择器+应用的属性：

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

选择器：决定针对哪个元素进行修改。
属性和值：针对被选中的元素进行。
声明的属性是键值对. 使用 ; 区分键值对, 使用:区分键和值.

所有的 CSS 代码，都是在 style 标签里写的。
如：

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

p 代表的是针对所有的p标签，color:red 针对的是所有p标签里的字体颜色都变为红色。

CSS 里的注释是 /* */，而不是 // 这种风格的。

<style>
    p {
        /*设置字体颜色*/
        color: red;
    }
</style>

二、引入方式

2.1 内部样式表

写在 style 标签中. 嵌入到 html 内部.
理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中.

<body>
    <style>
        p {
            color: red;
        }
    </style>
    <p>
        马尔可夫
    </p>
</body>

运行结果：

优点: 这样做能够让样式和页面结构分离.
**缺点: **分离的还不够彻底. 尤其是 css 内容多的时候.

实际开发中并不常用

2.2 行内样式表

通过 HTML 标签当中的 style 属性，来应用一些样式。只针对当前元素生效。

<body>
    <p style="color: rgb(188, 143, 180)">
        hello world
    </p>
</body>

运行结果：
颜色可以使用** RGB** 来表示。
**缺点: **不能写太复杂的样式。

这种写法优先级较高, 会覆盖其他的样式。如下：

<body>
    <style>
        h1 {
            color: blue;
        }
    </style>
    <h1 style="color: green">嘿嘿额hi</h1>
</body>

结果如下，绿色把蓝色覆盖了：

2.3 外部样式表

当 CSS 进一步复杂之后，就可以把 CSS 单独放到一个文件中，然后在 html 中单独引入！

实际开发中最常用的方式.

创建一个 css 文件。
使用** link 标签**引入外部的 css 。

div {
    color: cadetblue;
}

<!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>外部样式</title>
    <link rel="stylesheet" href="demo6.css">
</head>
<body>
    <div>啊这这这</div>
</body>
</html>

结果如下：

其中，link 标签中：

**rel 属性：**表示引入的文件类型，其中 stylesheet 表示 “样式表”，说明引入的是一个 CSS 文件。没有 rel 属性也可以，默认就是样式表。
**href 属性：**描述 css 文件的位置。

同时在开发者工具当中也可以看到 css 文件的引入：

**优点: **样式和结构彻底分离了。
**缺点: **受到浏览器缓存影响, 修改之后不一定立刻生效。

关于缓存: 这是计算机中一种常见的提升性能的技术手段. 网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的。如果频繁访问该网站, 那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了). 从而提高访问效率。可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件。

2.4 三种样式的优先级

行内样式 > 内部样式 > 外部样式。

三、代码风格

3.1 样式风格

紧凑风格：

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

展开风格（推荐）

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

3.2 样式大小写

CSS 和 HTML 一样不区分大小写，所以在使用的时候，统一使用小写就可以了，所以也就不存在 “驼峰命名法” 了。而是使用 脊柱命名法，就是使用 - 来分割 p {font-size: 20px;}

四、选择器

选择器的功能就是能够选中页面的元素（标签），可以一次选一个，也可以一次选一批。

4.1 基础选择器

1. 标签选择器（style）

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

这里就是对所有的 p 都会生效。

2. 类选择器（最常用）

可以随心所欲的选择任意想要的元素。首先，需要在 CSS 代码当中创建一个类名（以**.**开头的就是 CSS 中的类名），在对应的 HTML 元素中，通过 class 来引用这个类名，此时具有该类名的元素，就都会应用上相关的 CSS 属性。

<body>
    <style>
        /* 以.开头的就是 CSS 中的类名*/
        .red {
            color: red;
        }
    </style>
    <p class="red">hello world!</p>
    <p class="red">welcome to the world!</p>
    <p>hhhhh</p>
</body>

这样就把 red 类引入了前两个 p 标签，运行结果如下：

一个标签可以引入多个类：

<body>
    <style>
        /* 以.开头的就是 CSS 中的类名*/
        .red {
            color: red;
        }
        .font {
            font-size: 40px;
        }
    </style>
    <p class="red">hello world!</p>
    <p class="red font">welcome to the world!</p>
    <p>hhhhh</p>
</body>

运行结果：

通过空格来分割多个类：

**注意：**类名也不能乱起，不能以数字开头，不能是中文，不能是标签名....

3. id 选择器

和类选择器类似.

CSS 中使用 # 开头表示 id 选择器。
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

<body>
    <style>
        #student {
            color:aquamarine;
        }
    </style>
    <p id="student">I am a student from China!</p>
    <p>I am a teacher</p>
</body>

通过 id 选择器，就把 id = student 的标签变为了浅蓝色，运行结果如下：

4. 通配符选择器

使用 ***** 的定义, 选取所有的标签。不需要被元素引用。
使用的更少些，存在的意义往往是 “消除浏览器的默认样式”（一般是清除内外边距）。

<body>
    <style>
        * {
            background-color: darkorange;
        }
    </style>
</body>

把页面背景设为橘色，运行结果如下：

4.2 复合选择器

1. 后代选择器

又叫包含选择器. 选择某个父元素中的某个子元素.
**元素1 元素2 {样式声明}**

元素 1 和元素 2 要使用空格分割。
元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1。

代码示例：将 ol 中的 li 修改颜色，不影响 ul

<body>
    <style>
      /*意思就是先选中 ol，然后看 ol 里面有没有叫 li 的后代*/
        ol li {
            color: aquamarine;
        }
    </style>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>
</body>

运行结果：

注意：

后代不一定非得是子元素，也可以是孙子元素。

<body>
    <style>
      /*选中 ol，看看里面有没有 p的后代，没有再从 li 里面看有没有 p*/
        ol p {
            color: red;
        }
    </style>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>
            <p>天罚！！</p>
        </li>
    </ol>
</body>

运行结果：

后代选择器不一定非得是标签选择器的组合，也可以是任意的基础选择器的组合。

<body>
    <style>
        .list p {
            color:blue;
        }
    </style>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol class="list">
        <li>ddd</li>
        <li>eee</li>
        <li>
            <p>哈哈哈哈哈！！</p>
        </li>
    </ol>
</body>

运行结果：

后代选择器不一定非得是两层，也可以是很多层。

<body>
    <style>
        .list li p {
            color:blue;
        }
    </style>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol class="list">
        <li>ddd</li>
        <li>eee</li>
        <li>
            <p>哈哈哈哈哈！！</p>
        </li>
    </ol>
</body>

：先找到类名为 list 的元素，然后再找到里面的 li 标签，再找到里面的 p 标签。li 不一定是 .list 的子元素，也可以是孙子元素等。p 也不一定是 li 的子元素，也可以是孙子元素等。

运行结果：

2. 子选择器

只能选中子标签。
**元素1>元素2 {样式声明}**
先找元素1，然后在元素1里面找元素2，元素2必须是元素1的子元素，不能是孙子元素。

举例：改变 p 标签的字体颜色：
错误示例：

<body>
    <style>
      /*p 不是 .list 的子元素，是孙子元素*/
        .list>p {
            color:blue;
        }
    </style>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol class="list">
        <li>ddd</li>
        <li>eee</li>
        <li>
            <p>哈哈哈哈哈！！</p>
        </li>
    </ol>
</body>

正确代码：

<body>
    <style>
      /*p是li的子元素，而li又是.list的子元素*/
        .list>li>p {
            color:blue;
        }
    </style>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol class="list">
        <li>ddd</li>
        <li>eee</li>
        <li>
            <p>哈哈哈哈哈！！</p>
        </li>
    </ol>
</body>

3. 并集选择器

用于选择多组标签. (集体声明)
元素1，元素2 {样式声明}

通过逗号分割等多个元素.
表示同时选中元素 1 和元素 2
任何基础选择器都可以使用并集选择器.
并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

代码示例：将苹果，鸭梨和橙子的字体变大：

<body>
    <style>
        div,ul>li {
            font-size: 30px;
        }
    </style>
    <div>苹果</div>
    <h3>香蕉</h3>
    <ul>
        <li>鸭梨</li>
        <li>橙子</li>
    </ul>
</body>

运行结果：

4. 伪类选择器

伪类选择器，其实它是属于一些特殊场景的应用。
伪类选择器格式：选择器 + 冒号 + 不同元素的状态+{应用属性}。

元素状态：

**:link**** **选择未被访问过的链接。
**:visited**** **选择已经访问过的链接。

上面这两个状态是特殊针对 a 标签的。

**:hover**** **选择鼠标指针悬停上的链接。
**:active**** **选择鼠标按下但是未弹起的链接。

上面这个两个状态不仅针对 a 标签能生效，针对其他标签也能生效。

注意：

在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。

在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。

常用的是 hover 和 active。

<body>
    <style>
        /*未访问过的样式*/
        a:link {
            color:black;
        }
        /*已经访问过的样式*/
        a:visited {
            color:red;
        }
        /*鼠标悬停的时候的样式*/
        a:hover {
            color:dodgerblue;
        }
        /*鼠标按下但是未弹起的样式*/
        a:active {
            color:purple;
        }
    </style>
    <a href="https://www.sogou.com">搜狗</a>
</body>

运行结果如下：
未访问的样子：

如何让一个已经被访问过的链接恢复成未访问的状态? 清空浏览器历史记录即可. **ctrl + shift + delete**

**:force**伪类选择器：
选取获取焦点的 input 表单元素。

<body>
    <style>
        div>input:focus {
            color:red;
        }
    </style>
    <div>
        <input type="text">
        <input type="text">
    </div>
</body>

当你选中一个输入框中，其中的字体颜色为红色，其他未被选中的则为黑色：

五、常用元素属性

CSS 属性有很多, 可以参考文档
www.w3school.com.cn/cssref/inde…

5.1 字体属性

body { 
  font-family: '微软雅黑'; 
  font-family: 'Microsoft YaHei';
}

字体名称可以用中文, 但是不建议.
多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
如果字体名有空格, 使用引号包裹.
建议使用常见字体, 否则兼容性不好.

示例代码：

<body>
    <style>
        .font-family .one {
            font-family: 'Microsoft YaHei';
        }
        .font-family .two {
            font-family: '宋体';
        }
    </style>
    <div class="font-family">
        <div class="one">
            这是微软雅黑
        </div>
        <div class="two">
            这是宋体
        </div>
    </div>
</body>

运行结果：

设置字体大小

通过 font-size 来设置，不过一定要有 px 作为单位:

<body>
    <style>
        .font-family .one {
            font-family: 'Microsoft YaHei';
            font-size: 30px;
        }
        .font-family .two {
            font-family: '宋体';
            font-size: 15px;
        }
    </style>
    <div class="font-family">
        <div class="one">
            这是微软雅黑
        </div>
        <div class="two">
            这是宋体
        </div>
    </div>
</body>

运行结果：

设置字体粗细

通过 font-weight 来设置粗细，最大是 900，最小是 100 ：

<body>
    <style>
        .font-family .one {
            font-family: 'Microsoft YaHei';
            font-size: 30px;
            font-weight: 700;
        }
        .font-family .two {
            font-family: '宋体';
            font-size: 15px;
            font-weight: 100;
        }
    </style>
    <div class="font-family">
        <div class="one">
            这是微软雅黑
        </div>
        <div class="two">
            这是宋体
        </div>
    </div>
</body>

结果：

也可以使用英文来表示粗细，bold == 700，bolder 特粗体，400 是不变粗 ==normal，lighter 细。

字体样式

通过 font-style 来完成

<body>
    <style>
        .font-family .one {
            font-family: 'Microsoft YaHei';
          /*设置倾斜*/
            font-style: italic;
        }
        .font-family .two {
            font-family: '宋体';

        }
    </style>
    <div class="font-family">
        <div class="one">
            这是微软雅黑
        </div>
        <div class="two">
            这是宋体
        </div>
    </div>
</body>

运行结果：

**font-style: italic**设置倾斜。
**font-style: normal**取消倾斜

5.2 文本属性

文本颜色

通过 color 来决定文本颜色：

直接使用单词来表示颜色，不过表示的种类有限。

<body>
    <style>
        div {
            color :aquamarine;
        }
    </style>
    <div> 哦哦哦哦哦</div>
</body>

运行结果：

使用 rgb 来表示：r 就是 red 表示红色，g 就是 green 表示绿色，b 就是 blue 表示蓝色。通过 rgb 就可以表示各种各样的颜色。这三个分量的表示范围就是：0-255。

<body>
    <style>
        div {
            color :rgb(255, 0, 0);
        }
    </style>
    <div> 哦哦哦哦哦</div>
</body>

运行结果：

通过 十六进制 来表示 rgb：十六进制就是 00-FF ，记得前面要加 #：

<body>
    <style>
        div {
            color :#0000ff;
        }
    </style>
    <div> 哦哦哦哦哦</div>
</body>

rgba 就是多了一个透明度，可以弄成那种模糊类型的样子。a 的范围为【0，1】，1 表示完全不透明，0 表示完全透明

<body>
    <style>
        div {
            color :rgb(255, 0, 0);
            background-color: rgba(0, 255, 0, 0.3);
        }
    </style>
    <div> 哦哦哦哦哦</div>
</body>

文本对齐

控制文字水平方向的对齐。

不光能控制文本对齐, 也能控制图片等元素居中或者靠右。

**text-align:[值]**

**center：**居中对齐
**left：**左对齐
**right：**右对齐

<body>
    <style>
        .one {
            text-align: left;
        }
        .two {
            text-align: center;
        }
        .three {
            text-align: right;
        }
    </style>
    <div class="one">
        这是一段话
    </div>
    <div class="two">
        这是另一段话
    </div>
    <div class="three">
        这是另外一段话
    </div>
</body>

运行结果：

文本装饰

通过 text-decoration 来实现文本装饰
常用取值：

underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]

<body>
    <style>
        .one {
            text-decoration: overline;
        }
        .two {
            text-decoration: underline;
        }
        .three {
            text-decoration: line-through;
        }
        .four {
            text-decoration: none;
        }
        .five {
            text-decoration: none;
        }
    </style>
    <div class="one">上划线</div>
    <div class="two">下划线</div>
    <div id="three">删除线</div>
    <div id="four">无事发生</div>
    <a href="#">普通链接</a> <br/>
    <a href="#" class="five">none 可以给a标签去掉下划线</a>
</body>

运行结果：

文本缩进

控制段落的首行缩进 (其他行不影响)
**text-indent:[值]**

单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小（如当前字体大小为10px，则 2em = 20px，0.5em=5px）
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

<body>
    <style>
        p {
            text-indent: 2em;
        }
    </style>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, ex voluptatibus dolor veniam laborum sit, dolores ea perferendis amet, laboriosam earum repudiandae doloribus saepe harum iste! Esse culpa aliquid vel.</p>
</body>

运行结果：

文本行高

行高就是字体大小 + 行间距，其实就是顶线-顶线之间的距离（或者底线-底线的距离等等），通过 **line-height **来表示，就像这样：

不设置行高：

<body>
    <div class="one">这是一行字</div>
    <div id="two">这是另一行字</div>
    <div id="three">另一行字</div>
</body>

设置行高：

<body>
    <style>
        .two {
            line-height: 50px;
        }
    </style>
    <div class="one">这是一行字</div>
    <div class="two">这是另一行字</div>
    <div class="three">另一行字</div>
</body>

上下边距是相等的, 此处字体大小是 16px, 行高 50px, 上下边距就分别是 (50-16)/2 = 17px

设置行高的时候，会同时对上下两个方向都产生影响，上下两个边距都是均等的，所以行高可以实现垂直方向的文本居中对齐： 行高和标签(元素)一样高就可以实现垂直居中了：

<body>
    <style>
        div {
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color: red;
            text-align: center;
            line-height: 150px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

5.3 背景属性

背景颜色

通过 background-color 来实现，用法和 color 非常相似：英文单词，rgb，十六进制数字都可以。以 rgb 为例：

<body>
    <style>
        div {
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color: rgb(0,0,255);
            text-align: center;
            line-height: 150px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

结果如下：

transparent

就是背景透明（应用了父元素的背景）如果不使用 transparent 的话：

<body>
    <style>
        div {
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color: rgb(0,0,255);
            text-align: center;
            line-height: 150px;
        }
        body {
            background-color: rgb(0,255,0);
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

运行结果如下，就还是设置的标签的颜色：

使用 transparent 之后：

<body>
    <style>
        div {
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color: transparent;
            text-align: center;
            line-height: 150px;
        }
        body {
            background-color: rgb(0,255,0);
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

这样就和父类的元素颜色一样了：

如果不写 background-color 的话，也会默认应用父元素的背景。

5.4 背景图片

通过 background-image 来设置背景图片：
比 image 更方便控制位置(图片在盒子中的位置)

注意：

url 不要遗漏.

url 可以是绝对路径, 也可以是相对路径

url 上可以加引号, 也可以不加.

<body>
    <style>
        div {
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-image: url("./img/1.jpg");
            color: aliceblue;
            text-align: center;
            line-height: 150px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

运行结果：

如果把 div 的大小调大之后，图片也就跟着变大了：

<body>
    <style>
        div {
            width: 2000px;
            height: 1500px;
            font-size: 20px;
            background-image: url("./img/1.jpg");
            color: aliceblue;
            text-align: center;
            line-height: 150px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

运行结果：

不过要注意的是，设置背景图之后，默认是一个平铺效果。

平铺效果

通过 background-repeat 就可以设置是否要平铺了：
重要取值，默认为 repeat：

repeat: 平铺
**no-repeat: **不平铺
repeat-x: 水平平铺
**repeat-y: **垂直平铺

<body>
    <style>
        div {
            width: 2000px;
            height: 1500px;
            font-size: 20px;
            background-image: url("./img/1.jpg");
            background-repeat: no-repeat;
            color: aliceblue;
            text-align: center;
            line-height: 150px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

这样设置之后，就没有平铺效果了：

背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方：

<body>
    <style>
        div {
            width: 2000px;
            height: 1500px;
            font-size: 20px;
            background-image: url("./img/1.jpg");
            background-repeat: no-repeat;
            background-color: gold;
            color: aliceblue;
            text-align: center;
            line-height: 150px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

运行结果：

图片位置

通过 background-position 就可以实现图片的位置了，有两个参数，一个是横坐标，一个是纵坐标：
参数有三种风格：

方位名词: (top, left, right, bottom)
精确单位: 坐标或者百分比(以左上角为原点)
混合单位: 同时包含方位名词和精确单位

注意：

如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)

如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )

如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)

如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.

如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)

背景尺寸为 1000px * 400px：

<body>
    <style>
        div {
            width: 1000px;
            height: 400px;
            font-size: 20px;
            background-image: url("./img/2.jpg");
            background-repeat: no-repeat;
            background-color: brown;
            background-position: 50px 50px;
            color: aliceblue;
            text-align: center;
            line-height: 150px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

这里就是设置横纵坐标都是 50 像素：

如果把参数都设置为 center center，就是水平垂直居中。或者只写一个 center 也是居中，通过 top、left、right、bottom 就可以设置上下左右。

top left：

center center：

图片大小

通过 background-size 来调整背景图片大小：background-size: length|percentage|cover|contain;

可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

<body>
    <style>
        div {
            width: 1100px;
            height: 600px;
            font-size: 20px;
            background-image: url("./img/2.jpg");
            background-color: brown;
            background-repeat: no-repeat;
            background-size: 150px 150px;
            color: aliceblue;
            text-align: center;
            line-height: 150px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

运行结果：

注意体会 contain 和 cover 的区别. 当元素为矩形(不是正方形) 时, 区别是很明显的.
contain：

cover：

5.5 圆角矩形

HTML 里面默认都是长方形，尖锐的样子，通过变成圆角的样子就会变得美观了。通过 border-radius 来变成圆角：**border-radius: length;**
length 是内切圆的半径. 数值越大, 弧线越强烈。

<body>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: brown;
            color: white;
            border-radius: 20px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

生成圆形

让 border-radius 的值为正方形宽度的一半即可

<body>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: brown;
            color: white;
            border-radius: 100px;
        }
    </style>
    <div></div>
</body>

生成圆角矩形

让 border-radius 的值为矩形高度的一半即可

<body>
    <style>
        div{
            width: 400px;
            height: 200px;
            background-color: brown;
            color: white;
            border-radius: 100px;
        }
    </style>
    <div></div>
</body>

展开写法

border-radius 是一个复合写法. 实际上可以针对四个角分别设置.

<style>
  border-radius:2em;

  /*等价于*/
  border-top-left-radius:2em;
  border-top-right-radius:2em; 
  border-bottom-right-radius:2em;
  border-bottom-left-radius:2em;
</style>

<style>
  border-radius:10px 20px 30px 40px;

  /*等价于（按照顺时针排列）*/
  border-top-left-radius:10px;
  border-top-right-radius:20px; 
  border-bottom-right-radius:30px;
  border-bottom-left-radius:40px;
</style>

六、Chrome调试工具来查看 CSS 属性

打开浏览器

有两种方式可以打开 Chrome 调试工具

直接按 F12 键
鼠标右键页面 => 检查元素

标签页含义

七、元素的显示模式

在 CSS 中, HTML 的标签的显示模式有很多. 此处只重点介绍两个:

块级元素
行内元素

块级元素

常见元素：

h1 - h6
p
div
ul
ol
li
.....

特点：

独占一行
高度, 宽度, 内外边距, 行高都可以控制
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子), 里面可以放行内和块级元素.

<body>
    <style>
        .demo1 .parent {
            width: 500px;
            height: 500px;
            background-color: green;
        }
        .demo1 .child {
            height: 200px;
            background-color: red;
        }
    </style>
    <div class="demo1">
        <div class="parent">
            <div class="child">child1</div>
            <div class="child">child2</div>
        </div>
    </div>
</body>

运行结果：

行内元素/内联元素

常见元素：

a
em
del
i
s
u
span
....

特点：

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

<body>
    <style>
        .demo2 span {
            width: 200px;
            height: 200px;
            background-color: brown;
        }
    </style>
    <div class="demo2">
        <span>child1</span>
        <span>child2</span>
        <span>child3</span>
    </div>
</body>

运行结果：

行内元素和块级元素的区别

块级元素独占一行, 行内元素不独占一行
块级元素可以设置宽高, 行内元素不能设置宽高.
块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置

改变显示模式

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

可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素

**display: block;** 改成块级元素【常用】
**display: inline;** 改成行内元素【很少用】
**display: inline-block;** 改成行内块元素
**display: none;**** **隐藏元素

行内块元素（相当于是一个杂交种：不独占一行，但是能设置高度和宽度）【input，img…】

改成块级元素：display: block

举例：a 标签是一个行内元素

<body>
    <style>
        a {
            width: 200px;
            height: 200px;
        }
    </style>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
</body>

通过 display 的 block 就可以把行内元素转换为块级元素：

<body>
    <style>
        a {
            width: 200px;
            height: 200px;
            display: block;
        }
    </style>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
</body>

改成行内块元素：display: inline-block

<body>
    <style>
        a {
            width: 200px;
            height: 200px;
            display: inline-block;
        }
    </style>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
</body>

结果如下：

当拖动右边的边框的时候，发现位置可以变化：

隐藏元素：display: none

<body>
    <style>
        a {
            width: 200px;
            height: 200px;
            display: none;
            background-color: red;
        }
    </style>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
</body>

运行结果：

这样就完成了元素的隐藏，不过开发者根据当中还是可以看到这里的元素的。

八、盒模型

每一个 HTML 元素就相当于是一个矩形的 "盒子"
这个盒子由这几个部分构成

边框 border
内容 content
内边距 padding
外边距 margin

这个模型其实就是开发者工具当中下面的小盒子：

像盖房子，房子的墙，就是边框，房子和房子之间的距离，就是外边距，家具和墙的距离就是内边距，家具就是内容：

因此就可以通过 CSS 属性来设置这几个方面的尺寸：

边框：border
内边距：padding
外边距：margin

边框 border

基础属性

粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框

颜色: border-color

<body>
    <style>
        div {
            width:500px;
            height: 250px;
            border-width: 10px;
            border-style: solid;
            border-color: brown;
        }
    </style>
    <div>test</div>
</body>

运行结果：

支持简写，没有顺序要求：

border: 1px solid red;

可以改四个方向的任意边框：

border-top/bottom/left/right

下面的代码只给上边框设置为紫色，其余为棕色：

<body>
    <style>
        div {
            width:500px;
            height: 250px;
            border: 10px solid brown;
            border-top: 10px solid yellow;
        }
    </style>
    <div>test</div>
</body>

运行结果：

边框会撑大盒子

可以看到，width，height 是500*_250，而最终整个盒子的大小是 520*_270

通过 box-sizing 属性设置为 border-box 可以修改浏览器的行为, 使边框不再撑大盒子

<body>
    <style>
      /* *为通配符选择器*/
        * {
            box-sizing: border-box;
        }
        div {
            width:500px;
            height: 250px;
            border: 10px solid brown;
            border-top: 10px solid yellow;  
        }
    </style>
    <div>test</div>
</body>

内边距：padding

通过 padding 来设置，设置的是边框和内容之间的距离。直接设置的话，是设置四个方向：

<body>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 2px black solid;
            box-sizing: border-box;
            padding: 50px; 
        }
    </style>
    <div>这是一个元素</div>
</body>

运行结果：

当然也可以像圆角矩形那样单独设置四个方向。padding 默认情况下，也会撑大元素，通过 box-sizing 的 border-box 也可以防止撑大盒子。

外边距：margin

控制盒子和盒子之间的距离.

margin-top
margin-bottom
margin-left
margin-right

<body>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 2px black solid;
            box-sizing: border-box;
            padding: 50px; 
        }
        .one {
            margin-bottom: 10px;
        }
    </style>
    <div class="one">这是一个元素</div>
    <div class="two">这是一个元素</div>
</body>

这里设置下边距为 10px：

不过两个元素的外边距重合的时候，就是元素1设置了下边距，元素2设置了上边距，两者的距离并不会加起来，而是取两种的较大值：

<body>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 2px black solid;
            box-sizing: border-box;
            padding: 50px; 
        }
        .one {
            margin-bottom: 10px;
        }
        .two {
            margin-top: 15px;
        }
    </style>
    <div class="one">这是一个元素</div>
    <div class="two">这是一个元素</div>
</body>

运行结果：

这种叫做外边距塌陷，只在垂直方向会有这种情况，水平情况不会有。

复合写法：

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

块级元素水平居中

前提：

指定宽度(如果不指定宽度, 默认和父元素一致)
把水平 margin 设为 auto

通过 margin 也可以实现一个元素的水平居中，当然元素是块级元素 ：通过把水平方向的外边距设置为 auto（浏览器自适应），此时就会达到水平居中的效果：

<body>
    <style>
        .one {
            width: 500px;
            height: 200px;
            background-color: brown;
        }
        .two {
            width: 200px;
            height: 100px;
            background-color:aquamarine;
            margin: 0 auto;
        }
    </style>
    <div class="one">
        <div class="two">
            这是一个元素
        </div>
    </div>
</body>

结果如下：

注意：这个水平居中的方式和 text-align 不一样. margin: auto 产生的水平居中是整个元素在父元素中水平居中。 text-align: center 元素里的文字，水平居中。

另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.

九、弹性布局

弹性布局主要是安排页面上的元素的位置，也就是排列方式。默认的网页布局，是从上往下的，实际的网页，不仅仅需要从上到下，也需要从左到右。而 flex 布局就是根据这样来的。默认情况下的排列：

<body>
    <style>
        .parent {
            width: 100%;
            height: 200px;
            background-color: brown;
        }
        .one,.two,.three {
            width: 100px;
            height: 100px;
            background-color:aquamarine;
        }
    </style>
    <div class="parent">
        <div class="one">这是一个元素</div>
        <div class="two">这是一个元素</div>
        <div class="three">这是一个元素</div>
    </div>
</body>

运行结果如下，默认是从上到下排列的：

使用 flex

fiex 布局的基本概念：

被设置为 display:flex 属性的元素, 称为 **flex container **
它的所有子元素立刻称为了该容器的成员, 称为 flex item
flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

使用弹性布局之后，就可以在横行当中排列了：

<body>
    <style>
        .parent {
            width: 100%;
            height: 200px;
            background-color: brown;
            display: flex;
        }
        .one,.two,.three {
            width: 100px;
            height: 100px;
            background-color:aquamarine;
        }
    </style>
    <div class="parent">
        <div class="one">这是一个元素</div>
        <div class="two">这是一个元素</div>
        <div class="three">这是一个元素</div>
    </div>
</body>