03-现代网页布局

最新推荐文章于 2025-12-04 22:56:41 发布

原创最新推荐文章于 2025-12-04 22:56:41 发布 · 1.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css3 #html5

03-现代网页布局

display模式转换

display: block; 把行内元素转换为块元素

display: inline; 把块元素转换为行内元素

display: inline-block; 转换为行内块元素

flex布局（弹性布局）

容器(父盒子)设置 display: flex; 可以让子盒子按照主轴方式排列。

如果子元素有大小，则按照给定大小来显示
如果子元素没有大小，则拉伸充满父容器
若子元素总宽度超过容器宽度，默认会压缩子元素

主轴的对齐方式

justify-content 定义主轴上的对齐方式

flex-start 左对齐(默认)

示例：justify-content: flex-start;
flex-end 右对齐
center 居中对齐
space-between 两端对齐 A–B–C
space-around 项目两侧间隔相等 -A–B–C-
space-evenly 项目间隔均匀分布 --A–B–C–

交叉轴的对齐方式（单行）

align-items 定义交叉轴上的对齐方式(单行时整体对齐)

flex-start 项目在交叉轴起点对齐(默认值)

示例：align-items: flex-start;
flex-end 项目在交叉轴终点对齐
center 项目在交叉轴居中对齐
stretch 项目拉伸填充整个容器高度(需子项目无固定高度)

修改主轴方向

flex-direction 定义主轴方向(改变主轴方向)

row 默认值，子元素沿水平主轴(从左到右)排列

示例：flex-direction:row;
row-reverse 子元素沿水平主轴反向排列(从右到左)
column 子元素沿垂直主轴(从上到下)排列
column-reverse 子元素沿垂直主轴反向排列(从下到上)

补：a 如果给了flex布局，则可以直接设置宽度和高度

交叉轴的对齐方式（多行）

flex-wrap 控制是否换行

nowrap 不换行 ABCDEFGH(全部横向排列，可能被压缩)

示例：flex-wrap: nowrap;
wrap ABCD EFGH(第一行上方，第二行下方) 换行
wrap-reverse EFGH ABCD(第一行下方，第二行上方) 翻转(了解即可)

align-content定义多行时交叉轴上的对齐方式(仅当 flex-wrap: wrap 且内容换行时生效)

flex-start 上对齐

示例：align-content: start;
flex-end 下对齐
center 居中对齐
space-between 两端对齐
space-around 项目两侧间隔相等
space-evenly 项目间隔均匀分布

单行弹性布局

项目(子盒子)属性：

子元素的属性用于控制自身的尺寸、顺序或对齐方式

flex-grow 定义项目的放大比例(默认0，即不放大)

示例：flex-grow:1;
flex-shrink 定义项目的缩小比例(默认1，空间不足时等比缩小)

示例：flex-shrink:0;
flex-basis 定义项目在主轴方向上的初始大小(优先级高于width/height)

示例：flex-basis:200px;
flex flex-grow、flex-shrink、flex-basis 的简写

示例：flex:1;
align-self（很少用）覆盖容器的 align-items，单独定义某个项目的交叉轴对齐方式

示例：align-self: center;
order（很少用）定义项目的排列顺序(默认 0，数值越小越靠前)

示例：order:-1;

gap 简写属性用于设置行与列之间的间隙(间距)

gap:20px;行和列之间保持20像素间隙
gap:20px;行和列之间保持20像素间隙

注意: gap是写到父元素(容器身上)

多行弹性布局（gird更好用）

京东写法（flex:1; + calc函数）：

    .box {
      display: flex;
      flex-wrap: wrap;
      width: 80%;
      border: 1px solid red;
      margin: 0 auto;
    }

    .box .item {
      flex: 1;
      width: 80px;
      height: 120px;
      background-color: pink;
      min-width: calc(16.6666667% - 16px);
      max-width: calc(16.6666667% - 16px);
      margin: 0 8px 16px;
    }

  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
    <div class="item">14</div>
    <div class="item">15</div>
    <div class="item">16</div>
  </div>

淘宝写法（盒子套盒子，w使整体水平居中，box向左右拉使item与footer对齐，item与content叠加营造留白效果）：

    .w {
      width: 80%;
      margin: 20px auto;
    }

    .box {
      display: flex;
      flex-wrap: wrap;
      border: 1px solid red;
      margin-left: -8px;
      margin-right: -8px;
    }

    .box .item {
      flex: 0 0 16.666666%;
      height: 120px;
      margin-bottom: 16px;
      padding: 0 8px;
    }

    .item .content {
      height: 100%;
      width: 100%;
      background-color: pink;
    }

