【从0-1的CSS】第3篇：盒子模型与弹性布局

棉花糖超人2025-07-07 8:10

文章目录

盒子模型

盒子模型是网页设计中一种很重要的思维模型，即把网页中的每个元素都看做是一个盒子。这个盒子模型主要是由四个部分组成：内容区content、内边距padding、边框border、外边距margin。

内容区content

内容区是整个盒子模型的中心，主要是存放内容，内容可以是文本、图片等资源。主要属性是：width、height，分别用来指定盒子内容区域的宽度和高度。

内边距padding

内边距是内容区和边框之间的空间，可以通过设置这四种属性：padding-top、padding-right、padding-bottom、padding-left，分别来设置内容区在上、右、下、左四个方向上与边框之间的距离

边框border

边框是环绕内容区和内边距的边界，可以通过设置这几种属性：border-style、border-width、border-color，分别来设置边框的样式、宽度、和颜色。

外边距margin

外边距位于盒子模型的最外围，通过外边距可以是盒子之间，也就是元素之间不会紧凑的连接在一块，是布局中很重要的一个手段。可以通过设置margin-top、margin-right、margin-bottom、margin-left以及他们的简写属性来设置外边距的宽度（也就是与其他元素之间的距离）

元素的宽度高度

通常设置元素的宽度和高度时，实际上设置的只是元素内容区域的宽度和高度，如刚刚所讲，盒子模型是讲元素当成一整个盒子，所以元素的实际宽度和高度应该包括以上四个部分之后，即

总宽度：content width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

总高度：content height + padding-top + padding-bottom + border-top + border-bottom + margin-top+ margin-bottom

box-sizing属性

根据上面元素的宽度和高度，box-sizing属性用于指定元素的盒子模型的宽高度的计算方式，重新定义的元素的尺寸。该属性指主要有两种：content-box和border-box

offsetWidth和offsetHeight是获取元素中的宽度和高度

content-box：设置的width和height就是内容区的width和height

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: aqua; /* 背景色 */
            /* padding:10px 5px 15px 20px; 设置内边距: 上\右\下\左 */
            padding: 50px;
            border:20px solid red;   /* 设置边框 */
            margin: 10px;   /* 设置外边距:盒子与外边框的间距 一个值代表上下左右值一样 */
            box-sizing: content-box; /* 固定盒子的context的宽高度大小 */
            /*box-sizing: border-box; !* 固定盒子的context + padding + border的宽高度大小 *!*/
        }
    </style>
</head>
<body>
    <div class="d1">
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>
</body>
</html>

浏览器显示如下

可以看出offsetWidth和offsetHeight都是为html中设置的200px

border-box:设置的width和height是context + padding + border的width和height

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: aqua; /* 背景色 */
            /* padding:10px 5px 15px 20px; 设置内边距: 上\右\下\左 */
            padding: 50px;
            border:20px solid red;   /* 设置边框 */
            margin: 10px;   /* 设置外边距:盒子与外边框的间距 一个值代表上下左右值一样 */
            /*box-sizing: content-box; !* 固定盒子的context的宽高度大小 *!*/
            box-sizing: border-box; /* 固定盒子的context + padding + border的宽高度大小 */
        }
    </style>
</head>
<body>
    <div class="d1">
        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </div>

</body>
</html>

浏览器显示如下

可以看出offsetWidth和offsetHeight都是为html中设置的340px (200px + 50 + 20 + 50 + 20)

弹性布局

弹性布局是CSS3中一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，也就是为了满足不同屏幕大小和设备类型（手机、电脑、平板...）适配问题。

display属性可以指定html的元素为弹性布局

弹性布局Flex：Flexible box，采用Flex布局的元素，称为Flex容器，简称容器。所有的子元素都是容器成员，称为Flex项目：Flex item简称项目。容器默认存在两根轴，即水平主轴和垂直的交叉轴。

主轴开始的位置叫做main start,结束的位置叫做main end。

交叉轴开始的位置叫做cross start,结束的位置叫做cross end。

Flex容器的属性

