css盒子模型

最新推荐文章于 2025-07-03 11:04:06 发布
原创 最新推荐文章于 2025-07-03 11:04:06 发布 · 166 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

css-盒子模型

一、盒模型简介

1.我们看到的网页其实是布局大大小小的盒子组合而来
2.盒子由以下几部分组成：
（1）内容区（content）
（2）内边距（padding）
（3）边框（border）
（4）外边距（margin）
在这里插入图片描述

二、内容区（content）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;//此处设置的宽度仅为content区的宽度为200px，高度同理
      height: 200px;
    }

  </style>
</head>
<body>
<div class="box">盒子模型</div>

</body>
</html>

三、边框（border）

1.边框会撑开盒子，影响盒子大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{//此时盒子的大小为240px*240px
      width: 200px;
      height: 200px;
      border-width: 20px;
      border-color: red;
      border-style: solid;
      

    }

  </style>
</head>
<body>
<div class="box">盒子模型</div>

</body>
</html>

2.边框属性（不同的浏览器会有不同的默认的boder-width，boder-height）
在这里插入图片描述

在这里插入图片描述
3.表格的细线边框
在这里插入图片描述

四、内边距（padding）

1.盒子的内边距会撑开盒子，影响盒子大小

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      padding: 20px;
      background-color: #00a4ff;
    }
    .inner{
      width: 100%;
      height: 100%;
      background-color: #00b38a;
    }

  </style>
</head>
<body>
<div class="box">//此时盒子大小为260px*260px
  <div class="inner">内容区</div>
</div>

</body>
</html>

在这里插入图片描述

五、外边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
    }
    .inner{
      width: 100%;
      height: 100%;
      background-color: #00b38a;
      margin-top: 20px;

    }

  </style>
</head>
<body>
<div class="box">
  <div class="inner">内容区</div>
</div>

</body>
</html>

在这里插入图片描述

1.外边距不会影响盒子可见框的大小，但会影响盒子实际占有空间的大小
2.注意：元素在页面中是按照自左向右的顺序排列的，所以默认情况下，我们设置左和上外边距会移动元素自身，而设置右和下外边距则会移动其他元素
3.外边距可以使块级元素居中但必须满足以下两个条件：
 （1）盒子的宽度确定
 （2）盒子的左右外边距设为：auto
4.外边距的折叠问题：条件:垂直方向且相邻的盒子
 （1）兄弟元素折叠问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
    }
    .first{
      width: 50px;
      height: 50px;
      background-color: #00b38a;
      margin-bottom: 40px;//两元素外边距不叠加，取二者较大值

    }
    .second {
      width: 50px;
      height: 50px;
      background-color: #1c036c;
      margin-top: 40px;
    }

  </style>
</head>
<body>
<div class="box">
  <div class="first">盒子一</div>
  <div class="second">盒子二</div>
</div>

</body>
</html>

运行结果：
在这里插入图片描述

(2)父子元素：父子元素间相邻外边距，子元素的上外边距会传递给父元素
解决折叠问题前：
在这里插入图片描述

解决折叠问题后：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border: 10px red solid;//解决折叠问题方案一：给父元素加边框
      background-color: #00a4ff;
    }
    .son{
      width: 50px;
      height: 50px;
      background-color: #00b38a;
      margin-top: 40px;

    }

  </style>
</head>
<body>
<div class="box">
  <div class="son">盒子</div>
</div>

</body>
</html>

在这里插入图片描述
解决问题方案：
 （1）给子元素添加margin-top
 （2）给父元素加边框（这两种方法的本质都是把父元素和子元素隔开，但需修改父元素盒子大小）

六、行内元素的盒模型

1.行内元素不支持设置高度和宽度
2.可为行内元素设置padding、margin、border，但这些样式只会在水平方向影响水平方向的盒子，不会影响垂直方向盒子的布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    span{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
      /*display: inline-block;*/
    }
    div{
      width: 50px;
      height: 50px;
      background-color: #00b38a;

    }

  </style>
</head>
<body>
<span>行内元素</span>
<div>块级元素</div>

</body>
</html>

运行结果：
在这里插入图片描述

3.针对行内元素上述的特征，我们可以使用display将行内元素转换为块级元素，进行样式的设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    span{
      width: 200px;
      height: 200px;
      border: 10px red solid;
      background-color: #00a4ff;
      display: inline-block;//display：inline（转换为行内元素）/block（转换为块级元素）/inline-block（行内块元素）
    }
    div{
      width: 50px;
      height: 50px;
      background-color: #00b38a;

    }

  </style>
