当前位置： 首页 > news >正文

CSS之盒模型

news 2026/1/17 4:36:24

盒模型概念

浏览器盒模型（Box Model）是CSS中的基本概念，它描述了元素在布局过程中如何占据空间。盒模型由内容（content）、内边距（padding）、边框（border）、和外边距（margin）四个部分组成。分为标准盒模型 和 IE盒模型 。

  • 标准盒模型（W3C盒模型）：在这个模型中，元素的总宽度等于左右margin + 左右border + 左右padding + width，总高度等同于上下margin + 上下border + 上下padding + height的和。

    盒宽度=内容宽度（content）+ border + padding + margin

  • IE盒模型：在这个模型中，宽度和高度不仅包括内容的尺寸，还包括内边距和边框。这意味着，元素的实际宽度等于width（内容宽度 + 左右内边距 + 左右边框），高度同理。

    盒宽度=内容宽度（content+border+padding）+ margin

盒模型设置

通过CSS的box-sizing属性，可以在标准盒模型与IE盒模型之间进行切换。
  • content-box（默认值）：应用标准盒模型，元素的宽度和高度只包括内容区域。
  • border-box：应用IE盒模型，元素的宽度和高度还包括内边距和边框。

举个例子

css代码示例

 <body><div class="content-box base-box"></div><div class="border-box base-box"></div></body><style>.base-box {width: 100px;height: 100px;padding: 10px;border: 2px solid red;margin: 5px;}.content-box {box-sizing: content-box;}.border-box {box-sizing: border-box;}</style>

渲染示例

在这里插入图片描述
在这里插入图片描述
设置为content-box时，元素宽度：100 + 10 x 2 + 2 x 2 = 124；设置为100最终是124。

在这里插入图片描述
设置为border-box时，元素宽度：76 + 10 x 2 + 2 x 2 = 100；设置为100就是100。

相关文章：

CSS之盒模型

盒模型概念 浏览器盒模型&#xff08;Box Model&#xff09;是CSS中的基本概念&#xff0c;它描述了元素在布局过程中如何占据空间。盒模型由内容&#xff08;content&#xff09;、内边距&#xff08;padding&#xff09;、边框&#xff08;border&#xff09;、和外边距&…...

编程日记 2024/2/13 13:07:03

博客系统-SpringBoot版本

相比于之前使用Servlet来完成的博客系统&#xff0c;SpringBoot版本的博客系统功能更完善&#xff0c;使用到的技术更接近企业级&#xff0c;快来看看吧~ 目录 1.项目介绍 2.数据库准备 3.实体化类 4.返回格式 5.登录和注册功能 6.登出&#xff08;注销&#xff09;功能…...

编程日记 2024/2/13 13:06:02

详细分析Redis中数值乱码的根本原因以及解决方式

目录 前言1. 问题所示2. 原理分析3. 拓展 前言 对于这方面的相关知识推荐阅读&#xff1a; Redis框架从入门到学精&#xff08;全&#xff09;Java关于RedisTemplate的使用分析 附代码java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09; …...

编程日记 2024/2/13 13:01:58

网络专栏目录

大家好我是苏麟 , 这是网络专栏目录 . 图解网络 资料来源 : 小林coding 小林官方网站 : 小林coding (xiaolincoding.com) 图解网络目录 基础篇 基础篇 TCP/IP网络模型有几层? : TCP/IP网络模型 键入网址到页面显示,期间发生了什么? : 键入网址到页面显示,期间发生了什么 现阶…...

编程日记 2024/2/13 12:59:56

【Python网络编程之Ping命令的实现】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;Python开发技术 &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; Python网络编程之Ping命令的实现 代码见资源&#xff0c;效果图如下一、实验要求二、协议原理2…...

编程日记 2024/2/13 12:57:54

OpenHarmony轻量级驱动开发

OpenHarmony轻量级驱动开发 思维导图: https://download.csdn.net/download/lanlingxueyu/88817155 GPlO（General-purpose input/output）即通用型输入输出 描述 GPlO（General-purpose input/output）即通用型输入输出。通俗地说，GPlO口就是一些引脚可以通过它们输出高低…...

编程日记 2024/2/13 12:55:52

C语言如何输⼊字符数组？

一、问题 在程序中&#xff0c;scanf()函数可以输⼊任意类型的数据&#xff0c;gets()函数只能输⼊字符串等&#xff0c;但是如何更好地输⼊字符数组呢&#xff1f; 二、解答 我们知道如何使⽤格式输⼊函数 scanf()&#xff0c;那么可以使⽤%c 格式符逐个输⼊字符。这样输⼊有…...

编程日记 2024/2/13 12:54:51

人脸追踪案例及机器学习认识

1.人脸追踪机器人初制 用程序控制舵机运动的方法与机械臂项目完全相同。 由于摄像头的安装方式为上下倒转安装&#xff0c;我们在编写程序读取图像时需使用 flip 函数将 图像上下翻转。 现在&#xff0c;只需要使用哈尔特征检测得到人脸在图像中的位置&#xff0c;再指示舵机运…...

编程日记 2024/2/13 12:53:49

鸿蒙开发理论之页面和自定义组件生命周期