属性 描述
flex-direction 决定主轴上的方向（项目的排列方向)
flex-wrap 默认情况下，项目都排列在一根轴线上，如果一根轴线排不下，则flex-wrap属性决定如何换行
flex-flow 是flex-direction和flex-wrap两个属性的简写flex-flow: flex-direction flex-wrap;
justify-content 用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items 用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content 定义多个轴线的对齐方式，如果项目只有一根轴线，则不起作用

flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向）

值 描述
row 默认值，主轴沿水平方向从左到右
row-reverse 主轴沿水平方向从右到左
column 主轴沿垂直方向从上到下
column-reverse 主轴沿垂直方向从下到上
initial 将此属性设置为属性的默认值
inherit 从父元素继承此属性的值
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-direction</title>
    <style>
        #main {
            border: 1px solid #CCC;
            padding: 5px;
            position: relative;
        }
        .row, .row_reverse, .column, .column_reverse{
            display: flex;
            margin-bottom: 5px;
        }
        .row {
            flex-direction: row;
        }
        .row_reverse {
            flex-direction: row-reverse;
        }
        .column {
            flex-direction: column;
        }
        .column_reverse {
            flex-direction: column-reverse;
            position: absolute;
            top: 120px;
            left: 400px;
        }
        .row div, .row_reverse div, .column div, .column_reverse div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="main">
    <div class="row">
        <div>row-A</div><div>row-B</div><div>row-C</div><div>row-D</div><div>row-E</div>
    </div>
    <div class="row_reverse">
        <div>row_reverse-A</div><div>row_reverse-B</div><div>row_reverse-C</div><div>row_reverse-D</div><div>row_reverse-E</div>
    </div>
    <div class="column">
        <div>column-A</div><div>column-B</div><div>column-C</div><div>column-D</div><div>column-E</div>
    </div>
    <div class="column_reverse">
        <div>column_reverse-A</div><div>column_reverse-B</div><div>column_reverse-C</div><div>column_reverse-D</div><div>column_reverse-E</div>
    </div>
</div>
</body>
</html>

网页效果如下：

flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行

