“我是满船的烟波，你是海底的星河。”

Web：CSS操作手册

轮到CSS了，按照惯例给出前端学习路线
顺便给出一些闯关式教程：w3schools 和 freecodecamp
因为盒模型在之前的HTML里提到了所以这里就不说了
就是要注意一下布局排版的时候其原理是根据盒模型的block, inline 或者 inline-block

还是先简单介绍一下CSS，层叠样式表（Cascading Style Sheet），是为网页添加样式的代码，不过注意他并不是编程语言
一个网页，即使不存在CSS也完全可以正常显示，因为CSS本身用的就是HTML中的元素，给这个元素设置属性，添加样式。
比如在HTML中，我们想把一个标题变为红色：

<h2 style="color: red;">I Like Cats</h2>

但是，随着属性的增多（背景色，字体，字号，边框…）和元素的增加（图片、标题、段落、链接…），这会导致HTML文件变得十分冗长难读
于是，聪明的程序员们把这一部分关于样式的代码分离出来，形成了CSS。
我们想给index.html文件添加CSS样式，可以新建index.css文件，并在HTML的head中添加如下代码：

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

这样就绑定了HTML文件和他的CSS文件

CSS选择器

既然我们分离出了CSS文件，那么CSS要怎样知道我修改的是哪一个元素呢？
于是就出现了CSS选择器，即CSS中用于选定元素的语法：（点击可跳转到MDN文档）

优先级：!important > ID > 类选择器 > 子代选择器
当一个属性声明!important之后，它将覆盖任何其他声明，即为最终显示。

p {
  color: red !important;
}

遇到再慢慢往里加吧~

/* 背景图片 */
background-image: url(../img/background-img.jpg);
/* 透明度 */
opacity: 0.75;

/* 全大写， 首字母大写 */
text-transform: uppercase;
text-transform: capitalize;
/* 居中 */
text-align: center;
/* 字体 */
font-family: Arial, Helvetica, sans-serif;
/* 加粗 */
font-weight: bold;
/* 斜体 */
font-style: italic;
/* 字体颜色，背景颜色 */
color: black;
background-color: white;

`a:link`    { ... }   /* 未访问过的链接 */
`a:visited` { ... }   /* 已访问过的链接 */ 
`a:hover`   { ... }   /* 鼠标移到链接上的样式 */
`a:active`  { ... }   /* 鼠标在连接上按下时的样式 */
`a:focus`   { ... }   /* 获得焦点时的样式 */
/* 去掉下划线 */
text-decoration: none;

border: 1px solid rgba(255, 255, 255, 0.5);	/* 边框粗细、样式、颜色（透明度） */
border-radius: 3px;	/* 边框圆角弧度 */

/* 超出滚动 **/
overflow: scroll;
/* 隐藏 */
visibility: hidden;

Layout布局

浮动布局 Float

这个布局依赖于元素的float属性，其包含三个值：

• left — 将元素浮动到左侧。
• right — 将元素浮动到右侧。
• none — 默认值，不浮动。
• inherit — 继承父元素的浮动属性。

默认情况下，HTML会根据代码中元素的顺序从上到下布局，我们称其为正常布局流 (normal flow)
而当元素float设置为left或right时，这一元素会浮动到左侧或右侧，并且从正常布局流中移除，其他的内容就会在这个元素周围环绕
为了避免父元素高度坍塌而无法被撑开，最好给父元素添加以下属性：

fater-element:after {
    content: '';
    display: block;
    clear: both;
}

这里就不举例了，可以看看参考文档里的例子，都非常浅显易懂hh

位置布局Position

和浮动布局类似，位置布局依赖的属性是position属性，包含几个值：

• static — 默认值。表示“将元素放在文档正常布局流的默认位置”，说了等于说好吧。
• relative — 相对定位。允许我们相对于元素在正常的文档流中的位置移动它，即使会导致两个元素重叠。
• absolute — 绝对定位。表示将元素从正常布局流中移出，类似将其单独放在一个图层中。使用top和rigth（或bottom和right）指定位置，参照对象是“离它最近的已定位的祖先元素”。
• fixed — 固定定位。和绝对定位类似，但是它让元素相对浏览器窗口固定，而不是另外一个元素。比如某些页面右下角的回到顶部的按钮
• sticky — 粘性定位。通常情况下其和static一样，当它的相对窗口位置 (offset from the viewport) 达到某一个预设值时（通过top和rigth等设置），他就会像position: fixed一样定位。

