使用 CSS 制作布局（第一部分） - 前端开发系列第五部分

本文最初发布在我的博客 - Dillion Megida's Blog

在本系列中，今天的主题是使用 CSS 制作布局 - 使用 CSS 设计布局。

我们已经了解到，CSS 通过赋予网页样式来美化网页。市面上有很多库，例如 Bootstrap，它已经为你设计好了布局，但我建议在深入研究这些库之前，先了解它们的工作原理。它们使用相同的 CSS 规则。

根据我们的指南 -路线图 - 前端，我们有；

目录

• 浮点数
• 定位
• 展示
• 盒子模型
• CSS网格
• 弹性框
• 结论

这篇文章有点长，所以为什么不喝点咖啡呢☕

我将在本系列的下一篇文章中解释 Flexbox 和 CSS Grid。

在深入探讨内容之前，我想先介绍一些 CSS 技巧。
正确命名你的类- 逻辑清晰且大小写得当，建议使用驼峰式命名法。
理解id和class-id仅对一个元素是唯一的，不能重复使用。class可以用于多个元素。
！重要提示- 一旦声明了针对元素的属性值，这些值就不能被覆盖。
理解测量-应正确使用px、、以确保页面的一致性。网站兼容性- 有些网站不接受某些属性。有时，解决这个问题的方法是添加某些前缀。emrem

浮点数

.element {
    float: none | right | left;
}

此属性允许元素位于其容器左侧的右侧。none 的意思是，不浮动。
请看下面的代码：

<!-- index.html -->
<div class='container'>
    <div>

    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

/* style.css */
.container {
    width: 400px;
    background-color: lightblue;
    height: 400px;
}
.container div {
    height: 200px;
    width: 200px;
    background-color: blue;
}
.container p {
    font-size: 30px;
}

这是我们期望的正常结果，因为 div 元素位于p元素之前。让我们将其设置div为向右浮动。

/* Add the property of float to the above program */
.container div {
    float: right;
}

我们的结果是，

你注意到了什么？

divdiv向右浮动，不仅如此，文本还会包裹 div。文本会占据 div 的可用空间。这是浮动的基本实现。
点击此处了解更多关于 CSS 浮动的信息 - CSS 浮动

定位

此属性允许您将元素放置在页面的特定部分。
某些应用的方法可能会受到父元素的限制，而另一些方法则允许元素独立放置。CSS的定位
值为static、fixed和。 元素可以使用、relative和属性进一步定位。absolute
topdownleftright

仅当设置了显示属性时才可以使用这些属性。

-position: static

这是任何元素的默认定位。它根据页面流程进行定位。它们不受top、bottom或left的影响right。

-position: relative

这会将元素相对于其默认位置进行定位。top例如，当应用 时，它会将元素向下推。元素顶部剩余的空间不容纳任何其他元素。此类元素依赖于父元素来确定其位置。

-position: absolute

此属性使元素失去对其默认位置的占有，从而允许其他元素占用其空间。top应用时，它相对于父元素起作用，但不会推动任何其他元素。

-position: fixed

此值确保元素无论放置在何处，都会被赋予特定的位置。该元素独立于父元素，可以放置在任何位置。相反，它们是相对于视口定位的。因此，任何页面滚动都不会扰乱元素的位置。它们还会失去默认占用的空间，因此其他元素可以占据它们原来的位置。例如，position: fixed; top: 0会将元素移至页面顶部。

relative固定 (fixed) 和 绝对 (absolute) 的区别在于，固定 (fixed) 是相对于视口定位，而绝对 (absolute) 是相对于父元素定位。两者的相似之处在于，与static、 和不同，它们不会影响其他元素sticky。

-position: sticky

此值在相对位置和固定位置之间切换。元素需要声明一些条件。元素从相对位置开始，一旦满足这些条件，位置就会变为固定。例如，position: sticky, top: 0。在这里，只要元素到达浏览器顶部（可能是在页面滚动之后），它就会变为固定位置。
无论什么原因导致元素的 top 属性变为 0，它都会变为相对位置。

展示

顾名思义，此属性控制元素的显示方式。此属性有许多不同的值，但我将解释一下主要的值。默认显示值为 或block。inline每种显示值都取决于不同的用例。

-display: block

该值block允许元素显示在新行上，并向最大可用空间的左右两侧拉伸。我们有一些块级标签，例如<p>、<h1-h6>等等，您可能已经注意到，它们会最大化可用宽度，因此其他元素会被推到新行。

-display: inline

该值inline允许元素刚好占据所需的最大宽度。除非没有可用空间，否则不会显示新行。内联元素包括<a>、<span>等。

对于display: inline，诸如height& 之类的属性width将不起作用，因为正如我所提到的，元素仅占用其显示所需的最大空间。这只有在 中才有可能display: inline-block。

注意：这些是默认值。您可以覆盖它们，例如，根据您希望的显示方式，手动将元素的显示更改<a>为块显示或将元素的显示更改为内联显示。<p>

-display: none

当在浏览器中将valuenone与 display 属性一起使用时，它只是告诉浏览器在渲染页面时应该移除该元素。另一种方法是visibility使用 value属性hidden。这两种方法的区别在于， valuedisplay: none会将元素从其位置移除，从而允许其他元素占据该区域；而 value 则visibility: hidden确保没有其他元素占据该区域，但元素仍然不可见。

-display: inline-block

该值inline-block允许元素表现得像内联元素，但可以将height和之类的属性width应用于它们。

-display: flex

该值flex将元素显示为块级弹性容器。

-display: grid

该值grid将元素显示为块级网格容器。

这些是主要的显示值。您可以在此处找到其他值的列表，并在此处了解有关显示属性的更多信息。

请查看此 W3Schools 资源以了解位置属性。

盒子模型

页面上的每个元素都被视为一个盒子。
盒子模型指的是盒子中元素周围的所有内容，例如padding、margin和borders实际内容。
对于默认元素作为盒子的情况，例如<p class='name'>Dillion

.name {
    width: 400px;
    padding: 10px;
    margin-left: 30px;
    border: 2px;
}

盒子的总宽度为 400px（内容宽度）+ 10px * 2（左内边距和右内边距）+ 30px（左外边距）+ 2px * 2（左边框和右边框）======= 454px。我们的内容是 400px，但盒子的宽度是 454px。
这就是盒子模型背后的概念——元素被视为一个带有额外属性和内容本身的盒子。点击此处
了解更多关于盒子模型的信息。

正如我之前所说，我将在下一篇文章中解释 CSS Grids 和 CSS Flex。

结论

通过适当使用上述布局属性，可以得到美观的网页。

我希望它值得一读。

相信你现在已经理解了 CSS 布局的概念（不包括 flex 和 grid）。如果你还不完全理解，可以参考上面分享的文章。

敬请关注我关于本系列的下一篇文章。您可以通过 Twitter @iamdillion
联系我。

谢谢🤗

结论