CSS布局技巧

1. 浮动（float）

• 应用场景： 实现图文混排

比如在一篇新闻文章中，让图片浮动在文字旁边，使文字环绕图片展示，增加页面的丰富度，代码如下：

`html

img { float: left; margin-right: 10px; } < img src="example.jpg" alt="example">

这是一段文字内容，由于图片设置了浮动，文字会环绕在图片周围显示。这是一种常见的图文混排效果。

`   多列布局

在简单的网页布局中，可利用浮动来创建多列布局，例如将一个网页页面分为左、中、右三列，分别放置不同的内容模块，像导航栏、主体内容、侧边栏等。以下是一个简单的两列布局示例：

`html

.left-column { float: left; width: 30%; } .right-column { float: right; width: 70%; } </style> ` - 应用场景： - 绝对定位（absolute）：适用于创建模态窗口、提示框等脱离文档流的元素定位。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html>： absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。 - 相对定位（relative）：用于微调元素位置，如调整按钮在容器中的精确位置。相对定位元素的定位是相对其正常位置。 移动相对定位元素，但它原本所占的空间不会改变。 相对定位元素经常被用来作为绝对定位元素的容器块。 - 固定定位（fixed）：常用于制作网页的顶部导航栏或侧边栏，使其不随页面滚动而移动。 - static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。 - 粘性定位（sticky）： 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 - 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix。

position: -webkit-sticky; /* Safari */

position: sticky;

重叠的元素：

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） 一个元素可以有正数或负数的堆叠顺序

• 实操示例：

css

.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 

这段代码使模态框在页面居中显示。

3. 弹性盒子布局（flexbox） 父级盒子可以有多个子盒子，弹性盒子只定义了子元素如何布局，不影响盒子内外的渲染；在父级定义该父级为弹性盒子，父级内的子级盒子全在一行显示，影响只是布局。

• 应用场景：适合创建自适应的导航栏、产品卡片列表等布局，能有效分配容器空间。
• 实操示例：

css

.container { display: flex; justify-content: space-between; } flex-direction的值有:

row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。{反序排列；} column：纵向排列。 column-reverse：反转纵向排列，从后往前排，最后一项排在最上面{反向纵向排列}

此代码使容器内的元素两端对齐，均匀分布在主轴上。