前端人必备知识：盒子模型的各式各样的“外衣”！

Crab_Kai

296人浏览 · 2026-05-27 01:03:05

Crab_Kai · 2026-05-27 01:03:05 发布

学习过前端的人以及正在学前端的人都晓得，CSS布局两大核心：盒子模型 + Flex布局。前者决定元素的形态与占位，后者实现灵活的页面排布。搞懂行内、块级元素如何自由转换，再掌握Flex的对齐、排序、自适应技巧，布局效率直接翻倍。话不多说，进入正题。

行内元素与块级元素的特点，前面的表单的基础知识（新手小白）这篇文章讲过，所有现在讲一讲行内元素与块级元素之间如何转换的。核心就是靠display属性相互转换。

行内→块级：display:block;

效果：①独占一行；②支持设置宽、高、内外边距

 b {
            display: block;
            width: 200px;
            height: 80px;
        }

块级←行内：display:inline;

效果：①同行排列；②宽高不能自行设置，其宽高仅由内容撑起

#div2 {
            width: 200px;
            height: 80px;
            display: inline;
        }

行内块：display:inline-block;

效果：①同行并排；②宽高可以自行设置

 b {
    display: inline-block;
   }

补充！！！

隐藏元素：display:none; 作用：元素完全消失，不占页面空间。

接下来，就是知识的更深一步了。

弹性Flex布局，具体是说什么的？它是啥东西？

【Flex 布局核心概念与机制】

Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。

其核心概念包括：

① 容器与项目：采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。

② 主轴与交叉轴：Flex 容器有两根轴，主轴由flex-direction定义，交叉轴垂直于主轴。

③对齐方式：justify-content 控制主轴对齐，align-items 和 align-content 控制交叉轴对齐。

④ 空间分配：通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。

再进一步深入讲解

1、容器：设置display:flex的父元素；项目：容器里的子元素。

容器常用属性：

display:flex：开启弹性布局	flex-direction：主轴方向	justify-content:主轴对齐	align-items:交叉轴对齐	flex-wrap:wrap：自动换行（内容超出不挤压）
	row(默认):水平排列	center:居中	center:垂直居中（水平排列时最常用）
	colum:垂直排列	space-around:两侧留白均分
		space-between:两端对齐、中间均分

项目常用属性：

flex:1：平分剩余空间（多元素等分宽度/高度）

align-self:center：单独控制某个子元素对齐

2、Flex 容器默认规则（不写属性时的默认值）

1. flex-direction: row

a.主轴方向：水平从左到右

b.项目会水平排列成一排

2. flex-wrap: nowrap

a. 不换行（默认）

b.项目会被压缩以适应容器宽度（除非设置 flex-shrink: 0）

c.如果想换行，需要设置: flex-wrap: wrap;

3. justify-content: flex-start

a.主轴对齐方式：项目靠主轴起点（左）对齐

b.其他值: flex-end(右) | center(居中) | space-between | space-around

4. align-items: stretch

a.交叉轴对齐方式：项目会拉伸填满整个交叉轴方向

b.前提：项目没有设置 height（或者 height 为 auto）

c. 其他值: flex-start | flex-end | center | baseline

5. align-content: normal (在单行时无效)

a.多行项目在交叉轴方向的对齐方式

6. flex-grow: 0

a.默认不自动放大（当容器有剩余空间时）

b.如果想自动放大: flex-grow: 1;

7. flex-shrink: 1

a.默认会自动收缩（当项目总宽度超过容器时）

b. 注意：只有 width/flex-basis 参与收缩，margin/padding/border 不会收缩！

c.如果不想收缩: flex-shrink: 0;

8. flex-basis: auto

a.项目的基础尺寸，默认取 width 值

c.也可以设置为具体像素: flex-basis: 100px;

代码解释：

 .container {
            /* 通过 display:flex 将此元素强制转换为 Flex 容器 */
            display: flex;
            /* 下面是可自行配置的灵活规则 */
            /* flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start; */

            border: 2px solid #aaa;
            width: 600px;
            height: 300px;
            padding: 10px;
        }

3、主轴对齐方式(justify-content)

justify-content属性的作用：作用：控制所有项目在主轴（水平方向）上的对齐方式和间距分布（前提：只有在主轴方向有剩余空间时才会生效）

可选值：

1. flex-start ：项目靠主轴起点（左边）对齐（默认值）

2. flex-end ：项目靠主轴终点（右边）对齐

3. center：项目在主轴方向居中对齐

4. space-evenly ：项目之间以及项目与容器边缘的间距完全相等

5. space-between ：项目之间间距相等，但首尾项目紧贴容器边缘

6. space-around：项目两侧的外边距相等（项目之间间距是边缘间距的2倍）

代码示例解释：

.container {
            display: flex;
            border: 2px solid #a00;
            padding: 10px;
            height: 100px;
        }
        
        /* 
        ====== 项目样式 ======
        简单设置项目的尺寸和外观
        */
        .item {
            background-color: #4CAF50;
            border: 3px solid red;
            width: 80px;
            height: 40px;
            color: white;
            /* margin: 5px;
            padding: 20px; */
            text-align: center;
        }

运行结果截图：

4、多行项目在容器交叉轴方向的对齐方式（含换行控制）

align-content属性作用：控制多行项目在交叉轴（垂直方向）上的对齐方式

重要前提：

1. 必须先使用 flex-wrap: wrap 换行（产生多行）

2. 只有一行时，align-content 无效

3. 只有在交叉轴方向有剩余空间时才会生效

可选值：

1. flex-start ：所有行靠交叉轴起点（顶部）对齐

2. flex-end：所有行靠交叉轴终点（底部）对齐

3. center ：所有行在交叉轴方向居中对齐

4. space-between：行之间间距相等，首行靠顶，末行靠底

5. space-around ：行上下间距相等，整体与容器边缘也有间距

6. stretch ：默认值，行拉伸填满剩余空间（行内项目也会被拉伸）

flex-wrap 属性

可选值：

1. nowrap (默认) ：不换行，项目会被压缩以适应容器

2. wrap：换行，项目超出容器时自动换到下一行

3. wrap-reverse ：换行，但反向显示（第一行在底部）

代码示例解释：

  /* 定义flex容器的基础样式 */
    .container {
      /* 将容器设置为flex布局 */
      display: flex; 
      /* 容器宽度固定，控制换行效果 */
      width: 500px; 
       /* 容器高度固定，为交叉轴留出空间 */
      height: 250px;
      /* 容器边框，方便观察整体范围 */
      border: 2px solid #333; 
      /* 容器之间的外边距，避免拥挤 */
      margin: 10px; 
      /* 强制换行：当项目总宽度超过容器时自动换行，产生多行 */
      flex-wrap: wrap;      
    }

    /* 
    ====== 项目样式 ======
    
    注意：本示例中项目没有 margin，所以 flex-shrink 可以正常压缩
    如果项目有 margin，margin 不会参与压缩，可能导致溢出
    */
    .item {
      /* 项目宽度 */
      width: 160px; 
      /* 项目高度 */
      height: 40px; 
      /* 项目边框 */
      border: green solid 1px; 
      /* 文字颜色 */
      color: red; 
      /* 文字水平居中 */
      text-align: center; 
      /* 项目外边距（注释掉，为了让 flex-shrink 正常压缩）*/
      /* margin: 5px;  */
    }

    /* 标题样式 */
    p { 
      margin: 20px 0 5px 10px;
    }

运行结果截图：