大数据最全10分钟带你探索css中更为奇妙的奥秘(3)，大数据开发开发者出路在哪

最新推荐文章于 2024-06-14 17:25:56 发布

2401_84183492

最新推荐文章于 2024-06-14 17:25:56 发布

阅读量923

点赞数 21

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84183492/article/details/138722580

版权

程序员专栏收录该内容

124 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

（4）freecodecamp.org

Github 上 star 最多的项目。由社区贡献而成的全面的程序员自学课程。

freecodecamp

（5）挑一个

有小伙伴说，看了这么多，不知道要挑哪一个来学呢？

推荐顺序的话就是从前到后推荐。就是 专业在线课程团队出品 > 自助式学习 ≈ 社区型自助式 。

如果你是零基础，上面任一一个课程，一个周末左右应该能学的差不多。有了基础后，以后你再想深挖哪个场景下的 css 应用规则，再去看文档即可。什么场景（字体、定位、颜色等），这些内容对应的需要去查哪些属性相信你心中也应该有了自己的一个答案~

2. 持续学习

如果一直在干前端这一行的话，那么，以下这些网站，可能会陪你到 35岁，甚至也有可能是一辈子。（言重了hh）

下面我们一起来看一下是哪几个网站吧~

（1）MDN文档

网站地址为 https://developer.mozilla.org/zh- CN/docs/Web/CSS 。它是 css 的文档库，基本上会是前端程序员最常来的地方，同时 html 和 js 的规则也在这里面。除此之外呢，里面还有丰富的各式各样的教程，把它当做是一个自由探索的网站也是相当不错滴。

MDN文档

（2）CSS-TRICKS

网站地址为 https://css-tricks.com/almanac/ 。这是另外一个 css 文档库，它拥有非常活跃的 css 社区，里面有各种奇技淫巧，把它作为 mdn 的补充也是相当合适的。

CSS-TRICKS

（3）w3c CSS标准

网站地址为 <w3.org/Style/CSS>。前面的网站和文档基本上都只在告诉你一些css的用法。比如 color:red; ，就是文本变为红色。但其实，它远不止于用来实现文本的颜色，那你想知道它还能干嘛么？

w3c文档，或许就能告诉你答案。

w3c文档

📄三、CSS常用规则

1. 布局相关

（1）盒模型

1）css的盒模型

在介绍布局相关的属性之前，我们要先了解一个概念：在 CSS 中，所有的元素都被一个个的 “盒子（box）” 包围着。因此，理解这些盒子的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

我们先来看一张图：

css的盒模型

2）盒模型内容详述

现在，我们来对盒模型中的内容进行一个详细的了解。具体如下👇

在 css 中，组成一个块级盒子需要以下内容：

Content box：这个区域主要是用来显示内容，它的大小可以通过 width 和 height 来进行设置。
Padding box：这个区域包围在内容区域外部的空白区域，它的大小可以通过 padding 的相关属性来进行设置。
Border box：这个区域是边框盒，边框盒包裹内容和内边距，它的大小通过 border 的相关属性来进行设置。
Margin box：这是最外面的区域，是盒子和其他元素之间的空白区域，它的大小通过 margin 的相关属性来进行设置。

3）盒模型的分类

盒模型中的“盒子” ，又包括块级盒子(block box)和内联盒子(inline box)。这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为。

我们现在就这两个盒子的一些行为来进行阐述。具体如下：

Ⅰ. 第一种行为👇

如果一个盒子对外显示为 inline ，那么它的行为如下：

盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
用做链接的 <a> 元素、 <span> 都是默认处于 inline 状态的。

Ⅱ. 第二种行为👇

下面我们用一个例子来展示下 contet-box 。具体如下：

附上代码：

.box {
    width: 350px;
    height: 150px;
    margin: 25px;
    padding: 25px;
    border: 5px solid black;
}

附上显示效果：

content-box显示效果

我们来计算一下，在上面的这个例子中， box 元素真正占用的面积是多少？

模型宽度 = 350px(content) + 25px(padding) + 25px(padding) + 5px(border) + 5px(border) = 410px。

模型高度 = 150px(content) + 25px(padding) + 25px(padding) + 5px(border) + 5px(border) = 210px。

大家可以看到，对于 content-box 的盒子来说，它整个盒子包含的内容是 content + padding + border 。

那如果我们想要修改浏览器这一默认行为，也就是想要不管 padding 和 border 怎么撑开，整个盒子加起来的宽高就只能是我们定义的宽高，又该怎么处理呢？

附上代码：

.box {
    width: 350px;
    height: 150px;
    margin: 25px;
    padding: 25px;
    border: 5px solid black;
}
.box {
	box-sizing: border-box;
}

附上显示效果：

border-box显示效果

大家可以看到，使用了 box-sizing: border-box 之后，它的所有宽度加起来是 350px ，高度加起来是 150px 。通过这个属性，达到了我们想要的效果。

但是细心的效果可能已经发现了一个问题，如果我们每次都要去控制它具体的类选择器来实现宽高，那这样写起来得多累人呀对吧。