1、自定义组件和页面的关系 页面&#xff1a;即应用的UI页面。可以由一个或者多个自定义组件组成&#xff0c;Entry装饰的自定义组件为页面的入口组件&#xff0c;即页面的根节点&#xff0c;一个页面有且仅能有一个Entry。只有被Entry装饰的组件才可以调用页面的生命周期。自…...

编程日记 2024/2/13 12:52:48

docker-compose部署gitlab和jenkins

通过docker-compose部署gitlab和jenkins&#xff0c;方便后续工作 注意&#xff1a; gitlab占用资源较多&#xff0c;最好系统内存在8G以上&#xff0c;CPU4核心以上&#xff0c;否则gitlab有可能报错无法启动。docker版本用最新版本&#xff0c;低版本的docker可能会导致doc…...

编程日记 2024/2/13 12:46:42

Pytorch 复习总结 1

Pytorch 复习总结&#xff0c;仅供笔者使用&#xff0c;参考教材&#xff1a; 《动手学深度学习》 本文主要内容为&#xff1a;Pytorch 张量的常见运算、线性代数、高等数学、概率论。 Pytorch 张量的常见运算、线性代数、高等数学、概率论 部分 见 Pytorch 复习总结 1&…...

编程日记 2024/2/13 12:44:40

谷歌免费开放模糊测试框架OSS-Fuzz（物联网、车联网、供应链安全、C/C++）

目录 模糊测试的智能化和自动化 模糊测试不能代替安全设计原则 AI驱动的漏洞修补...

编程日记 2024/2/13 12:42:38

华为配置内部人员接入WLAN网络示例（802.1X认证）

配置内部人员接入WLAN网络示例&#xff08;802.1X认证&#xff09; 组网图形 图1 配置802.1X认证组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 用户接入WLAN网络&#xff0c;使用802.1X客户端进行认证&#xff0c;输入正确的用户名和密…...

编程日记 2024/2/13 12:39:35

EXCEL中如何调出“数据分析”的菜单

今天发现&#xff0c;原来WPS还是和EXCEL比&#xff0c;还是少了“数据分析”这个日常基本做统计的菜单&#xff0c;只好用EXCEL了&#xff0c;但奇怪发现我的EXCEL中没发现这个菜单&#xff0c;然后查了下&#xff0c;才发现&#xff0c;要用如下的方法打开&#xff1a; 1&…...

编程日记 2024/2/13 12:37:33

基于Qt的人脸识别项目（功能：颜值检测，口罩检测，表情检测，性别检测，年龄预测等）

完整代码链接在文章末尾 效果展示 代码讲解（待更新） qt图片文件上传 #include <QtWidgets> #include <QFileDialog>...

编程日记 2024/2/13 12:34:31

书生谱语-大语言模型测试demo

课程内容简介 通用环境配置 开发机 InterStudio 配置公钥 在本地机器上打开 Power Shell 终端。在终端中&#xff0c;运行以下命令来生成 SSH 密钥对&#xff1a; ssh-keygen -t rsa您将被提示选择密钥文件的保存位置&#xff0c;默认情况下是在 ~/.ssh/ 目录中。按 Enter …...

编程日记 2024/2/13 12:33:30

2024-02-12 Unity 编辑器开发之编辑器拓展3 —— EditorGUI

文章目录 1 GUILayout2 EditorGUI 介绍3 文本、层级、标签、颜色拾取3.1 LabelField3.2 LayerField3.3 TagField3.4 ColorField3.5 代码示例 4 枚举选择、整数选择、按下按钮4.1 EnumPopup / EnumFlagsField4.2 IntPopup4.3 DropdownButton4.4 代码示例 5 对象关联、各类型输入…...

编程日记 2024/2/13 12:32:29

shell脚本编译与解析

文章目录 shell变量全局变量&#xff08;环境变量&#xff09;局部变量设置PATH 环境变量修改变量属性 启动文件环境变量持久化 ./和. 的区别脚本编写判断 和循环命令行参数传入参数循环读取命令行参数获取用户输入 处理选项处理简单选项处理带值选项 重定向显示并且同时输出到…...

编程日记 2024/2/13 12:28:24

第64讲个人中心用户操作菜单实现

静态页面 <!-- 用户操作菜单开始 --><view class"user_menu"><!-- 订单管理开始 --><view class"order_wrap"><view class"order_title">我的订单</view><view class"order_content"><n…...

编程日记 2024/2/13 12:26:21

线性代数的本质——1 向量

向量是线性代数中最为基础的概念。 何为向量&#xff1f; 从物理上看&#xff0c; 向量就是既有大小又有方向的量&#xff0c;只要这两者一定&#xff0c;就可以在空间中随便移动。 从计算机应用的角度看&#xff0c;向量和列表很接近&#xff0c;可以用来描述某对象的几个不同…...

编程日记 2024/2/13 12:22:56

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/1/15 4:23:38

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2026/1/16 23:17:08

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/1/16 17:16:48

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/1/15 8:46:48

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/12/6 22:50:48

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/15 6:08:00

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/15 4:57:49

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/1/14 22:06:21

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/10/19 9:49:56