【青训营】- css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!(二)

简介: 那么在下面的这篇文章中,将带领大家来探索 css 中更为奇妙的奥秘~

第三个概念👇


flex 布局类似块级盒子,可以设置比子元素所需要更大的宽度。而 justify-content 属性,会帮你确定此时元素如何分配空间。

来看一个例子:

.container {
    disply: flex;
}
.container {
    justify-content: flex-start | flex-end | center | space-between;
}
复制代码

具体显示效果如下:

1.png



第四个概念👇

同样地,当父容器高度溢出时, align-items 帮你确定子元素如何垂直对齐。

来看一个例子:

.container {
    disply: flex;
}
.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}
复制代码

具体显示效果如下:

2.png


以上内容是最常用的弹性盒子用法。在 50% 的情况下,浏览器会帮你分配好各个元素所占的空间;但另外 50% 呢,就需要你自己来做额外调整啦!这个时候你需要了解关于弹性盒子的更多属性。

戳此链接👉CSS-TRICKS —— 弹性盒子介绍


(4)定位


1)static

不管是正常的文档流,还是弹性盒子,内里元素排布都是相互影响的。前面的元素占了一块地,后面的元素肯定就得稍微往后移一点。这其实涉及到的是一种定位情况,即静态定位,它的 css 设置为 display: static;

来看一个例子:

<p>
  这是 p 标签内容
</p>
<p>
  这是 p 标签内容
    <span>这是 span 标签内容</span>
</p>
复制代码

附上显示效果:

3.png

2)相对定位relative

position 还能有其他值,比如相对定位css 设置未 position: relative

相对定位在文档流中仍然占据位置,但可以用 topleftbottomright 这四大属性做一些偏移的操作。

来看一个例子:

<p>
  这是 p 标签内容
</p>
<p>
  这是 p 标签内容
    <span style="position: relative; top: 16px; left: 8px;">
        这是 span 标签内容
    </span>
</p>
复制代码

附上显示效果:

4.png

3)相对定位absolute

position: absolute ,这种叫做绝对定位。绝对定位的元素完全脱离了文档流和个弹性盒子,且绝对定位的盒子的定位和大小,可以由你自己来完全指定。

来看一个例子:

<p>
  这是 p 标签内容
</p>
<p>
  这是 p 标签内容
    <span style="position: absolute; top: 16px; left: 8px;">
        这是 span 标签内容
    </span>
</p>
复制代码

附上显示效果:

5.png

此时, topleft 已经不是相对于原位置了,而是相对于一个static 定位的父元素容器

同时,这里再普及一个知识点, position: fixed ,其 topleft 等属性是相对于浏览器窗口。


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>
复制代码

附上显示效果:

6.png


5)应用

static 值的定位让元素非常独立可控,广泛应用在弹窗下拉选项固定导航栏等场景。来看一下常见场景👇

70.png

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>
复制代码

具体显示效果如下:

90.png


(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>
复制代码

具体显示效果如下:

91.png


(3)边框

有时候我们想要给我们的盒子加一些边框来进行点缀,那么我们可以用 css 中的 border 来进行处理。

下面来看一段代码:

border: solid;
border: dashed red;
border: 1rem solid;
border: thick double #32a1ce;
border: 4mm ridge rgba(170, 50, 220, 6);
复制代码

具体显示效果如下:

92.png


(4)阴影

我们有时候在网页中经常看到好多很好看的阴影,而这些也是 css  用 box-shadowtext-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;
复制代码

具体显示效果如下:

93.png


或者说,我们也可以给文字来点阴影:

<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>
复制代码

来看下具体效果:

94.png


(5)交互相关

大家都知道,平时我们在浏览网页时,有时候在点击内容时,会有一只小手显示,而这些就是 css 的交互。通常情况下,我们用 cursor:pointer; 来进行设置。来看一些常见的交互样式:

95.png

对于交互相关的更多内容,大家可以到mdn中交互相关的文档进一步体验。


(6)动画

css 中,还可以用 transitionanimationtransform 等写出很多炫酷的效果。

来看一段代码演示:

.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);
    }
}
复制代码

具体显示效果如下:

1.png


📰四、css精益求精


1. css调试


(1)审查css

css 的面板里,可以直接开关、编辑、新增属性的值。如下图所示:

96.png


(2)理解盒模型

同时,我们来可以通过 layout view 来展示一张选定元素的盒模型示意图如下图所示:

97.png


2. css扩展


(1)css预处理器

另一种组织 CSS 的方法是利用一些对于前端开发者可用的工具,它们让你可以稍微更程式化地 编写 CSS 。预处理工具以你的原文件为基础来进行运行,并将它们转化为样式表代表工具有:

  • less
  • sass
  • stylus


(2)less

这里我们以 less 为例,看看能够为 css 扩充哪些功能。

1)变量,编译后会填充到对应的位置。比如:

98.png

2)mixin,类似于函数。比如:

网络异常,图片无法展示
|


3. css革新

随着 CSS 的不断发展,到现在,我们编写样式已经不一定需要写 css 文件了。下面罗列出几种常见的类型:

(1)styled-components 为代表的 css-in-js 方案,通过用 JavaScript 的力量来武装 css

100.png

(2)tailwindcss 为代表的 utility-class 方案,改样式只需要修改 html 文件即可,用有限的选择帮助你定好设计规范

101.png


📑五、结束语


在上面的文章中,我们从 css 的诞生背景和基础定义入手,先初步认识了 css 。紧接着,介绍了如何能够正确地学习 css ,以及 css 关键的盒模型、文档流、布局、定位等关键概念和相关的 css 属性,并展示了 css 装饰文档的可能性。

最后,我们简略地了解了 css 是如何调试的,以及当今都有什么样的工具可以帮助到我们更好的写 css ,又如何用更好的理念去用 css

到这里,关于 css 的奥秘探索就结束啦!希望文章对大家有帮助~


相关文章
|
11天前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
4天前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
1月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
45 4
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 JavaScript 程序员
10分钟带你探索css中更为奇妙的奥秘
该文章深入探讨了CSS的多种奇妙应用,包括层叠样式、布局技巧、动画效果等,并提供了丰富的实例来展示如何利用CSS创造复杂的视觉效果和交互体验。
|
2月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
3月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
99 3
|
3月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
52 3
|
3月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
64 1