网页布局这东西，是不是总觉得有点难搞？哈哈，其实只要掌握了几个核心技巧，你就Neng轻松搞定各种复杂的页面布局，咱就是说不再被布局搞得头大。

CSS 布局是网页设计的核心技术，主要用于控制页面元素的排列与呈现方式。

目前主流的布局方案包括常规文档流布局、模式转换布局、弹性布局、定位布局、网格布局和多列布局。

这是浏览器的默认排版，是 CSS 布局的基础，页面大结构依靠块元素上下堆叠实现。

包含块元素和行内元素，文档流方向默认从上到下、从左到右排列。

display转换为 inline-block后Ke以设置宽高，又不用独占一行，这种特点让它Ke以广泛应用于让块级盒子一行显示或让行内盒子具备宽高的场景。

但是使用行内块元素需要注意： 元素间会有空隙，需要给父元素设font-size: ，因此适合对间距要求不高的场景，Ru果精细排版建议用 Flex或Grid。

Flexbox是Flexible Box Layout Module的缩写，Ke以快速实现元素的对齐、分布和空间分配。

例如京东、小米等主流网站dou使用了flex布局，而且我们的低代码平台也Ke以设置元素为flex布局。

/* 父容器 / .container { ... display: flex; / 开启Flex / align-items: center; / 交叉轴居中 */ ... }

网格布局是二维布局模型，通过定义行和列，精准控制网页元素的位置、尺寸，还Neng实现响应式设计。

/* 卡片网格容器 / .card-grid { display: grid; gap: 20px; / 卡片之间的水平+垂直间距 / / 核心：自动适配列数，列宽Zui小250px，Zui大自适应 */ grid-template-columns: repeat); }...

logo 居左、登录按钮居右，且两者dou垂直居中。

.container { ... display: flex; align-items: center; justify-content: space-between; /* 主轴两端对齐 */ ... }

搜索框自动占满左右元素的剩余空间。

.container { width: 800px; height: 80px; border: 1px solid #ccc; display: flex; align-items: center; ... } .left { width: 80px; height: 40px; ... } .search { flex: ; /* 占满主轴剩余空间 */ height: 40px; ... } .right { width: 80px; height: 40px; line-height: 40px; ... }

子元素垂直排列，且垂直居中。

.container { ... display: flex; flex-direction: column; /* geng改主轴为垂直方向 / justify-content: center; / 主轴居中 / gap: 10px; / 项目间距 */ ... }

元素超出父容器宽度自动换行。

.container { ... width: 800px; display: flex; flex-wrap: wrap; /* 超出容器宽度自动换行 */ gap: 15px; ... } .item { width: 220px; height: 120px; ... }

在页面中水平 + 垂直居中

body { margin: ; height: 100vh; /* 占满视口高度 / display: flex; justify-content: center; / 水平居中 / align-items: center; / 垂直居中 */ ... } .login-box { width: 400px; height: 300px; line-height: 300px; ... }

...}.item {......}/* 自定义顺序 /.item1 { order: ; }.item2 { order ; }.item;你知道为什么百度不收录某些网站吗？说实话，这是一个hen复杂的问题，涉及算法、内容质量等多个方面但有一种可Neng就是网站的架构或内容质量不佳，导致爬虫无法有效抓取或认为不值得收录。

"子绝父相": 子元素用绝对定位：Neng浮在上方，且不占位置、不影响其他元素布局，而父元素用相对定位，让子元素Neng跟着父元素移动.

BFC规则下会包含浮动高度，因此常用来清除浮动影响，例如B站评论区就是使用overflow清除浮动触发BFC包裹内容.