CSS盒子模型

最新推荐文章于 2025-06-11 17:24:20 发布
最新推荐文章于 2025-06-11 17:24:20 发布
阅读量116 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/coderlhj666/article/details/124980605
版权
本文详细介绍了CSS盒子模型的概念，包括内容、内边距、边框和外边距等组成部分，并展示了如何通过具体属性来设置这些部分。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

盒子模型

一、认识盒子

  • 其实盒子在我们生活中随处可见
  • 在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 由上面这个图可以看出一个盒子由内容的宽(width)高(height)、内边距(padding)、边框(border)、外边距(margin)组成

二、HTML的每一个元素都是一个盒子

  • 其实，我们可以把html的每一个元素都可以看成是一个盒子
  • 在这里插入图片描述

三、盒子模型(Box Model)

  • HTML的每一个元素都可以看作是一个盒子，可以具备以下4个属性
  • 内容（content）
    • 元素内容的width/height
  • 内边距（padding）
    • 元素内容与元素之间空隙
  • 边框（border）
    • 元素自己的边框
  • 外边距（margin）
    • 元素与元素之间的距离

在这里插入图片描述

四、盒子模型的四边

  • 因为盒子有四边，所以padding/border/margin都有left、right、top、bottom四个边
  • 在这里插入图片描述

五、在浏览器的开发工具中

在这里插入图片描述

六、内容-宽度和高度

  • 设置内容是通过宽度和高度设置的：

    • 宽度设置：width
    • 高度设置：height

  • 注意：对应行内非替换元素来说，设置宽度高度无效

  • 另外我们还可以设置如下属性:

    • min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
    • max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
    • 移动端适配时, 可以设置最大宽度和最小宽度;
  • <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: red;
      max-width: 750px;
      min-width: 500px;
      margin: 0 auto;
    }
  </style>
</head>

<body>

  <div class="box">
    我是box元素
  </div>

</body>

</html>

  • 在这里插入图片描述

  • 下面两个属性不常用:

    • min-height：最小高度，无论内容多少，高度都大于或等于min-height
    • max-height：最大高度，无论内容多少，高度都小于或等于max-height

  • 在这里插入图片描述

  • 其实元素宽度的初始值默认是auto（由上图看出）

七、内边距 - padding

  • padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距

  • padding包括四个方向, 所以有如下的取值:

    • padding-top：上内边距
    • padding-right：右内边距
    • padding-bottom：下内边距
    • padding-left：左内边距

  • 在这里插入图片描述

  • <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      border: 1px solid #000;
      display: inline-block;
      /* padding的四个值 */
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px;
    }
  </style>
</head>

<body>
  <div class="box">我是box</div>
</body>

</html>

  • padding单独编写是一个缩写属性：

    • padding-top、padding-right、padding-bottom、padding-left的简写属性
    • padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;

  • padding并非必须是四个值, 也可以有其他值;

    • 在这里插入图片描述

    • <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      border: 1px solid #000;
      display: inline-block;
      /* padding的四个值 */
      /* padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px; */

      /* padding三个值 : 省略的left，使用right值*/
      /* padding: 10px 20px 30px; */
       /* padding二个值 : 省略的left，使用right值，省略bottom，使用top值*/
       /* padding: 10px 20px 30px; */
       /* padding一个值 : 四边都是相同值*/
       padding: 10px;
    }
  </style>
</head>

<body>
  <div class="box">我是box</div>
</body>

</html>

    • 在这里插入图片描述

八、边框-border

  • border用于设置盒子的边框

    • 在这里插入图片描述

  • 边框相对于content/padding/margin来说比较特殊一点

    • 边框有宽度：width
    • 边框有样式：style
    • 边框有颜色：color

  • 设置边框的方式

    • 边框宽度

      • border-top-width 、border-right-width、border-bottom-width、border-left-width
      • border-width是上面4个值的简写

    • 边框样式

      • border-top-style、border-right-style、border-bottom-style、border-left-style
      • border-style是上面4个值的简写

    • 边框颜色

      • border-top-color、border-right-color、border-bottom-color、border-left-color
      • border-color是上面4个值的简写
    • <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      /* width */
      /* border-top-width: 10px;
      border-right-width: 20px;
      border-bottom-width: 30px;
      border-left-width: 40px; */
      border-width: 10px 20px 30px 40px;

      /* style */
      /* border-top-style: solid;
      border-right-style: dashed;
      border-bottom-style: double;
      border-left-style: groove; */
      border-style: solid dashed double groove;


      /* color */
      /* border-top-color: red;
      border-right-color: blue;
      border-bottom-color: beige;
      border-left-color: coral; */

      border-color: red blue beige coral;


      width: 300px;
      height: 300px;

    }
  </style>
