小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
本文同时参与掘力星计划，赢取创作大礼包，挑战创作激励金
前言
前期回顾
CSS常用规则
布局
盒模型
在具体介绍布局相关的属性之前，先要了解：在CSS中，所有的元素都被一个个的“盒子(box)”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。
CSS中组成个块级盒子需要
-
Content box：这个区域是用来显示内容，大小可以通过设置width和height。
-
Padding box：包围在内容区域外部的空白区域，大小通过padding相关属性设置。
-
Border box：边框盒包裹内容和内边距。大小通过border相关属性设置。
-
Margin box：这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过margin相关属性设置。
盒子——块级盒子(block box)和内联盒子(inline box)。这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为：
一个被定义成块级的 (block) 盒子会表现出以下行为:
-
盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
-
每个盒子都会换行
-
width 和 height 属性可以发挥作用
-
内边距(padding)，外边距(margin)和边框(border)会将其他元素从当前盒子周围“推开” 除非特殊指定，诸如标题(
<h1>等)和段落(<p>)默认情况下都是块级的盒子。
如果一个盒子对外显示为inline，那么他的行为如下:
-
盒子不会产生换行。
-
width 和 height 属性将不起作用。
-
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline 状态的盒子推开。
-
水平方向的内边距、外边距以及边框会被应用且会把其他处于inline 状态的盒子推开。 用做链接的
<a>元素、<span>都是默认处于inline 状态的。
让我们继续看看别的例子
这个例子中box元素真正占用的面积是多少?
模型宽度=410px (350 + 25+ 25+ 5+5)，高度=210px(150 +25+25+5+5)， padding加 border再加content box。
可以修改浏览器这一默认行为，通过设置box-sizing: border-box来实现（默认是content-box)
如果希望所有元素都使用替代模式，而且确实很常用，设置box-sizing在<html>元素上，然后设置所有元素继承该属性，正如下面的例子
内联盒子只适用部分块级盒子属性。
可以看到，宽度和高度被忽略了。外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系
display有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:您不希望一个项切换到新行,但希望它可以设定宽度和高度
盒模型CSS规则
-
margin ：设置外边距
-
border ：设置边框
-
padding ：内边距
-
width & height ：内容宽高
-
box- sizing ：修改宽高的定义范围
-
display ：改变元素是块级盒子还是内联盒子的特征 关于盒模型和上述属性，还有更多的使用技巧和延伸属性，可以进一步前往mdn学习。
正常文档流
盒模型解释了一个元素块的尺寸；那元素块在整篇文档中的位置是如何确定的呢？
默认的，块级元素按照基于其父元素的书写顺序（默认值：horizontal-tb）的块流动方向（block flow direction）放置
-
每个块级元素会在上一个元素下面另起一行，
-
它们会被设置好的margin分隔。
-
块级元素是垂直组织的。
内联元素的表现有所不同
-
它们不会另起一行;
-
只要在其父级块级元素的宽度内有足够的空间，它们与其他内联元素被安排在同一行。
-
如果空间不够，溢出的文本或元素将移到新的一行。
弹性布局
弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以应更小的空间。
-
只需要在容器上加
display: flex属性。你就可以得到一个横排的布局。就盒模型而言，此时容器类似于块级元素(display. block)，但宽度默认由子元素决定; -
子元素类似于
inline-block元素，可以设宽高且不换行。其原本的display属性基本被无视了，这是一种隐含的盒模型状态。
这种模型非常灵活。可以完成90%的布局要求。flex-direction属性控制子元素的排布顺序
flex容器类似块级盒子，可以设置比子元素所需更大的宽度。justify-content属性，帮你确定此时子元素如何分配空间
同样的，当父容器高度溢出时，align-items帮你确定子元素如何垂直对齐
以上是最常用的弹性盒子用法。50%的情况下，浏览器会恰到好处地帮你分配好各个元素所占的空间，但另外一半是需要你做额外调整的。这时你需要了解弹性盒子的更多属性
弹性盒子所学回顾
-
display: flex ：一键开启弹性盒子模式，替代正常文档流
-
flex-direction ：更改弹性盒子的「主轴」
-
justify-content ：子元素主轴线上如何对齐
-
align-items : 子元素横轴线上如何对齐
定位(position)
position: static
不管是正常的文档流，还是弹性盒子，内里元素排布都是相互影响的。前面的元素占了一块地，后面的元素肯定得往后稍稍。
这其实只是其中一种定位情况，叫静态定位具体到css就是position: static；默认给到每个元素
position: relative
position还能有其他值，比如相对定位, position: relative
相对定位在文档流中仍然占据位置，但可以用top, left, bottom, right 属性做一些偏移的操作
position: absolute
这种叫绝对定位。绝对定位的元素完全脱离了文档流和什么弹性盒子。绝对定位的盒子的定位、大小，你可以完全指定。
此时 top, left，已经不是相对于原位置，而是相对于一个非 static定位的父元素容器顺便讲一个类似的position: fixed，其 top,left等属性是相对于浏览器窗口
z-index
因为非static值的position属性让元素之间可以相互覆盖，css提供了z-index属性来控制哪个元素覆盖在最上层
装饰相关
关于布局流、弹性盒子和绝对定位的使用，还有很多场景和使用技巧没有提及。另外还有float、 table、grid布局。这些有待同学们在线上持续去探索。
下面，我们来看看在装饰领域,CSS 可以在哪些方面帮助我们装点页面吧
文字
背景
边框
阴影
交互相关
动画
CSS精益求精
CSS调试
有时写CSS会碰到这样的问题：结果看起来和你想的不太一样。你可能会认为selector(选择器)匹配到了元素但是什么都没发生，还可能会觉得盒子的大小与你想的有出入。这章会教你着手调试CSS，向你展示现代浏览器中的DevTools是怎样让你更方便地获悉发生了什么。
审查CSS
从页面上选择一个元素，可以通过以下方法：右键该元素，选择审查元素（Inspect)；从DevTools左侧HTML tree中选择该元素。 它是页面上的第一个元素，周围画边有边框。
- 在面板里，可以直接开关、编辑、新增属性的值。
理解盒模型
之前的章节介绍了盒模型计算自身尺寸的方式。开发者工具可以确实帮助你理解这个过程。
Layout view给你展示了一张选定元素的盒模型示意图，还有对能改变元素展示方式的属性和值的描述。你可能原本没有精确地使用元素的属性，只设定了初始值，盒模型也可能包含对于这些属性的描述。
CSS扩展
CSS预选择器
另一种组织CSS的方法是利用一些对于前端开发者可用的工具，它们让你可以稍微更程式化地编写CSS。预处理工具以你的原文件为基础运行，将它们转化为样式表。
代表工具有:
-
less
-
sass
-
stylus
这里以 less为例,看看能够CSS扩充哪些功能。
变量，编译后会填充到对应位置
这里以 less为例，看看能够CSS扩充哪些功能。
mhixin，类似于函数
CSS革新
这些年CSS的发展，我们编写样式已经不一定需要写css文件了。
以styled- components为代表的CSS -in-js 方案，用JavaScript的力量武装css
以tailwindcss为代表的utility-class方案，改样式就改html文件即可，用有限的选择帮助你定好设计规范。
后记
-
这门课程先从 CSS的诞生背景和基础定义入手，让我们初步认识CSS ;
-
然后紧接着，介绍了如何能够正确地学习CSS，或许那是本ppt最重要的内容。CSS需要在练中学。
-
介绍了CSS关键的盒模型、文档流、布局、定位等关键概念和相关CSS属性，并展示CSS装饰文档的可能性
-
最后，我们简略看了下如何调试 CSS，以及当今都有什么工具可以帮助我们更好的写CSS、用更好的理念去用CSS
结语
- 如以上有错误的地方，请在评论区中指出，谢谢！
小可爱们看完点个赞再走一走~~
