10 个 web前端开发者必须要掌握的CSS 技巧-沈阳市和平区爱尚职业培训机构新闻

CSS 是每个 Web 开发人项目中的重要组成部分。对于没有设计和 UI 的 Web 开发人员来说，一切都是不可能的。

因此，在使用 CSS 时保持非常重要。在本教程中，我们将介绍重要的 CSS 专业技巧，以节省您的时间并让您的生活更轻松。

在本教程中，我们介绍了许多重要的 CSS 提示和技巧，以提升您的开发效率。此外，我们还介绍了其他一些不太重要的 CSS 概念，以帮助你更好的理解和使用CSS技能。

1、学习 CSS 盒子模型

什么是 Web 编程中的 CSS 盒子模型？

了解 CSS 盒子模型是每个 CSS 或 Web 开发人员的重要前景。如果你学习了 CSS 盒子模型，它会让 CSS 中的一切变得简单。它对 Web 开发生命周期产生了巨大的影响。

在这个迷你 CSS 盒子模型教程中，我们将了解 CSS 盒子模型是什么以及它是如何工作的。

在谈论 CSS 中网站的设计和布局时，使用的是盒子模型。简单来说，CSS 盒模型是一个包含多个组件的容器，包括边框、边距、内边距和内容本身。

总之，它是一个用于自定义不同元素布局的 CSS 工具包。

Web 浏览器将每个元素呈现为标准 CSS 框模型所描述的框。

CSS 确定这些框的位置、大小和属性，例如，颜色、高度、宽度、边框、背景等。

元素的总高度和元素的宽度计算如下：

总高度：高度 + 上下内边距 + 上下边框 + 上下边距。

总宽度：宽度+左右内边距+左右边框+左右外边距。

CSS box-sizing 属性：

元素的总高度和总宽度由称为 box-sizing 的 CSS 属性定义。CSS 属性 box-sizing 定义元素的总高度和宽度。

box-sizing 的默认值为 content-box。

简单来说，这意味着边距、边框和填充将添加到使用 width 和 height 属性的总高度和宽度中。

此外，添加边距、内边距和边框不会减小内容区域的总大小。

box-sizing 还有另一个值，称为border-box。

设置时会减小内容区域的大小。或者换句话说，当向元素添加边距、内边距和边框时，元素的总高度和总宽度不会增加。

1、内容：

这是 CSS 盒子模型的主要元素。简单来说，它就像一个显示文本、图像、视频等的框，通过使用宽度和高度等属性来调整大小。内容区包含元素的主要内容。内容包括文本、图像或视频。

2、填充：

填充在其边界内围绕元素创建空间。

使用属性在 HTML 元素上设置填充。

a) 内边距：2px；// 2px 填充所有边

b) 内边距：2px 3px；//上下2px，左右3px

c) 内边距：2px 3px 4px；// 顶部2px，左右3px，底部4px

d) 内边距：2px 3px 4px；// 顶部 2px，右侧 3px，底部 4px，左侧 5px

或使用单独的 CSS 属性。

填充左：填充顶部：填充右：填充底部：

3、边框：

边框在元素周围创建分隔线或空间，标记元素的结束。填充和内容包含在其中。边框可根据要求定制。

您可以使用 CSS 属性边框为例，通过“border: 1px solid green”来更改边框的大小、样式、颜色和宽度。

而 1px 是大小，solid 是样式，green 是边框的颜色。

其他各种 CSS 属性可以应用于边框。这些属性包括但不限于边界半径等。

4、边距：

边距是元素边界之外的空间。它在相邻元素之间创建了一个空间。边距大小由简写属性 margin 或单独的属性决定，例如 margin-top、margin-bottom、margin-left、margin-bottom。这些 CSS 属性的工作方式与填充大小属性的工作方式类似。

2、使用 Mozilla Firefox CSS 工具

Firefox 或 Mozilla Firefox 是由 Mozilla 基金会开发的免费开源网络浏览器。Mozilla Firefox 可用于 Windows、Mac、Linux、Android 和 IOS 设备。截至 2021 年 12 月，Firefox 作为桌面网络浏览器的使用份额为 8.34%，是全球第四大受欢迎的浏览器。

Mozilla Firefox 附带了许多对开发人员来讲的好工具，开箱即用。其中好的是：

CSS 网格布局 Firefox 开发工具

Firefox 拥有惊人的 CSS 开发者工具。其中之一是网格容器。当我们检查一个网格项时，它会可视化整个网格容器的布局。它使调试和更改属性更容易。

除了单个网格容器外，它还显示页面上应用的所有网格布局的表格。要使用它，只需选择网格项目以检查网格线和名称。

您还可以在 Firefox 开发人员工具中查看 grid-gap 和其他与网格相关的属性。

Flex box Firefox 开发工具：
与 CSS 网格类似，firefox CSS 开发工具也使使用 flex-box 布局更容易。与网格类似，它可视化单个 flex-box 属性，如 flex-direction、align-items 和 justify-content。

元素注释 Firefox 开发工具：

