📜前言
个人主页：smite-21😎
⚡️博客领域：【前端】【编程语言】【算法】【未知】
🔥博客初心：分享，分享，还是tm的分享！
📚精选专栏：【暂无】【…】【…】【…】
🚀支持鼓励：点赞👍、收藏⭐、留言💬
🌟大家好，我是smite-21，最近在学习网页设计的过程中，觉得能任意排版出自己想要的布局是很重要的，但刚接触难免手生易忘，从而导致又跑去翻书、翻笔记等，比较浪费时间，所以就打算把【CSS网页布局】从头到尾梳理一遍，方便自己的同时也希望对大家有帮助😎
文章目录
1.CSS的基本布局机制
CSS的三种基本定位机制：标准流、浮动、定位
在介绍浮动(float)和定位(position)之前，得先说说一个词“ 标准流 ”
🍅标准流的基本含义
什么是标准流(normal flow)？
- 和计算机领域中的标准流(预先连接的输入和输出频道)不同，网页布局中的标准流(不借助任何特殊css排列规则元素的排布规则)又被称为文档流或普通流，是浏览器在渲染显示网页内容时默认采用的一种排版规则，规定其中的元素(主要分为块级元素和行内元素)自上而下，从左往右进行流式排列；
其排布规则：块级元素独占一行。行内元素水平排列，直到内容占满一行然后换行排列；
所以我们初学HTML时知道div标签是块级元素，每个div块级元素标签都会从新行开始显示，垂直布局，占据一行，而span标签是行内元素，前后不断行，水平布局，内容在一行显示；
🍅浮动和定位技术的出现
为什么我们需要浮动和定位呢？
- 早期随着互联网的普及，略显死板僵硬的标准流式布局已经不能很好满足网站服务对象的需求，网页布局设计和开发自然越来越受到网站建设者的重视，前端开发人员希望创建出美观且高效的网页供人们使用。在这个过程中，浮动和定位技术成为了实现复杂布局的重要技术手段。浮动可以让元素脱离文档流(简称脱标)，实现侧边栏、图片环绕等效果；而定位则允许开发者精确控制页面元素的位置，包括相对定位、绝对定位和固定定位，这些技术使得网页的布局更加灵活和多样化，从而提供更丰富的用户体验和界面交互。
🍅浮动属性概要
浮动最典型的应用场景：让原本垂直布局的块级元素变为水平布局；
- 浮动属性产生之初的目的是为了实现文字环绕图片的效果，让文字环绕图片在网页中实现，类似word文档中的“图文混排”，后来则发展为实现网页布局：让多个块级元素在一行内按照需求排列显示；
这不难理解，诸如现在大家常常浏览的视频、博客网站中一行内的视频推送和商品陈列那样的布局，在技术层面上就是实现多个块级盒子(div)水平排列成一行；
【网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动】
🍅定位属性概要
定位相较于标准流和浮动的优越性
①实现元素的精确放置
②创建出层叠效果
③设计更为复杂的布局
④控制动态交互元素
- 与依赖于HTML元素的自然排列和浮动元素在文本环绕特性下的布局不同，定位技术允许开发者将元素固定在页面的特定位置，从而实现元素的精确定位；
想象你在玩拼图游戏。标准流就像是拼图的每一块都必须按照固定的顺序排列，你不能把一块放在你想放的任意位置上。浮动则像是你能把一些拼图块稍微挪开一点，让别的块围绕它，但这些块还是会按照直线排列。而定位技术就像是你可以拿起任何一块拼图，然后把它放在拼图板的任何你想放的地方，并且不管其他拼图块在哪里。
为什么要强调“不管其他拼图块在哪里”这一点⁉️
这是因为有时候，网页设计人员希望某些特定元素能在其他元素上方显示的同时又不受其他元素的影响(很像ps中图层的上下关系,在画面中体现就是在上方的图层会遮盖下方的图层)。这种效果就很难用标准流或浮动来实现，因为这两种技术都是基于元素在文档中的顺序。而通过定位技术，可以轻松地将一个元素置于另一个元素之上，创建出层次感。
并且标准流和浮动通常适用于较规则的布局设计。如果需要更复杂、非常规的布局，如倾斜排列、交错排列或者沿着某个路径排列的元素，定位技术就显得尤为有用。
对于需要随用户行为动态变化的界面元素，比如弹出提示框或动画效果，使用定位技术可以确保它们在需要的位置上出现或消失。例如，当用户点击一个按钮时，可能会有一个提示框出现在点击的位置，而不是随意摆放。
🍑小结
标准流是浏览器默认采用的一种排版规则；
浮动属性会让元素脱离标准流的限制，从而改变排列方式，实现元素并列排布；
定位属性在处理特定类型的布局和设计元素时，提供了比标准流和浮动更为灵活和强大的解决方案；
三者往往相互结合使用👉创造出既美观又符合特定设计需求的网页，提供良好体验给用户。
2.浮动
有朋友会疑惑，使用display：inline-block也可以实现让多个块级元素在一行内排列显示啊
那我就简要介绍一下display的几个常用的属性值，inline ， block， inline-block
1️⃣inline(行内元素):
- 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行；
- 不能更改元素的height，width的值，大小由内容撑开；
- 可以使用padding且上下左右都有效，margin只有left和right产生边距效果，而top和bottom不行.
2️⃣block(块级元素):
- 使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度；
- 能够改变元素的height，width的值；
- 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
3️⃣inline-block(融合行内于块级):
- 结合了上述inline的第1个特点和block的第2,3个特点；
- 用通俗的话讲，就是不独占一行的块级元素.
🍊display:inline-block VS float
👇display:inline-block 效果图
📝 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block; // 行内块元素
}
.left {
background-color: green;
}
.middle {
background-color: orangered;
}
.right {
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>
</body>
</html>
👇float 效果图
📝代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
}
.left {
background-color: green;
float:left;
}
.middle {
background-color: orangered;
float:left;
}
.right {
background-color: blueviolet;
float:left;
}
</style>
</head>
<body>
<div class="left">f左</div>
<div class="middle">f中</div>
<div class="right">f右</div>
</body>
</html>
相信大家不难看出display：inline-block的效果几乎和浮动一样，肉眼可见的不同就是：
用display:inline-block进行布局后，div之间存在间隙；
这个问题产生的原因是换行引起的，因为我们写标签语句时通常会在结束标签后顺手打个回车，于是便产生了换行符，不过HTML不会直接解释换行符，而是会将换行符解释为空格字符。这也就是为什么在HTML中空格最后会被显示成一个空白，回车也会被显示成一个空白。并且在通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的原因就是顺手敲了一下回车。
而float是忽略空白符的，自然也就没有这样的问题。
⚡️产生间隙的原代码
⚡️不敲回车键，让代码保持在同一行
- 接下来看看效果
可以看出，定义display：inline-block的块级元素能够在同一行显示，影响微乎其微(html码可读性差)的间隙问题也可以通过手段解决，那这不就和浮动一样吗。
虽然display：inline-block的效果几乎和浮动一样，但其实有很大不同，
接下来讲讲display：inline-block和float的不同之处。
🍊display:inline-block 与 float 的不同之处
display: inline-block 和 float 都是 CSS 中用于布局的属性，它们各自有不同的特点和使用场景。
display: inline-block
将元素显示为行内块级元素，这意味着元素既拥有块级元素的宽高特性，又可以和其他行内元素一样在一行内排列；
不会改变文档流，与其他行内元素并列时不会产生空白折叠。
不需要清除（clear）。即使多个元素使用 inline-block，也不会影响周围元素。
适合创建横向导航条、列表等不需要脱离文档流的布局。
float
使元素脱离标准文档流并向左或向右浮动，直到它的外边缘碰到包含框或者另一个浮动元素的边缘。
可以用来实现多列布局，让元素并排显示。
会影响周围元素，可能导致围绕浮动元素的其他内容重排，产生意料之外的边距问题。
需要清除（clear）。为了防止后续元素环绕浮动元素，通常需要对后续元素应用清除属性。
适合创建侧边栏、图片列表等需要元素并列且可能影响其他元素布局的情况。
在选择使用 display: inline-block 还是 float 时，需要考虑以下因素：
是否需要元素脱离文档流。
布局是否会受到后续元素的影响。
是否需要额外的清除操作来防止元素环绕。
布局的复杂程度和兼容性需求。
通常，display: inline-block 更简单易用，适用于不需要脱离文档流的布局。而 float 提供了更多的灵活性，但也带来了更多的复杂性，尤其是在清除和布局重排方面。随着 CSS3 的推出，Flexbox 和 Grid 布局成为了更现代、更强大的布局工具，它们提供了更好的控制性和更少的副作用，因此在许多情况下被推荐替代 float。
3.🍐定位
- 然而，过度依赖浮动和定位技术也可能导致布局的复杂性增加，维护成本提高，以及潜在的浏览器兼容性问题。因此，前端人员在设计时需要权衡使用这些技术的利弊，同时不断学习和适应新的CSS布局方法，如Grid和Flexbox，以创建更先进、响应式的网页设计。
- 尽管浮动和定位技术非常有用，但它们也带来了一些挑战，如布局崩溃、元素重叠和浏览器兼容性问题。随着响应式设计和移动优先的设计理念的兴起，前端人员开始寻求更为强大和灵活的布局解决方案，例如CSS网格（Grid）和弹性盒子（Flexbox）。这些新技术为创建适应不同屏幕尺寸和设备的网站提供了更好的工具，同时减少了对浮动和定位的依赖。
- 为了实现这些目标，前端开发者采用了各种现代技术，如HTML5, CSS3和JavaScript框架（例如React, Vue.js, Angular等），这些技术使得网页更加动态，互动性强，并且容易维护。他们还利用了网格布局（Grid Layout）和弹性盒子（Flexbox）这样的CSS特性来创建
✍🏻作者水平有限，如有编写不周的地方，欢迎评论或私信！
💞如果觉得这篇文章还不错的话，那么点赞👍、评论💬、收藏🌟就是对我最大的支持！
🎭 逆水行舟，不进则退，我们下期见👋
扫一扫
2548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