<div class="w">
    <div class="box">
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
      <div class="item">
        <div class="content"></div>
      </div>
    </div>
  </div>

图片下方空白的解决措施

方法一：

把图片转换为块级元素。

示例：display: block;

方法二：

vertical-align: 设置图片对齐方式不是基线对齐即可（vertical-align）。

baseline 默认，基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐
```
 示例：vertical-align: top;
```

定位布局

定位属性：

position: (static/relative/absolute/fixed/sticky)

偏移属性：top/right/bottom/left 控制元素偏移量

z-index: 控制层叠顺序，数值越大层级越高

position: static; 默认定位（普通元素布局）
position: relative; 设定元素为相对定位（微调元素、子绝父相）
- 相对于自身原来位置移动距离
- 不脱离正常流，元素原位置仍被保留，其他元素按原布局排列
- 可以通过top、bottom、left、right 属性进行偏移
- 优先级:若同时设置 top 和 bottom，仅 top 生效；同理 left 覆盖 right
position: absolute; 设定元素为绝对定位（弹窗、下拉菜单、悬浮元素）
- 元素脱离正常流，不占据空间，其他元素按原布局排列
- 相对于最近的已定位祖先元素(position非static)移动位置，若都无定位则相对于视口来定位
- 可以通过top、bottom、left、right 属性进行偏移
- 优先级:若同时设置 top 和 bottom，仅 top 生效;同理 left 覆盖 right
position: fixed; 设定元素为固定定位（固定导航栏、返回顶部按钮）
- 元素脱离正常流，不占据空间，其他元素按原布局排列
- 始终相对于浏览器窗口(视口)定位，滚动页面时位置不变
- 可以通过top、bottom、left、right 属性进行偏移
- 优先级:若同时设置 top 和 bottom，仅 top 生效;同理 left 覆盖 right。
position: sticky; 设定元素为粘性定位（吸顶导航栏、侧边栏固定）
- 元素在滚动到指定位置(如 top:10px)前为相对定位，之后转为固定定位
- 父容器的 overflow 需为 visible，否则粘性定位失效
- 可以通过top、bottom、left、right属性进行偏移
- 须指定 top, right, bottom 或 left 四个其中之一，才可使粘性定位生效
z-index; 数值; 设定层级（层叠顺序）
值类型:整数(正数、负数、零)或 auto。数值越大，层级越高
默认值:auto(等同于未设置，后出现的元素覆盖前者)
生效条件:仅对定位元素(position 值为 relative、absolute、fixed 或 sticky)有效

常见组合：

固定导航栏:position:fixed+z-index

弹窗:position:fixed+居中技巧+高 z-index

吸顶效果:position:sticky+ top

gird布局（网格布局）

容器(父盒子)设置 display: grid;(块级)或者 display: inline-grid;(行内)

绘制网格：（网格轨道）

grid-template-columns 定义网格中的列

grid-template-rows 定义网格中的行

固定长度

示例：grid-template-columns: 100px 200px;
百分比

示例：grid-template-columns: 30% 70%;
fr 单位

示例：grid-template-columns: 1fr 2fr;
auto

示例：grid-template-columns: auto 100px;
repeat()函数
- repeat(次数,轨道尺寸)
示例：grid-template-columns: repeat(3,1fr); (等效于 1fr 1fr 1fr)
- repeat(自动填充,轨道尺寸):适用于响应式布局中“列数随容器宽度变化”的场景。
auto-fill:尽可能多地创建列。

auto-fit:尽可能拉伸列填满容器(会合并空白，列宽不小于 minmax的最小值)

示例：grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); 响应式布局核心代码
minmax()函数

minmax(最小值,最大值)

示例：grid-template-columns: minmax(100px, 1fr);

对齐方式

justify-content 是控制列轨道(Column Tracks)在容器内水平分布

align-content是控制行轨道(Row Tracks)在容器内水平分布

start(默认值) 左对齐顶部对齐
end 右对齐底部对齐
center 水平居中对齐垂直居中对齐
space-around 两侧留出相等的空白，项目周围空间均匀分布上下留出相等的空白，项目周围空间均匀分布
space-between 首尾项目贴边上下项目贴边
space-evenly 项目间、首尾与边界的空白相等项目间、首尾与边界的空白相等

网格间距

gap: 20px; 行和列之间保持20像素间隙。

gap:20px 30px; 行间距是20像素，列间距是30像素。

可分开写：column-gap: 30px; row-gap: 20px;

元素跨越多个网格单元

实现语法1:
- 跨列: grid-column:开始线编号/结束线编号;
  
  示例：grid-column:1/3; 1/3表示从第1列到第3列
- 跨行: grid-row:开始线编号/结束线编号;
  
  示例：grid-row:1/3; 1/3 表示从第 1 行到第 3 行

