第三个概念👇
flex 布局类似块级盒子，可以设置比子元素所需要更大的宽度。而 justify-content 属性，会帮你确定此时元素如何分配空间。
来看一个例子：
.container { disply: flex; } .container { justify-content: flex-start | flex-end | center | space-between; } 复制代码
具体显示效果如下：
第四个概念👇
同样地，当父容器高度溢出时， align-items 帮你确定子元素如何垂直对齐。
来看一个例子：
.container { disply: flex; } .container { align-items: stretch | flex-start | flex-end | center | baseline; } 复制代码
具体显示效果如下：
以上内容是最常用的弹性盒子用法。在 50% 的情况下，浏览器会帮你分配好各个元素所占的空间；但另外 50% 呢，就需要你自己来做额外调整啦！这个时候你需要了解关于弹性盒子的更多属性。
戳此链接👉CSS-TRICKS —— 弹性盒子介绍
（4）定位
1）static
不管是正常的文档流，还是弹性盒子，内里元素排布都是相互影响的。前面的元素占了一块地，后面的元素肯定就得稍微往后移一点。这其实涉及到的是一种定位情况，即静态定位，它的 css 设置为 display: static; 。
来看一个例子：
<p> 这是 p 标签内容 </p> <p> 这是 p 标签内容 <span>这是 span 标签内容</span> </p> 复制代码
附上显示效果：
2）相对定位relative
position 还能有其他值，比如相对定位， css 设置未 position: relative 。
相对定位在文档流中仍然占据位置，但可以用 top， left，bottom，right 这四大属性做一些偏移的操作。
来看一个例子：
<p> 这是 p 标签内容 </p> <p> 这是 p 标签内容 <span style="position: relative; top: 16px; left: 8px;"> 这是 span 标签内容 </span> </p> 复制代码
附上显示效果：
3）相对定位absolute
position: absolute ，这种叫做绝对定位。绝对定位的元素完全脱离了文档流和个弹性盒子，且绝对定位的盒子的定位和大小，可以由你自己来完全指定。
来看一个例子：
<p> 这是 p 标签内容 </p> <p> 这是 p 标签内容 <span style="position: absolute; top: 16px; left: 8px;"> 这是 span 标签内容 </span> </p> 复制代码
附上显示效果：
此时， top 和 left 已经不是相对于原位置了，而是相对于一个非 static 定位的父元素容器。
同时，这里再普及一个知识点， position: fixed ，其 top 和 left 等属性是相对于浏览器窗口。
4）z-index
由于非 static 值的 position 属性让元素之间可以相互覆盖，因此呢， css 提供了 z-index 属性来控制哪个元素覆盖在最上层。
来看一个例子：
<p> 这是 p 标签内容 </p> <p> 这是 p 标签内容 <span style="position: absolute; top: 16px; left: 8px; z-index: -1;"> 这是 span 标签内容 </span> </p> 复制代码
附上显示效果：
5）应用
非 static 值的定位让元素非常独立可控，广泛应用在弹窗、下拉选项、固定导航栏等场景。来看一下常见场景👇
2. 装饰相关
（1）文字
css 可以使得文字花里胡哨，比如说变换颜色，下划线，加粗等等样式。
下面来看一段代码：
<div style="border: 1px solid black; width: 250px;"> <div style="">Basic document flow</div> <div style="font-family: serif;">Basic document flow</div> <div style="color: purple;">Basic document flow</div> <div style="font-weight: bold;">Basic document flow</div> <div style="font-style: italic;">Basic document flow</div> <div style="text-align: center;">Basic document flow</div> <div style="font-size: 24px;">Basic document flow</div> </div> 复制代码
具体显示效果如下：
（2）背景
css 可以个背景设置颜色，渐变色，图片背景等等。
下面来看一段代码：
<style> .bg { width: 100px; height: 100px; } .bg1 { background-color: rebeccapurple; } .bg2 { background-image: url("https://mdn.mozillademos.com/"); } .bg22 { background-repeat: no-repeat; background-color: blueviolet; } .bg3 { background-image: linear-gradient( to right, hsl(100, 50%, 50%), hsl(180, 50%, 50%) ); } </style> <div class="bg bg1"></div> <div class="bg bg2"></div> <div class="bg bg2 bg22"></div> <div class="bg bg3"></div> 复制代码
具体显示效果如下：
（3）边框
有时候我们想要给我们的盒子加一些边框来进行点缀，那么我们可以用 css 中的 border 来进行处理。
下面来看一段代码：
border: solid; border: dashed red; border: 1rem solid; border: thick double #32a1ce; border: 4mm ridge rgba(170, 50, 220, 6); 复制代码
具体显示效果如下：
（4）阴影
我们有时候在网页中经常看到好多很好看的阴影，而这些也是 css 用 box-shadow 和 text-shadow 来展示的。
我们来看一些奇妙的阴影：
box-shadow: 10px 5px 5px red; box-shadow: 60px -16px teal; box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); box-shadow: inset 5em 1em gold; box-shadow: 3px 3px red, -1em 0 .4em olive; 复制代码
具体显示效果如下：
或者说，我们也可以给文字来点阴影：
<div style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6)">你好</div> <div style="text-shadow: 4px 4px rgba(0, 0, 0, 0.6)">你好</div> 复制代码
来看下具体效果：
（5）交互相关
大家都知道，平时我们在浏览网页时，有时候在点击内容时，会有一只小手显示，而这些就是 css 的交互。通常情况下，我们用 cursor:pointer; 来进行设置。来看一些常见的交互样式：
对于交互相关的更多内容，大家可以到mdn中交互相关的文档进一步体验。
（6）动画
在 css 中，还可以用 transition 、 animation 和 transform 等写出很多炫酷的效果。
来看一段代码演示：
.tran { width: 100px; height: 100px; background: mediumpurple; transition: width 300ms ease-in; animation: spin 5s ease-in-out infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 复制代码
具体显示效果如下：
📰四、css精益求精
1. css调试
（1）审查css
在 css 的面板里，可以直接开关、编辑、新增属性的值。如下图所示：
（2）理解盒模型
同时，我们来可以通过 layout view 来展示一张选定元素的盒模型示意图。如下图所示：
2. css扩展
（1）css预处理器
另一种组织 CSS 的方法是利用一些对于前端开发者可用的工具，它们让你可以稍微更程式化地 编写 CSS 。预处理工具以你的原文件为基础来进行运行，并将它们转化为样式表。代表工具有：
lesssassstylus
（2）less
这里我们以 less 为例，看看能够为 css 扩充哪些功能。
1）变量，编译后会填充到对应的位置。比如：
2）mixin，类似于函数。比如：
3. css革新
随着 CSS 的不断发展，到现在，我们编写样式已经不一定需要写 css 文件了。下面罗列出几种常见的类型：
（1） 以 styled-components 为代表的 css-in-js 方案，通过用 JavaScript 的力量来武装 css 。
（2） 以 tailwindcss 为代表的 utility-class 方案，改样式只需要修改 html 文件即可，用有限的选择帮助你定好设计规范。
📑五、结束语
在上面的文章中，我们从 css 的诞生背景和基础定义入手，先初步认识了 css 。紧接着，介绍了如何能够正确地学习 css ，以及 css 关键的盒模型、文档流、布局、定位等关键概念和相关的 css 属性，并展示了 css 装饰文档的可能性。
最后，我们简略地了解了 css 是如何调试的，以及当今都有什么样的工具可以帮助到我们更好的写 css ，又如何用更好的理念去用 css 。
到这里，关于 css 的奥秘探索就结束啦！希望文章对大家有帮助~