还是懒得举例，知乎的这篇文章里的例子不错，有疑问的可以去看看：几种常见CSS布局
其中粘性定位较新提出，所以需要参考MDN：粘性定位

表格布局 Table

在古早时期，许多浏览器还不支持CSS的时候，表格布局最为流行。
网页的页眉、页脚、不同的列等可以放在不同的表行和列中，这行之有效，却也伴随着许多问题——布局不灵活、形式单一，代码冗杂，难以调试等。

声明方法十分简单：display: table;
然后可以根据我们的想法来设置行和列，比如一个父元素声明display: table-row;，其内部的子元素声明display: table-cell;。这样就可以简单实现一行的布局。
此外，在表格中，可以通过声明以下属性来让元素内容显示在表格底部。

  display: table-caption;
  caption-side: bottom;

具体例子可见MDN：表格布局

网格布局 Grid

网格布局比表格布局更新，通过声明display: grid来实现
在父元素（containesr）中，我们可以规定网格每行的列数、列宽度、列间隙等属性
而在子元素中，我们可以通过 grid-column 和 grid-row设置元素所占据的网格位置

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}

其中，grid-column: 2 / 4;表示该元素占据位置从第二列开始，到第四列结束（不包括）。即占据2、3列。
具体例子可见MDN：Grid 布局

弹性布局 Flex

Flex即Flexible Box，是另外一种布局方式。上述的布局方式依赖 display 属性 + position属性 + float属性
而Flex则有着一套自己的属性和布局方式
相对而言功能性和可靠性都是Flex高一点，所以能用Flex的话还是推荐用Flex

在文档中，采用 Flex 布局的元素，称为 Flex 容器（flex container），即父元素；而其内部的子元素则称为 Flex 项目（flex item）。不过为了方便理解我就叫父元素和子元素了。
还是在文档中，水平方向称为主轴（main axis），垂直方向称为交叉轴（cross axis）

一般来说，任意一个元素都可以指定为Flex布局（通常我们把最外层的父元素指定为Flex），如果是行内Flex布局也可以指定inline-flex。当然Webkit内核的浏览器还要加上-webkit前缀。

.box{
	display: -webkit-flex; /* Safari */
    display: flex;	/* 正常情况只用写这一行 */
    display: inline-flex;	/* 如果是行内Flex就写这行 */
}

此外，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

父元素的属性

可能看的会有点绕，可以结合Flex 布局教程：语法篇里面的图片理解

子元素的属性

在使用CSS的过程中，人们开始觉得CSS也开始变得有些麻烦了，比如它不能使用变量，修改一些颜色要全部改一遍；比如用选择器定位元素的时候，共同的父元素要重复写等等。
那要怎么办呢，如今浏览器都适配CSS了，也不能提出一个全新的语言。
于是聪明的人们想啊，我可以先用一个全新的规则编写样式，写完后把这个文件转变成CSS文件不就好了。
于是就提出了Sass (Syntactically Awesome Stylesheets)，它是一个CSS预处理器，并兼容所有版本的CSS。HTML网页是不知道Sass是什么的，因此编写完Sass后，需要将其转为CSS。
在VS Code中，插件Live Sass Compiler可以实时将Sass转为CSS，我们每次修改Sass后都可以看到CSS里有哪些变化。

严格来说Sass有着两个版本，后缀名分别为.sass和.scss，两种语法各有差别，比如.sass移除了括号{}和分号;，而.scss则保留了它们。相对而言，.scss更加流行普遍，因此下面都用这种版本。
Sass语法大体和CSS类似（直接在里面写CSS也不会错），这里主要介绍一下它的一些新特性

我们可以用$定义变量，方便后续使用 ：

$font-family-base: "Open Sans", sans-serif !default;
$white: #fff !default;
p {
    color: $white;
    font-family: $font-family-base;
}

其中!default是用于为变量提供默认值，避免Sass的初始化失败
还要注意一点，Sass命名时不区分横杠-和下划线_，也就是说$font-family-base和$font_family_base是一样的。