</head>

<body>

  <div class="box">

  </div>

</body>

</html>

    • 效果如下图所示

    • 在这里插入图片描述

  • 边框的样式设置值

    • 边框样式有很多，我们阔以了解以下几个
      • groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
      • ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来
      • 在这里插入图片描述

  • 同时设置的方式

    • border-width
    • border-style
    • border-color
    • border: 统一设置4个方向的边框

  • 样式、颜色、宽度书写顺序随意

    • MDN上的书写规则：

      • 在这里插入图片描述

      • 注意：如果边框的样式未定义，它将不可见。 这是因为样式默认为none。

九、外边距-margin

  • margin属性用于设置盒子的外边距，通常用于设置元素与元素之间的距离

    • margin包括四个方向，可以取以下四个值：

      • margin-top: 上外边距
      • margin-right：右外边距
      • margin-bottom：下外边距
      • margin-left：左外边距
    • <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      height: 100px;
      background-color: royalblue;
    }

    .content {
      height: 100px;
      background-color: red;
      margin-top: 30px;
    }
  </style>
</head>

<body>

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

</body>

</html>

    • 在这里插入图片描述

    • margin单独编写是一个缩写属性

      • margin-top、margin-right、margin-bottom、margin-left的简写

      • margin缩写属性是从零点开始，按顺时针方向，即上右下左

      • 在这里插入图片描述

      • <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: royalblue;

      /* margin-bottom: 30px; */
      margin: 0 10px;
    }

    .content {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: red;
      /* margin-top: 30px; */
      margin: 0 10px;
    }
  </style>
</head>

<body>

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

</body>