因此呢，如果你希望所有元素都使用替代模式，那么你可以直接设置 box-sizing 在 <html> 元素上，然后设置所有元素来继承该属性，如下代码所示：

html {
	box-sizing: border-box;
}

\*, \*::before, \*::after {
    box-sizing: inherit;
}

Ⅲ. 第三种行为👇

display 有一个特殊的值，它在内联和块之间提供了一个中间状态。这在一种情况下非常有用，比如说，你不希望一个项切换到新的一行，但是呢，又希望它可以设定宽度和高度。那么我们可以设置 display: inline-block; ，来达到我们最后的效果。下面我们来看一个例子：

附上代码：

span {
    margin: 20px;
    padding: 20px;
    width: 80px;
    height: 50px;
    border: 2px solid blue;
    display: inline-block;
}

附上效果图：

inline-block

到这里，关于盒模型的内容讲解就告一段落啦！还有更多的使用技巧和延伸属性，可以进一步前往 mdn 文档学习。

（2）正常文档流

1）举例说明

盒模型解释了一个元素块的尺寸，那么元素块在整篇文档中的位置是如何确定的呢？

我们先来看一段代码：

<style>
 p {
 background: rgba(255, 84, 104, 0.3);
 border: 2px solid rgb(255, 84, 104);
 padding: 10px;
 margin: 10px;
 }
 
 span {
 background: white;
 border: 1px solid black;
 }
</style>

<p>
	这是 p 标签内容
</p>
<p>
    这是 p 标签内容
    <span>这是 span 标签内容</span>
</p>

现在我们来看下效果：

正常文档流

在上面的代码中， <p> 标签是块级元素，而 <span> 标签是内联元素。下面，我们就这两个元素来进行解析。

2）块级元素和内联元素

块级元素👇

默认情况下，块级元素按照基于其父元素的书写顺序（默认值： horrizontal-tb ）的块流动方向（ block flow direction ）放置；
每个块级元素会在上一个元素的下方另起一行，它们会被设置好的 margin 分隔开，且块级元素是垂直组织的。

内联元素👇

而对于内联元素来说，其表现与块级元素有所不同，它们不会另起一行；只要其父级块级元素的宽度内有足够的空间，那么块级元素里面的内容将与其他内联元素被安排在同一行。
但是呢，如果空间不够，那么溢出的文本或元素将被移到新的一行。

（3）弹性布局

1）弹性布局是什么

弹性盒子是一种用于按行或按列来布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。如下图所示：

弹性布局

2）一些概念

第一个概念👇

只需要在容器上加 display:flex 属性，你就可以得到一个横排的布局。就盒模型而言，此时容器类似于块级元素( display:block ) ，但宽度默认由子元素决定；子元素类似 inline-block 元素，可以设置宽高且不换行。且子元素原本的 display 实行基本被无视了，这是一种隐含的盒模型状态。

来看一段演示：

.container {
    display: flex;
}

具体显示效果如下：

display→flex

第二个概念👇

这种布局非常灵活，可以完成 90% 的布局要求。同时，可以使用 flex-direction 属性来控制子元素的排布顺序。

来看一个例子：

.container {
    disply: flex;
}

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

具体显示效果如下：

flex-direction

第三个概念👇

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

来看一个例子：

.container {
    disply: flex;
}

.container {
    justify-content: flex-start | flex-end | center | space-between;
}

具体显示效果如下：

justify-content

第四个概念👇

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

来看一个例子：

.container {
    disply: flex;
}

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

具体显示效果如下：

align-items

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

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

（4）定位

1）static

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

来看一个例子：

<p>
	这是 p 标签内容
</p>
<p>
	这是 p 标签内容
    <span>这是 span 标签内容</span>
</p>

附上显示效果：

static

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>

附上显示效果：

relative

3）相对定位absolute

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

来看一个例子：

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

附上显示效果：

absolute

此时， 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>

附上显示效果：

z-index

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;

具体显示效果如下：

阴影1

或者说，我们也可以给文字来点阴影：

<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>

来看下具体效果：

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

mg.cn/2829704119f643d0ad1a617f442ae4ec.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pif5pyf5LiA56CU56m25a6k,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

或者说，我们也可以给文字来点阴影：

<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>

来看下具体效果：

[外链图片转存中…(img-JeU3AXCd-1715418048782)]
[外链图片转存中…(img-LOWHfxeA-1715418048782)]
[外链图片转存中…(img-MrxCoGJE-1715418048782)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

2401_84183492

关注

21
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
大数据最全10分钟带你探索css中更为奇妙的奥秘(3)，大数据开发开发者出路在哪

模型宽度 = 350px(content) + 25px(padding) + 25px(padding) + 5px(border) + 5px(border) = 410px。模型高度 = 150px(content) + 25px(padding) + 25px(padding) + 5px(border) + 5px(border) = 210px。这在一种情况下非常有用，比如说，你不希望一个项切换到新的一行，但是呢，又希望它可以设定宽度和高度。属性，你就可以得到一个横排的布局。
复制链接

扫一扫