（一）什么是盒子模型

已于 2022-05-05 16:56:33 修改
阅读量258 收藏
点赞数
分类专栏： 前端基础 文章标签： css
于 2022-05-05 16:16:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47481102/article/details/124591089
版权

1.看透网页布局的本质

网页布局过程：

  1. 先准备好相关的网页元素，网页元素基本都是盒子Box
  2. 利用css设置好盒子样式，然后摆放相应位置
  3. 往盒子里面装内容

网页布局的核心本：就是利用css摆盒子

2.盒子模型（Box Model）组成

所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。

css盒子模型本质上是一个盒子，封装周围的HTML元素，他包括：边框、外边距、内边距和实际内容，如图所示：

倔强的小白菜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 理解盒子模型
09-25
盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！
对div盒子模型使用心得总结
09-22
相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧，本文也有一个理解并附有示例代码，喜欢的朋友可以参考下
css盒子模型图解
09-25
主要介绍了css盒子模型的使用方法,需要的朋友可以参考下
什么是盒模型
qq_41431641的博客
02-23 5140
1.概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。 2.盒模型的组成： （1）content（内容区） （2）padding（填充区） （3）border（边框区） （4）margin（外边界区） 3.盒模型的理解：我们可以将盒模型比喻成一个快递盒子。将所邮寄的物件比喻成为盒模型内的内容，即content（内容区）。整个快递盒子就可以比喻成为盒模型的边框，即bord...
CSS 盒模型 基本术语解释
zhuxuanfang的专栏
08-19 991
specified value:  即作者为具体的属性所设定的值。 computed value: 当为属性设定值时，该值可能是绝对的（它们不是相对其他值而言的，例如”red”,”2px”），也可能是相对的（它们是相对其他值而言的，如”auto”,”2em”,”12%”）。对于绝对值，该值无需再经过计算即为computed value。对于相对值，该值必须经过计算，例如，百分比必须和一个相对
盒子模型 (Box Model)
zhi航的博客
02-23 1170
一、什么是盒子模型？ 说通俗点，它就是用来设计和布局的，是css网页布局的基石，它规定了网页元素如何显示以及元素与元素之间的相互关系。 二、盒模型的组成 一个标准的盒模型由以下四部分组成，如图所示： 1.content--内容 2.padding--内边距（补白、填充） 3.border--边框 4.margin--外边距（边界） 三、用法实现 1、padding p...
什么是盒子模型
热门推荐
yang114544的博客
07-29 2万+
1.什么是盒子模型 CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性 首先一个盒模型包含了padding（内边距）margin（外边距）border（边框）内容（content）也就是元素本身的width,height 2.盒模型能够给我们解决什么问题： 盒子模型主要是针对页面布局的时候来使用，他规范了我们页面的所有所有元素的一个布局规范是由外向内进行布局。 盒模型由外向内：margin（外边距）border（边框）
css盒子基础笔记
HXGNMSL的博客
03-03 597
盒子边框（border） 边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。 语法： border : border-width || border-style || border-color 边框属性—设置边框样式（border-style） 边框样式用于定义页面中边框的风格，常用属性值如下： none：没有边框即忽略所有边框的宽度（默认值） ​ solid：边框为单实线(最为...
盒子模型的基本概念
weixin_45746803的博客
11-07 4069
简介 CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义如何显示HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通...
CSS盒子模型是什么
01-19
二、什么是CSS盒子模型？  网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性。这些属性和我们日常生活中盒子的属性是一样一样的。内容就是盒子里面...
什么是盒子模型？
weixin_34110749的博客
03-27 107
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。 转载于:https://www.cnblogs.com/crazycode2/p/1...
CSS盒子模型（Box Model）
会一点前端、会一点Java、会一点Python
07-15 467
什么是盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin），边框（border），内边距（padding），和实际内容（content）。 模型分类 一、标准盒子模型 width就是concent的宽度，不包括padding margin border的...
【什么是盒模型】标准盒子模型、怪异盒子模型
艾欢欢的博客
12-21 8001
【CSS盒模型】标准盒子模型、怪异盒子模型 什么是盒子模型 CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。网页中所有元素都具备以下四个属性： 内容(content)，也就是元素的 width、height 内边距(padding) 边框(border) 外边距(margin) 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫...
盒子模型的理解
Mr_zdk的博客
09-14 3139
盒子模型 什么是盒子? html中的标签(元素)统统都是一个矩形的平面框, 在立体上, 它由多个平面构成, 这称为盒子模型. 从底层到顶层的立体结构: margin->background-color->background-image->padding->content->border   三大盒子属性: border(边框) padding(内边距)...
CSS之页面布局三大核心
qq_34800986的博客
09-30 1240
文章目录1. CSS 盒子模型1.1 看透网页布局的本质1.2 盒子模型（Box Model）组成1.2.1 边框（border） 1. CSS 盒子模型 页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面 1.1 看透网页布局的本质 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 利用 CSS 设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容 网页布局的核心本质： 就是利用 CSS 摆盒子 1.2 盒子模型（Box Mod
CSS基础——1.CSS样式
最新发布
weixin_66370632的博客
04-23 653
CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”，用于描述网页的表现形式（例如网页元素的位置、大小、颜色等。css的主要作用是定义网页的样式 CSS样式 1. 行内样式 行内样式：直接定义在 HTML 标签的 style 属性中
什么是css盒子模型？
05-30
CSS 盒子模型是用于布局 HTML 元素的一种模型，它将每个 HTML 元素视为一个矩形的盒子，由四个部分组成：内容区域(content)、内边距(padding)、边框(border)和外边距(margin)。其中，内容区域包含了元素的实际内容，内边距是内容区域与边框之间的空白区域，边框是包围内容区域和内边距的线框，外边距是边框与相邻元素之间的空白区域。 下图展示了 CSS 盒子模型的各个部分： ``` +----------------------------------------------+ | margin-top | | +----------------+ | | | margin | | | | top | | | | | | | | | | | padding-left | border-top | padding-right | +-------------+ | +------------+ | +-----------+ | | padding | | | border | | | padding | | | left | | | top | | | right | | | | | | | | | | | +-------------+ | +------------+ | +-----------+ | padding-bottom | border-bottom| padding-right | | | | | | margin | | | | bottom | | | +----------------+ | | margin-bottom | +----------------------------------------------+ ``` 在 CSS 中，通过一些属性可以控制盒子模型中的各个部分，例如`width`和`height`属性可以控制内容区域的宽度和高度，`padding`属性可以控制内边距的大小，`border`属性可以控制边框的样式、宽度和颜色，`margin`属性可以控制外边距的大小。理解 CSS 盒子模型对于掌握网页布局和样式设计非常重要。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值