培训首页  >  软件开发新闻  >  10 个 web前端开发者必须要掌握的CSS 技巧
web前端课程四个月项目实训

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

来源：

沈阳市和平区爱尚职业培训机构

    发表于：2022-04-10 10:51:10   37次浏览
相关标签： 软件开发培训   沈阳软件开发培训

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 技巧原创内容，请点击 沈阳软件开发培训

  • 软件开发
  • 软件测试
  • 数据库
  • Web前端
  • 大数据
  • 人工智能
  • 零基础
  • 有HTML基础
  • 有PHP基础
  • 有C语言基础
  • 有JAVA基础
  • 其他计算机语言基础
  • 周末班
  • 全日制白班
  • 随到随学

热门课程

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

    询价

  • Python全栈培训课程

    询价

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

    询价

  • 沈阳Python零基础就业培训班

    询价

  • 沈阳爱尚web前端培训课程

    询价

培训问答

在线课程顾问

预约试听

只要一个电话

我们为您免费回电！

马上预约

温馨提示

学校环境

更多>>

热推课程

更多>>

培训资讯

更多>>
热门信息