</head>
<body>
<span>行内元素</span>
<div>块级元素</div>

</body>
</html>

运行结果：
在这里插入图片描述
4.行内块元素：行内块元素具有块级元素的所有特性，同时行内块元素并不独占一行
5.补充：display还可设置元素的隐藏效果

display
table
nonedisplay属性值设为none时，隐藏元素且不占有位置

6.补充visibility属性

visibility
visible元素正常显示在页面
hidden隐藏元素，且占据位置

七、盒子大小

1.box_sizing属性

属性值
content-box设置height、width属性来设置盒子的内容区大小
border-box设置height、width属性来设置盒子的可见框大小

八、轮廓、阴影和圆角

1.outline（轮廓）：用法与border一只，与border不同，设置元素的轮廓不会影响其他盒子的布局
2.box-shadow（阴影）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    div{
      width: 100px;
      height: 100px;
      background-color: #00b38a;
      box-shadow: 10px 10px rgba(255,145,223,.3);//水平偏移 数值大小 阴影颜色及透明度
    }

  </style>
</head>
<body>
<div>块级元素</div>

</body>
</html>

运行结果：
在这里插入图片描述
3.border-radius（圆角）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    div{
      width: 100px;
      height: 100px;
      background-color: #00b38a;
      border-radius: 10px;//设置半径大小
    }

  </style>
</head>
<body>
<div>块级元素</div>

</body>
</html>

运行结果：
在这里插入图片描述