Firefox CSS 开发人员工具提供了令人惊叹的注释，使您作为开发人员的工作更轻松。
只需查看 HTML，您就可以看到哪些元素溢出并采取必要的措施来修复它。此外，您可以查看使用 flexbox 和 CSS-grid 布局的元素。

在网站的视觉方面工作时会产生很大的不同。它使事情变得整洁且易于修复。

3、 CSS 弹性盒子

在 CSS3 中的 CSS flexbox 出现之前，布局网页是一项艰巨的任务。开发人员需要数百行代码来设计一个简单的布局。

CSS flexbox 让我们的生活变得轻松。现在只需几行代码，我们甚至可以布局复杂的布局。

什么是 CSS 弹性盒？

flexbox 被设计用来布置一维布局模型。使用 CSS flexbox，您可以用几行代码设计一维布局。

Flexbox 提供具有强大对齐功能的项目之间的空间分配。它还提供了一种简单干净的方式来在 flex 容器中排列项目。

Flexbox 使布局具有响应性和移动友好性。它对于创建小规模布局很有用。

弹性盒的特点：

Flexbox 布局灵活。
提供一种强大的方式来排列和对齐项目。
提供一种正确间隔项目的方法。
使用 flexbox，您可以轻松管理项目的顺序和顺序。
流行的 CSS 库 Bootstrap 基于 flexbox。

如何使用 CSS flex-box 绘制布局？

第 1 步：创建一个 flex container。

为了使 flex container成为父容器，我们将 display 属性设置为 flex。

.container { display: flex; }

将flex-container 的flex-direction:属性设置为1。

flex-direction 属性改变 flexbox 的方向。默认情况下，它设置为row。但是我们可以把它改成一列，把弹性项目放在一列中。

我们还可以将 flex-direction 属性设置为 column-reverse 和 row-reverse。这颠倒了弹性项目的顺序。

.container { display: flex; flex-direction: row; // column, row-reverse, column-reverse }

2、 flex-wrap

flex-wrap 属性弹性项目是否应该换行。

flex-wrap 属性可以有三个值 wrap、nowrap 和 wrap-reverse。

wrap 值弹性项目应在必要时进行包装，而 nowrap 值弹性项目不应包装。如果没有值，nowrap 也是 flex-wrap 的默认值。

wrap-reverse 值弹性项目应该以相反的顺序换行。

.container { display: flex; flex-direction: row; flex-wrap: wrap; // nowrap, wrap-reverse }

3、flex-flow

简单来说，flex-flow 只是用于设置 flex-direction 和 flex-wrap 属性的伞形或简写属性。

.container { display: flex; flex-flow: row wrap; }

4、justify-content

justify-content 属性用于在水平轴上对齐弹性项目。

.container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; // center, flex-end, space-between, space-around }

justify-content 属性可以具有下面给出的五个值之一。

a) flex-start:

flex-start 值与 flex 容器开始处的项目对齐。这是 justify-content 属性的默认值。

b) center:

center 值将项目对齐在 flex 容器的中心

c) flex-end:

flex-end 值与 flex-start 相反。它在弹性容器的末端对齐弹性项目。

d) space-between:

space-between 值仅在弹性项目之间添加空间，而不是分别在个和最后一个元素之前或结尾。

e) space-around:

space-around 值在弹性项目之间、结尾和之后添加空间。

5、 align-items:

align-items 属性用于在 y 轴上对齐弹性项目。它采用下面给出的五个值之一。

a) flex-start

flex-start 对齐容器顶部的项目。

b) flex-end

flex-end 对齐容器底部的项目。

c) center

居中对齐容器中间的项目。

d) baseline

基线值根据它们的基线对齐弹性项目。

e) stretch

拉伸值拉伸弹性项目以填充弹性容器。如果未其他值，则这是 align-items 属性的默认值。

6、 align-content

align-content 属性用于对齐 flex 容器中的行。它可以有以下六个值。

a) flex-start

center 值将所有行居中在 flex 容器的中心。

b) flex-end

flex-start 值对齐 flex-container 开头的所有行

c) flex-end

flex-end 值对齐 flex-container 末尾的所有行

d) space-between

space-between 分配 flex-rows 之间的可用空间，但不会在行的开头和最后一行之后添加空间。

e) space-around

space-around 值在行之前和最后一行之后添加空间，并在行之间分配剩余空间。

f) stretch

拉伸值相对于行容器中长的项目垂直拉伸弹性行。

第 2 步：应用于弹性项目的属性：

这些是用于 flex 容器的直接子级的属性。此外，flex 容器的直接子项会自动成为 flex 项。

有 6 个 flex-item 属性。这些如下：

1) order

顾名思义，顺序是弹性项目在弹性容器中显示的顺序。它覆盖 HTML 顺序。order 的默认值为 0。

order 的值小于 0 表示 order 小于 1 的元素将显示在每个其他元素之前。

.item { order: 2; }

2) flex-grow:

使用 flex-grow 属性，我们可以一个弹性项目相对于其他弹性项目应该增长多少。

flex-grow 的默认值为 0。简单来说，这意味着 flex-items 不会相对于可用空间增长。

.item { order: 2; flex-grow: 1; }

3) flex-shrink:

flex-shrink 属性一个 flex 项目相对于 flex 容器中的其余项目将收缩多少。flex-shrink 的默认值为 1。这意味着如果空间小于每个项目所需的空间，则每个项目都会收缩。

.item { order: 2; flex-grow: 1; flex-shrink: 0; // The item won't shrink }

4) flex-basis:

弹性项目的初始长度是使用 flex-basis 属性设置的。

.item { order: 2; flex-grow: 1; flex-shrink: 1; flex-basis: 300px; }

5）flex：

flex 属性只是一个简写属性，可以一次性 flex-grow、flex-shrink 和 flex-basis 属性。

.item { order: 2; flex: 1 1 200px; // flex: flex-grow flex-shrink flex-basis; }

6) align-self:

align-self 属性弹性容器内特定项目的对齐方式。它覆盖了 flex 容器上的属性 align-items。

.item { align-self: center; }

在 Codepen 上尝试 CSS flex-box：

请参阅 nadeem (@nasyxnadeem) 在 CodePen 上的 Pen CSS flex-box 模型。地址：https://codepen.io/nasyxnadeem/pen/bGYYbqe

4、 CSS Grid，重要的 CSS 专业技巧

CSS 网格布局是这10个技巧中比较重要的知识，CSS 网格布局对 CSS 来说有点新，这使得它更加重要，它也取代了传统的浮动布局。此外，它是 flex-box 布局的二维版本。与传统的浮动布局相比，它可以更轻松地创建复杂的页面布局并将代码减少到几行。

CSS 网格布局是一个强大的工具，可以创建二维布局。CSS 网格布局在将大型网页划分为小组件并根据大小、位置和优先级或重要性定义这些组件之间的关系方面做得非常出色。

此外，CSS 网格布局有点类似于表格，因为它像表格一样将大布局划分为行和列。CSS 网格布局让我们的生活更轻松。

在网格出现之前，我们不得不编写数百行代码并花费大量时间创建一个简单的布局。但是，现在只需几行代码和几分钟的时间。您还可以尝试 CSS 网格图片库以了解有关 CSS 网格的更多信息。

如何创建 CSS 网格布局？

要创建 CSS 网格布局，我们创建一个容器并将其 display 属性设置为网格。

这并不是创建网格布局所需要做的全部。您必须使用 CSS 属性 grid-template-columns 和 grid-template-rows 显式创建网格行和列。

下面给出了一个 3 x 3 网格的示例。

.container { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); }

应用于 CSS 网格容器的属性。

1）grid-template-columns属性：

grid-template-columns 属性定义了网格布局中列的数量和宽度。

这是一个示例，我们创建了 4 个等宽的列。

grid-template-columns: repeat(4, 1fr); or grid-template-columns: repeat(4, auto);

css repeat（）函数：

上面实例使用repeat函数创建 4 列，每列 1fr。

这是另一个示例，我们创建了 4 列不同宽度的列。

grid-template-columns: 20px 100px 200px 100px;

2）grid-template-rows：

grid-template-rows 属性的工作方式与 grid-template-columns 相同。的区别是它创建行而不是列。

这是一个示例，我们创建了 4 行相同高度：

grid-template-rows: repeat(4, 1fr);

或4排不同高度。

grid-template-columns: 50px 300px 350px 100px;

3）column-gap属性：

column-gap 属性在列之间添加的空间。

column-gap: 30px;

在上面的代码示例中，将在所有列之间添加 30px 的间隙。

4）row-gap属性：

row-gap 属性在行之间添加的空间。

row-gap: 20px;

在上面的代码块中，行之间添加了 20px 的间隙。

5）gap属性：

gap 属性是 row-gap 和 column-gap 的简写属性。

gap: 10px; //both column and row gap gap: 10px 39x; // row-gap: 10px; column-gap: 39px;

6）justify-content ：

justify-content 用于水平对齐容器内的整个网格。网格的宽度需要小于容器的宽度才能让 justify-content 产生效果。

justify-content 可以具有以下值。

.container { display: flex; justify-content: space-evenly; // space-around, space-between , center, start, end

a) space-evenly

space-evenly 值在可用空间中的项目的开始、结束和项目之间添加相等的空间。

b) space-around

space-around 值与 space-evenly 类似，的区别是前后空间之和等于两个相邻项之间的空间。

c) space-between

space-between 值在项目之间添加空间，但不在网格的开始和结束处。

d) center

center值将所有网格项对齐在网格的中心。

e) start

起始值对齐网格容器开始处的所有网格项。

f) end

end值对齐网格容器末尾的所有

10 个 web前端开发者必须要掌握的CSS 技巧

学习笔记

1) order

沈阳UED设计工程师培训

Java培训4月10日在线直播课程

沈阳软件开发零基础培训班

Python全栈培训课程

相关新闻推荐

UI设计难不难学？学习UI设计全攻略！2023-06-05

未来吃香的五大互联网职业，来喽！2023-06-05

什么是Java框架?有什么好处?2023-06-02

Java培训价格多少？零基础参加Java培训需要多少钱？2023-06-02

小白入门IT行业，该从哪儿下手？2023-05-30