特别是一些颜色，很多网站有着自己的主色调，如果想要修改就非常麻烦，需要把每个元素的颜色都进行修改。有了变量之后，就可以实现“修改一行，全部修改”了。

Sass的嵌套规则有效地帮我们省略了元素共同的父元素，可以直接在括号中进行子元素的属性设定。
比如我的nav有li和button两个元素，我可以按照如下方式定义他们的属性：

nav {
    li {
        display: inline-block;
        margin-bottom: 8px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    button {
        background-color: $white;
        &:hover {
            text-decration: none;
        }
    }
}

在定义元素的时候，&就表示其父元素，因此可以用于链接一些特殊属性，比如&:last-child表示列表最后一个元素，实现去掉最后一个元素的下划线；&:hover就表示光标悬停在button上的状态。

@mixin定义样式

我们可以定义变量，自然也可以定义样式，比如文本啊按钮啊啥的，很多时候需要有统一的样式。
我们可以用@mixin定义一个样式，然后在想用的时候用@include引入

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

.main-text {
  @include important-text;
  background-color: green;
}

还有更高级的用法，可以为样式设置变量并使用
比如给button设置文字颜色和背景颜色的变量：

@mixin colored-button($color, $bg) {
    color: $color;
    background: $bg;
}
.orange-btn {
    @include colored-button(black, orange);
}

使用语句块

我们可以使用if-else语句，比如根据$theme主题来选择显示的背景色：

@mixin theme-colors($theme) {
    @if $theme == 'light' {
        background-color: $light-bg;
    } @else {
        background-color: $dark-bg;
    }
}

还可以用循环来为不同元素分别设置属性
比如给class为text-40px、text-50px、text-60px分别设置$sizes里的字号：

$sizes: 40px, 50px, 60px;
@each $size in $sizes {
    .text-#{size} {
        font-size: $size;
    }
}

不仅如此，Sass还引入了函数。
它有许多内置函数，比如用lighten()和darken()可以快速调整颜色亮度。

$primary-color: green;
.button {
    background: lighten($primary-color, 25%);
    color: darken($primary-color, 25%);
}

我们还可以自定义函数
这是一个将$numbers里所有值求和的函数：

@function sum($numbers) {
    $sum: 0;
    @each $bumber in $numbers {
        $sum: $sum + $number;
    }
    @return $sum;
}

@extend继承样式

如果一个样式与另外一个样式几乎相同，只有少量的区别，那么我们可以把相同的内容抽离，在使用的时候用 @extend导入，而那些不同的样式再进行额外设置。
比如有两个很类似的按钮，一个用于报告report，一个用于提交submit，他们只是颜色不一样。因此文字、边框等相同的东西我们就可以抽离出来，再继承之后继续设置样式：

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

@import导入Sass

当我们写了很多代码后，难免会想着想把相同内容的代码分离，提高可读性和简洁性。
比如我们可以将全局的样式提取，作为reset.scss文件：

//reset.scss
html,
body,
{
    margin: 0;
    padding: 0;
}

于是，在其他Sass文件中我们就可以用@import 导入
导入的时候只用写文件名，不用写后缀，Sass会自动帮我们添加后缀。

//index.scss
@import "reset";

header {
    //······
}
main {
    //······
}

不过这样的坏处是Sass会给reset.scss也生成一个对应的CSS文件。
如果不想将一个 Sass 的代码文件编译成 CSS 文件，我们可以在文件名的开头添加一个下划线_。
比如我们把变量全部提取出来，作为_variables.scss文件

//_variables.scss
$font-family-base: Arial, Helvetica, sans-serif;
$line-height-base: 1.5;

$white: #fff;
$gray: #a9a9a9;
$black: #000;

这样_variables.scss就不会生成一个CSS文件了（显然生成了也没必要）
在导入的时候，我们不需要添加前面的下划线

//index.scss
@import "variables";

header {
    //······
}
main {
    //······
}

不过要注意，带下划线与不带下划线的同名文件不要放置在同一个目录下，比否则带下划线的文件将会被忽略。毕竟大家用@import导入的时候都是一样的名字。

• Previous
  Linux脚本：浅浅入下Bash编程