</html>

      • margin也并非四个值，也可以有其他的

    • margin的其他值

      • 在这里插入图片描述

    • MDN语法格式:

      • 在这里插入图片描述
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
css盒子模型
08-22
CSS盒子模型是网页布局的基础，它是CSS（Cascading Style Sheets）中用于描述网页元素在屏幕上占用空间的方式。深入理解盒子模型对于精确控制网页元素的布局至关重要。在本实战中，我们将探讨盒子模型的各个组成部分...
CSS盒子模型详解
m0_70296476的博客
02-07 1576
目录一、盒子模型的组成部分二、盒子模型的属性设置三、盒子模型的用法示例四、盒子模型的圆角边框1. 语法：2. 示例：（1）统一设置所有角的半径（2）分别设置每个角的半径（3）椭圆形边框（4）圆形边框3. 注意事项五、盒子模型的阴影1. 语法2. 示例（1）基本外阴影（2）内阴影（3）多重阴影（4）悬停效果CSS盒子模型是网页设计和布局的核心概念之一。每个HTML元素都被视为一个矩形盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个主要部分组成。
CSS 盒子模型
m0_52861684的博客
08-28 1719
CSS 盒子模型总结。
深入理解 CSS 盒子模型
My_wife_QBL的博客
07-08 958
CSS 盒子模型是网页布局的核心概念，理解盒子模型的各个组成部分及其计算方式，对于进行精确的网页布局至关重要。通过设置widthheightpaddingborder和margin属性，可以控制元素的尺寸和位置。使用box-sizing属性可以选择不同的盒子模型，简化布局计算。在实际开发中，可能会遇到一些常见问题，如外边距重叠、盒子模型的兼容性问题和元素尺寸超出预期。通过合理使用 CSS 属性和技巧，可以有效解决这些问题，创建出美观、高效的网页布局。
理解CSS盒子模型及其应用
WXLink的博客
09-10 2367
在CSS中，盒子模型可以被理解为每一个HTML元素都被看作一个方形的盒子。内容区（Content）：盒子的实际内容区域，可以是文字、图片或其他任何HTML元素。内边距（Padding）：内容区与边框之间的空间。内边距是透明的，会影响到盒子的整体大小。边框（Border）：围绕内容区和内边距的可视边界。边框的宽度和样式可以根据设计需求来调整。外边距（Margin）：边框外部的空间，用于盒子与其他盒子之间的距离。理解CSS盒子模型是成为前端开发者的基石之一。
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
css | class中 ‘.‘ 和 ‘:‘ 的使用 | 如，何时用 &.is-selected{ ... } 何时用 &:hover{...}？
weixin_42479421的博客
06-08 539
hover是临时状态是持久状态（通过 JS/class 控制）两者经常配合使用：先 hover 提示，点击后选中变样式。
Fullstack 面试复习笔记：HTML / CSS 基础梳理
GoldenaArcher的博客
06-07 1119
本来是想把H5C3JS的东西放一起整理的，然后看了下有点长……毕竟主自用，还是先拆开来方便自己复习了。
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | FAQ Collapse（问题解答折叠面板）
sunbyte带你学
06-11 729
摘要：使用 Vue 3 Composition API 和 TailwindCSS 构建了一个带动画效果的 FAQ 折叠面板组件。主要特点包括： 通过 v-for 动态渲染多个问答项 点击切换功能实现展开/收起状态切换 采用 Vue 的 <Transition> 组件实现平滑动画效果 完全使用 TailwindCSS 进行样式设计 包含 4 个预设的常见问题示例 技术栈：Vue 3 + <script setup> 语法 + TailwindCSS 项目地址：GitHub仓库及在线演示链接已提供
盒模型小全
最新发布
2202_75695913的博客
06-11 551
CSS盒子模型是网页布局的核心概念，分为内容区、内边距、边框和外边距四部分。标准盒子模型(content-box)的宽度仅包含内容，而IE怪异盒子模型(border-box)的宽度包含内容、内边距和边框。通过box-sizing属性可切换两种模式，border-box模式更便于精确布局控制。正确理解盒子模型差异对实现页面排版至关重要，使用border-box能简化复杂布局的设计过程。
vue项目引入tailwindcss
发渐稀的博客
06-06 1141
不同于 Bootstrap 或 Material UI，Tailwind。
Web前端基础:HTML-CSS
孤独又灿烂的神
06-06 1287
超链接 a 标签： 标签： 属性：:设置文本内容的颜色1.最为常见的三类选择器的写法? :标签名{…} :.class属性值{…} :#id属性值{…} 2.:id选择器->类选择器->元素选择器 选择器 写法 示例 示例说明 元素选择器 元素名称 {…} h1 {…} 选择页面上所有的标签 类选择器 .class属性值 {…} .cls {…} 选择页面上所有class属性为cls的标签 id选择器 #id属性值 {…} #hid {…} 选择页面上id属性为hid的标签 分组
零基础学前端-传统前端开发（第三期-CSS介绍与应用）
2404_89737060的博客
06-11 1290
最适合新手的CSS3教程
【CSS-10】深入理解CSS背景样式：从基础到高级技巧
weixin_39033358的博客
06-11 326
本文全面介绍了CSS背景样式的应用技巧，涵盖基础属性（如背景色、图像、重复方式等）和高级特性（如混合模式、多背景层等）。重点讲解了background简写语法、实用技巧（全屏背景、渐变纹理、视差效果）以及性能优化建议。文章提供了丰富的代码示例，帮助开发者掌握如何创建各种视觉效果，同时提醒注意浏览器兼容性和最佳实践，如图像优化、打印样式适配和渐进增强策略。150字
css 盒子模型
04-10
CSS盒子模型是网页设计和布局中的核心概念之一。它描述了HTML文档结构化的方式以及如何通过样式控制这些元素的空间分配。 #### 1. 盒子模型的组成部分 每个HTML元素都可以看作是一个矩形盒子，该盒子由以下几个部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值