第三个概念👇
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
。预处理工具以你的原文件为基础来进行运行,并将它们转化为样式表。代表工具有:
less
sass
stylus
(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
的奥秘探索就结束啦!希望文章对大家有帮助~