一、回顾一下

上一篇中学习了在HTML文档中应用 CSS 的三种方法：

外部样式表

将CSS 编写在扩展名为.css 的单独文件中，一般是放在同一个文件夹下，并从 HTML<link> 元素引用它的情况：

 <link rel="stylesheet" href="styles.css">

内部样式表

内部样式表是指不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件<head>标签里的<style>标签之中。

<head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

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

注意的是，这里的CSS要写在<head>标签下

内联样式表 (少用)

内联样式表存在于 HTML 元素的 style 属性之中。其特点是每个 CSS 表只影响一个元素:

  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>

选择器

使用选择器样式化HTML中某些元素，但是注意有优先级

比如下面的代码，title的颜色最后是蓝色，这是由于类选择器优先于标签选择器

<h1 class="Title"> The title</h1>
<style>
    .Title{
        color: blue;
    }
    h1{
        color: red;
    }
</style>

选择器优先级的基本原则是：越特殊的选择器优先级越高，即id选择器大于伪类选择器大于标签选择器，多个class的选择器大于较少个class的选择器。

继承性：HTML标准中，规定了如果一个元素找不到样式表，那么就会把其父元素的样式应用在其身上。

<p>This is a text , <em>this is an em text,</em> 
    <strong>and this is a strong text</strong></p>
<style>
    p{
        color: blue;
    }
</style>

我们发现这段代码中的斜体和加粗部分，也和<P>一样变成蓝色

二、盒模型

在CSS中，每个元素其实都是以盒模型的方式构建的。每一个盒模型就是一个元素，在里面放入内容，便于设计者设计和开发者的编写。

一个典型的盒模型的组成如下图：

最外层的部分叫做margin，也就是外边距。外边距规定了两个盒模型之间的距离，通常来讲都是透明的。换句话说，其实网页上的所有盒模型其实是“紧贴”在一起的，用户看到的距离都是设置外边距的结果。再往里的部分是border，也就是边界。边界决定了一个盒模型的最外层。边界里面的就是padding，即内边距。内边距决定了内容到边框中间的距离，通常也是透明的。最里面的content就是实际的内容了。

我们在浏览器开发工具中，找到已计算选项卡，就可以找到对应元素的盒模型了。

内边距和边界

首先是内边距padding 它是包裹在内容最外面的一层，设定padding时，我们既可以将四个方向的宽度设定为不同，顺序为上右下左。

<div style="padding: 20px 20px 50px 20px">Here only one side of padding is 50px</div>

其后是边界border，边界其实就是一个边框，我们可以用border-width属性调整边框的宽度，当然也可以用单独的属性具体调整其中某一个方向的宽度，用border-style调整边框的样式，（一定要有border-style否则默认值的话是none，是无论如何都看不到的。）用border-color调整边框的颜色,注意这里的边界是斜对角的四个梯形。

元素显示

在一个大小固定的盒模型中，如果内容太多了就会溢出。这就是overflow属性。该属性有三个值：

visible，内容正常向下溢出不做任何处理；
hidden，溢出的内容会被隐藏起来看不到；
scroll，它会生成一个滚轮，让你方便的浏览所有的内容。

类似这样：溢出&隐藏&滚轮

Flex Box

一种新的排版模式：Flex Box。这是一种新的盒模型，它可以用来控制子盒模型的摆放朝向、摆放顺序、每个盒子的宽高、水平和垂直对齐以及是否允许折行等属性。也是目前使用的最广泛的模型。

<div class="container">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
<style>
    .container {
        display: flex;
        border: 2px solid #966;
    }

    .a, .b, .c {
        text-align: center;
        padding: 1em;
    }

    .a {
        background: greenyellow;
    }

    .b {
        background: coral;
    }

    .c {
        background: deepskyblue;
    }
</style>

结果如下：flex-direction属性定义了容器内元素的布局方向。如果是column，则元素的顺序为从上到下；若为column-reverse，则元素顺序从下到上。同理，row是从左到右，而row-reverse是从右到左。justify-content属性定义了模型内元素的对齐方式，默认为flex-start,即前端对齐。如果我们想居中对齐可以使用center，想在末端对齐可以用flex-end。而align-items属性定义了元素的垂直对齐方式，可以使用顶部对齐、底部对齐、居中对齐等。

前端学习之 CSS 进阶 | 青训营笔记

一、回顾一下

上一篇中学习了在HTML文档中应用 CSS 的三种方法：

外部样式表

内部样式表

内联样式表 (少用)

选择器

二、盒模型

内边距和边界

元素显示

Flex Box