注意：该属性要加到项目(子元素)身上

实现语法2:
- 跨列: grid-column:开始线编号 /s pan 跨单元格数量; 或者 grid-column: span 跨单元格数量 / 结束线编号;
  
  示例: grid-column:1/span 2; 从1线开始，跨2个单元格
- 跨行: grid-row:开始线编号 / span 跨单元格数量; 或者 grid-column: span 跨单元格数量 / 结束线编号;
  
  示例：grid-row:1/span 2; 从1线开始，跨2个单元格
实现语法3:

grid-area: 行开始线编号 / 列开始线编号 / 行结束线编号 / 列结束线编号;

网格填充方式

grid-auto-flow决定网格容器中子元素排列填充方式

grid-auto-flow: row;(默认)

子元素按先行后列顺序填充，优先填满一行后换行
grid-auto-flow: column;

子元素按先列后行顺序填充，优先填满一列后换列

填充容器方式

object-fit 是 CSS 中用于控制替换元素(如 <img>、<video>、<iframe>等加载外部资源的元素)内容如何适应其容器尺寸的属性

fill 默认值，拉伸内容以完全填充容器，不保持宽高比，可能导致内容变形(最常用但需谨慎)
contain 保持内容固有宽高比，缩放至完全适应容器内部(内容全部可见)，容器可能有空白(类似“适应”模式)
cover 保持内容固有宽高比，缩放至覆盖容器(内容可能部分被裁剪)，容器无空白(类似“填充”模式)

配合：

object-position: object-position 控制内容在容器内的对齐位置(如 center居中、top left 左上角)，常与 object-fit搭配使用(例如 cover时调整裁剪区域)

项目对齐方式

justify-items: 水平对齐方式;
align-items: 垂直对齐方式;
place-items: 水平+垂直方式; （为了提高可读性和兼容性，不提倡）
- start 对齐单元格起始边缘(左对齐) 对齐单元格起始边缘(顶部对齐)
- end 对齐单元格结束边缘(右对齐) 对齐单元格结束边缘(底部对齐)
- center 水平居中对齐垂直居中对齐
- stretch 拉伸填满单元格宽度(默认值) 拉伸填满单元格高度(默认值)

多列布局

多列布局用于将元素的内容自动分割为指定数量的垂直列

column-count 根据容器宽度和 column-count值，自动分配列宽
column-gap 列之间的间距
column-rule 列间的分隔线样式(颜色、宽度、样式)

自动分割解决方案：

break-inside: avoid-column; 强制元素不跨列分割(默认 auto，允许跨列)，给子元素添加

-webkit-column-break-inside: avoid; 老版本解决方案

鼠标样式

default 默认箭头(通常是系统默认的箭头光标)
pointer 手型(指尖朝下的小手)，常用于可点击元素(如链接<a>、按钮<button>)
text |型竖线(类似文本输入光标)，用于可编辑文本区域(如<textarea>、contenteditable元素)
wait 等待(旋转圆圈或沙漏)，表示操作进行中(如加载、提交时)
help 帮助(带问号的箭头)，提示用户需要帮助(如提示信息区域)
not-allowed 禁止(圆圈带斜线)，表示操作不可用(如禁用的按钮)
grab 抓取(手型带抓取动作)，表示可拖动(如可拖拽的元素)
grabbing 抓取中(手型收紧)，表示正在拖动(配合 grab使用)
zoom-in 放大(+号)，表示放大操作(如图预览时)
zoom-out 缩小(-号)，表示缩小操作(如图预览时)

CSS属性书写顺序

布局相关

display(显示类型)、visibility(可见性)、position(定位方式)、top/right/bottom/left(定位偏移)、float(浮动)、clear(清除浮动)、overflow(溢出处理)、z-index(层叠顺序)、clip(裁剪)
盒模型

box-sizing(盒模型计算方式)、width/min-width/max-width(宽度)、height/min-height/max-height(高度)、margin(外边距)、padding(内边距)、border(边框)、outline(轮廓，可选)
视觉样式

color(文本颜色)、background(背景，含 background-color/background-image等)、font(字体合写)、font-size(字号)、font-family(字体系列)、line-height(行高)、text-align(文本对齐)、text-indent(首行缩进)、letter-spacing(字间距)、white-space(空自处理)
交互与动画

cursor(鼠标指针)、opacity(透明度)、transition(过渡)、animation(动画)、transform(变换，如旋转、缩放)
其他(特殊/低频)

filter(滤镜)、clip-path(裁剪路径)、backdrop-filter(背景滤镜)、will-change(优化提示)、touch-action(触摸行为)、scroll-behavior(滚动行为)