值 描述
nowrap 默认值，表示项目不会换行
wrap 表示项目会在需要时换行
wrap-reverse 表示项目会在需要时换行，但会以相反的顺序
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
    <style>
        #main {
            border: 1px solid #CCC;
            padding: 5px;
        }
        .nowrap, .wrap, .wrap_reverse {
            display: flex;
            flex-direction: row;
            margin-bottom: 15px;
        }
        .nowrap {
            flex-wrap: nowrap;
        }
        .wrap {
            flex-wrap: wrap;
        }
        .wrap_reverse {
            flex-wrap: wrap-reverse;
        }
        .nowrap div, .wrap div, .wrap_reverse div {
            width: 150px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div id="main">
    <div class="nowrap">
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div>
    </div>
    <div class="wrap">
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div>
    </div>
    <div class="wrap_reverse">
        <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div>
    </div>
</div>
</body>
</html>

网页效果如下：

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写,语法：flex-flow: flex-direction flex-wrap;

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-flow</title>
    <style>
        .flex_flow {
            display: flex;
            flex-flow: row-reverse wrap;
        }
        .flex_flow div {
            width: 150px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="flex_flow">
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div>
</div>
</body>
</html>

网页效果：

justify-content

justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式

值 描述
flex-start 默认值，左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔是相等的
space-around 每个项目两侧的间隔相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>justify-content</title>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            margin-top: 10px;
        }
        .flex div {
            width: 60px;
            height: 60px;
            margin-bottom: 5px;
            border: 1px solid black;
        }
        .flex-start {
            background-color: crimson;
            justify-content: flex-start;
        }
        .flex-end {
            background-color: #ffa500;
            justify-content: flex-end;
        }
        .center {
            background-color: coral;
            justify-content: center;
        }
        .space-between {
            background-color: #73AD21;
            justify-content: space-between;
        }
        .space-around  {
            background-color: blue;
            justify-content: space-around;
        }
    </style>
</head>
<body>
<div class="flex flex-start">
    <div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex flex-end">
    <div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex center">
    <div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex space-between">
    <div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="flex space-around">
    <div>A</div><div>B</div><div>C</div><div>D</div>
</div>
</body>
</html>

网页效果：

align-items

align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式

值 描述
stretch 默认值，项目将被拉伸以适合容器
center 项目位于容器的中央
flex-start 项目位于容器的顶部
flex-end 项目位于容器的底部
baseline 项目与容器的基线对齐
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

align-content

align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式

值 描述
stretch 默认值，将项目拉伸以占据剩余空间
center 项目在容器内居中排布
flex-start 项目在容器的顶部排列
flex-end 项目在容器的底部排列
space-between 多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around 多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承该属性的值

项目属性

可以通过以下三个属性来对弹性布局的子元素进行设置

值 描述
order 用来设置项目在容器中出现的顺序
align-self 允许您为某个项目设置不同于其它项目的对齐方式
flex flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写

order

order 属性用来设置项目在容器中出现的顺序，可以通过具体的数值来定义项目在容器中的位置，属性的语法格式：order: number;

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>order</title>
  <style>
    .flex {
      display: flex;
      flex-flow: row wrap;
      margin-top: 10px;
    }
    .flex div {
      width: 60px;
      height: 60px;
      margin-bottom: 5px;
      border: 1px solid black;
    }
    .flex div:nth-child(1) {
      order: 5;
    }
    .flex div:nth-child(2) {
      order: 3;
    }
    .flex div:nth-child(3) {
      order: 1;
    }
    .flex div:nth-child(4) {
      order: 2;
    }
    .flex div:nth-child(5) {
      order: 4;
    }
  </style>
</head>
<body>
<div class="flex">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
</html>

网页效果：

align-self

align-self 属性允许为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值

值 描述
auto 默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为"stretch"
stretch 项目将被拉伸以适合容器
center 项目位于容器的中央
flex-start 项目位于容器的顶部
flex-end 项目位于容器的底部
baseline 项目与容器的基线对齐
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-self</title>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            align-items: flex-end;
            border: 1px solid #CCC;
            height: 150px;
        }
        .flex div {
            width: 60px;
            height: 60px;
            border: 1px solid black;
        }
        .flex div:nth-child(4) {
            align-self: flex-start;/*项目位于容器的顶部*/
        }
    </style>
</head>
<body>
<div class="flex">
    <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
</html>

网页效果：

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式:flex: flex-grow flex-shrink flex-basis;

值 描述
flex-grow （必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0
flex-shrink （选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1
flex-basis （选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        .flex {
            display: flex;
            flex-flow: row wrap;
            align-items: flex-end;
            border: 1px solid #CCC;
        }
        .flex div {
            width: 60px;
            height: 60px;
            border: 1px solid black;
        }
        .flex div:nth-child(2) {
            flex:0;
        }
        .flex div:nth-child(4) {
            flex:1 1 auto;
        }
    </style>
</head>
<body>
<div class="flex">
    <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
</html>

网页效果：

总结

盒子模型是把网页中的每个元素都看做是一个盒子，是布局中一个很重要的概念，同时弹性布局是为了满足不同屏幕大小和设备类型（手机、电脑、平板...）适配问题。

相关推荐
excel2 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子32 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑35 分钟前
Next.js 教程系列（十九）图像优化：next/image 与高级技巧
前端·next.js
晓得迷路了36 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆42 分钟前
Vue和React中的key：为什么列表渲染必须加这玩意儿？
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清？route和router的区别，看完这篇别再搞混了！
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02vue数据变化但页面不变03全球最强模型Grok4，国内已可免费使用！（附教程）04扣子开源本地部署教程 丨Coze智能体小白喂饭级指南05KGG转MP3工具|非KGM文件|解密音频06sqli-labs 靶场 less-8、9、10 第八关到第十关详解：布尔注入，时间注入07干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！08Coze 开源了，送上保姆级私有化部署方案【建议收藏】09【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致1001-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验