CSS盒模型完全解析：从原理到实战的布局核心技术
读心悦
05-14 1333
内容区（content）：元素实际内容的显示区域，通过width和height定义内边距（padding）：内容区与边框之间的空白区域，透明但继承背景边框（border）：围绕内容区和内边距的线条，由宽度、样式、颜色组成外边距（margin）：元素与相邻元素之间的间隔，完全透明且不影响背景标准化布局基础：所有视觉效果最终都基于盒模型计算响应式设计基石：box-sizing和百分比单位实现跨设备适配复杂效果实现：边框圆角、阴影、多背景等高级特性的底层支撑。
css盒子模型图解
09-25
### CSS盒子模型详解 #### 一、引言 CSS（层叠样式表）是Web设计中不可或缺的一部分，它用于控制HTML文档的布局和外观。在CSS中，元素的布局通过盒子模型来定义，该模型决定了元素如何占用空间以及与其他元素交互...
CSS盒模型详解
weixin_34270865的博客
10-24 161
CSS的盒模型是CSS的基础，同时也是难点，这个问题经常在面试中会被问到，属于经典问题了。很多博客里讲得也很模糊不清，于是，我在这里重新整理一下。 可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型。 盒模型分为IE盒模型和W3C标准盒模型。 IE盒模型和W3C标准盒模型的区别是什么？ 1. W3C 标准盒模型： 属性width,heig...
CSS盒子模型之详解
weixin_30315905的博客
10-12 190
前言： 盒子模型是css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。一、css盒子模型概念 CSS盒子模型又称框模型(Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding...
css 盒子模型详解
在下月亮有何贵干
11-17 779
目录box-sizingcontent-boxborder-box盒子水平方向的布局margin-right会自动调整margin-right设置auto或定值magin-left设置定值设置magin-left为auto同时设置magin-left和magin-right为auto同时设置width、magin-left和magin-right为auto水平布局总结 box-sizing box-sizing就是用于设置div的盒子模型的。 默认为content-box，还有一个常见设置为border-b
CSS 盒子模型详解
最新发布
1加1等于的博客
07-03 1070
本文将从多个方面详细介绍 CSS 盒子模型。
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍...
CSS 盒子模型
12-14
CSS 盒子模型 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际...
css盒子模型详解加示例
09-25
CSS盒子模型是网页布局的基础，它定义了网页元素在页面上的空间占用方式。W3C组织推荐使用这一模型，将每个HTML元素视为一个矩形盒子，盒子由四部分组成：内容区域（content）、内填充（padding）、边框（border）和...
css盒子模型详细讲解
muweichang的博客
04-28 723
盒子模型盒子模型的介绍内容的宽度和高度border 边框方位线形padding：内边距margin：外边距块级元素的对齐 盒子模型的介绍 什么是盒子模型了？ 页面中的每一个标签，都可以看作是一个是一个盒子，通过盒子的视角可以更方便的进行布局 浏览器在渲染网页时，会将网页中的元素看作是一个个矩形区域 在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。 盒子中的区域 一个盒子中主要的属性就5个：width、hei
CSS3之盒子模型详解
qq_42445025的博客
06-30 885
CSS3之盒子模型详解 1、什么是盒子模型？ CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 在CSS中盒模型被分为两种：第 一种 是 W3C的标准模型，另一种 是IE的传统模型（也叫怪异盒模型）。 2、W3C 的标准...
CSS：盒子模型
博客网站 https://async-area.com
12-22 1740
讲解CSS中的盒子模型，五大要素以及拓展属性
全面剖析CSS盒子模型：概念理解、构成元素、布局影响与实战技巧
JINGWHALE
04-03 2119
在CSS进行网页布局与样式设计的过程中，盒子模型（Box Model）扮演着无可替代的角色。这一关键概念是精准掌控页面元素布局与样式的基石。唯有深入理解和熟练运用盒子模型的原理及各项属性，开发者方能自如地塑造页面中各元素的最终形态。
(前端)html与css css 14、父子盒模型
weixin_30500473的博客
07-18 419
父子盒模型 子盒子的整体占位不能超过父盒子的内容区域 父盒子的内容区域宽度≥子盒子width+padding*2+border*2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
CSS盒模型知识（从基础到掌握核心内容只需一篇）
2401_87257836的博客
11-02 1294
本章内容：CSS的定位（文档流，相对定位，绝对定位，固定定位）。
css 盒子模型
04-10
### CSS 盒子模型详解 CSS盒子模型是网页设计和布局中的核心概念之一。它描述了HTML文档结构化的方式以及如何通过样式控制这些元素的空间分配。 #### 1. 盒子模型的组成部分 每个HTML元素都可以看作是一个矩形盒子，该盒子由以下几个部分组成[^1]: - **内容 (Content)**: 这是盒子的主要区域，用于放置文本或其他媒体内容。 - **内边距 (Padding)**: 它位于内容边缘与边框之间的空白区域，用来增加内容周围的可读空间。 - **边框 (Border)**: 边框围绕着内边距和内容，可以设置不同的宽度、颜色和风格来定义边界线。 - **外边距 (Margin)**: 外边距是在边框之外的一片透明区域，用于分隔相邻的盒子并防止它们相互接触。 #### 2. 盒子模型属性 以下是几个重要的盒子模型相关属性及其功能说明： ##### 2.1 `width` 和 `height` 属性 这两个属性分别设定盒子的内容区宽度和高度。需要注意的是，默认情况下，指定的尺寸仅适用于内容区域而不包括 padding, border 或 margin 的值[^2]。 ##### 2.2 `border` 边框属性 可以通过此属性自定义边界的外观，比如粗细、线条样式（实线、虚线等）以及颜色[^3]。 ##### 2.3 `padding` 内边距 用于调整内部填充量，即内容与其周围边框间的距离。它可以单独应用于上、右、下、左各个方向或者统一应用到所有侧面[^1]。 ##### 2.4 `margin` 外边距 负责管理与其他元素之间外部间距的部分。同样支持多向配置，并且当两个垂直 margins 邻近时会发生折叠现象——取两者较大者作为最终间隔[^2]。 ##### 2.5 盒子模型占位计算 总的实际占用面积等于 content area 加上其四周的所有附加层厚度之和。例如给定一个具有固定 width/height 值为100px 的 div 元素加上额外参数如下所示，则实际渲染出来的大小将是 `(100 + 5 + 5 + 20 + 20)` px × `(100 + 5 + 5 + 20 + 20)` px: ```css div { width: 100px; height: 100px; border: 5px solid black; /* 上下左右均为5像素 */ padding: 20px; /* 各侧均设为20像素 */ } ``` #### 3. box-sizing 属性 为了简化复杂布局的设计过程，引入了一个名为 `box-sizing` 的新特性。默认行为遵循传统标准模式 (`content-box`) ，其中声明的 dimensions 不含 paddings/borders；而另一种选项叫做 alternate model(`border-box`) 可让开发者更直观地操作整体尺寸因为此时所指代的就是整个可视范围内的确切数值. ```css /* 使用 border-box 来改变盒模型的行为方式*/ * { box-sizing: border-box; } ``` 以上便是关于CSS盒子模型的一些基本介绍及常见应用场景下的实现方法论探讨。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值