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

CSS之盒模型

news 文章来源：https://blog.csdn.net/dachaoxuexi/article/details/136104022 2024/9/21 16:38:37

盒模型概念

浏览器盒模型（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

工业以太网交换机引领现代工厂自动化新潮流

随着科技的飞速发展&#xff0c;现代工厂正迎来一场前所未有的自动化变革&#xff0c;而工业以太网交换机的崭新角色正是这场变革的关键组成部分。本文将深入探讨工业以太网交换机与现代工厂自动化的紧密集成&#xff0c;探讨这一集成如何推动工业生产的智能化、效率提升以及未…...

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

Linux第46步_通过“添加自定义菜单”来学习menuconfig图形化配置原理

通过“添加自定义菜单”来学习menuconfig图形化配置原理&#xff0c;将来移植linux要用到。 自定义菜单要求如下: ①、在主界面中添加一个名为“My test menu”&#xff0c;此菜单内部有一个配置项。 ②、配置项为“MY TESTCONFIG”&#xff0c;此配置项处于菜单“My test m…...

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

推荐高端资源素材图库下载平台整站源码

推荐高端图库素材下载站的响应式模板和完整的整站源码&#xff0c;适用于娱乐网资源网。该模板支持移动端&#xff0c;并集成了支付宝接口。 演示地 址 &#xff1a; runruncode.com/tupiao/19692.html 页面设计精美&#xff0c;不亚于大型网站的美工水准&#xff0c;并且用户…...

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

Redis实现：每个进程每30秒执行一次任务

前言 项目中要实现每一进程每30秒执行一次 代码实现： public class DistributedScheduler {private final RRedisClient redisson;private final String processKeyPrefix; // 例如 "process_"public DistributedScheduler(RRedisClient redisson) {this.redisson…...

编程日记 2024/2/13 12:17:50

【AI之路】使用RWKV-Runner启动大模型，彻底实现大模型自由

文章目录 前言一、RWKV-Runner是什么&#xff1f;RWKV-Runner是一个大语言模型的启动平台RWKV-Runner官方功能介绍 二、使用步骤1. 下载文件 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; ChatGPT的横空出世&#xff0c;打开了AI的大门&#xff…...

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

Dockerfile和.gitlab-ci.yml文件模板

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2024/2/13 12:12:45

Linux--基础开发工具篇（2）（vim）（配置白名单sudo）

目录 前言 1. vim 1.1vim的基本概念 1.2vim的基本操作 1.3vim命令模式命令集 1.4vim底行命令 1.5 异常问题 1.6 批量注释和批量去注释 1.7解决普通用户无法sudo的问题 1.8简单vim配置 前言 在前面我们学习了yum&#xff0c;也就是Linux系统的应用商店 Linux--基础开…...

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

Learn LaTeX 017 - LaTex Multicolumn 分栏

在科学排版中进行分栏操作&#xff0c;能够有效的利用页面中的空间&#xff0c;避免空白位置的浪费。 好的分栏设计能对你的排版增色不少&#xff01; https://www.ixigua.com/7298100920137548288?id7307237715659981346&logTag949adb699806392430bb...

编程日记 2024/2/13 12:08:41

Android 9.0 禁用adb install 安装app功能

1.前言 在9.0的系统产品定制化开发中，在进行一些定制开发中，对于一些app需要通过属性来控制禁止安装，比如adb install也不允许安装，所以就需要 熟悉adb install的安装流程，然后来禁用adb install安装功能，接下来分析下adb 下的安装流程 2.禁用adb install 安装app功能的…...

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

华为第二批难题五：AI技术提升六面体网格生成自动化问题

有CAE开发商问及OCCT几何内核的网格方面的技术问题。其实&#xff0c;OCCT几何内核的现有网格生成能力比较弱。 HybridOctree_Hex的源代码&#xff0c;还没有仔细去学习。 “HybridOctree_Hex”的开发者说&#xff1a;六面体网格主要是用在数值模拟领域的&#xff0c;比如汽车…...

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

【FFmpeg】ffplay 命令行参数 ⑤ ( 设置音频滤镜 -af 参数 | 设置统计信息 -stats 参数 | 设置同步时钟类型 -sync 参数 )

文章目录 一、ffplay 命令行参数 - 音频滤镜1、设置音频滤镜 -af 参数2、常用的 音频滤镜 参数3、音频滤镜链 示例 二、ffplay 命令行参数 - 统计信息1、设置统计信息 -stats 参数2、关闭统计信息 -nostats 参数 三、ffplay 命令行参数 - 同步时钟类型1、设置同步时钟类型 -syn…...

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

vscode开发FPGA(0)--windows平台搭建

一、从官网下载安装VScode Download Visual Studio Code - Mac, Linux, Windows 二、安装配置插件 1. 安装Chinese&#xff08;simplified&#xff09;中文汉化包 2.安装Verilog-HDL/systemVerilog插件(支持verilog语法) 3.配置CTags Support插件(支持代码跳转) 1)在github下…...

编程日记 2024/2/13 11:56:29

Java String源码剖析+面试题整理

由于字符串操作是计算机程序中最常见的操作之一&#xff0c;在面试中也是经常出现。本文从基本用法出发逐步深入剖析String的结构和性质&#xff0c;并结合面试题来帮助理解。 String基本用法 在Java中String的创建可以直接像基本类型一样定义&#xff0c;也可以new一个 Str…...

编程日记 2024/2/13 11:55:27

探索未来：集成存储器计算(IMC)与深度神经网络(DNN)的机遇与挑战

开篇部分&#xff1a;人工智能、深度神经网络与内存计算的交汇 在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;已经成为科技领域的一股强大力量&#xff0c;而深度神经网络&#xff08;DNN&#xff09;则是AI的核心引擎之一。DNN是一种模仿人类神经系统运作…...

编程日记 2024/2/13 11:52:24

[C/C++] -- CMake使用

CMake&#xff08;Cross-platform Make&#xff09;是一个开源的跨平台构建工具&#xff0c;用于自动生成用于不同操作系统和编译器的构建脚本。它可以简化项目的构建过程&#xff0c;使得开发人员能够更方便地管理代码、依赖项和构建设置。 CMake 使用一个名为 CMakeLists.tx…...

编程日记 2024/2/13 11:47:19

笔记本选购配置参数详解

笔记本电脑的选购是一个技术活&#xff0c;涉及到众多的配置参数。本文将为您详细解析笔记本电脑的主要配置参数&#xff0c;帮助您在选购时做出明智的决策。 1. 处理器&#xff08;CPU&#xff09; 处理器是笔记本电脑的核心组件&#xff0c;负责执行计算任务…...

编程日记 2024/2/13 11:45:17

临睡之际的生死思索与生命哲学的启示

在人类生存体验中&#xff0c;有一种独特而深邃的感受——当人们准备进入梦乡时&#xff0c;会担忧第二天醒来是否还能感知到生命的律动。这种“入睡即未知”的心理状态&#xff0c;既是生命无常的深刻体现&#xff0c;也是对个体生命价值、生活态度及人生哲学的一种深度拷问。…...

编程日记 2024/2/13 11:42:13

QT学习（五）C++函数重载

一、 函数重载 在同一个作用域内&#xff0c;可以声明几个功能类似的同名函数&#xff0c; 这些同名函数的形式参数&#xff08;指参数的个数、类型或者顺序&#xff09;必须不同。您不能仅通过返回类型的不同来 重载函数。 下面的实例中&#xff0c;同名函数 print() 被用…...

编程日记 2024/2/13 11:40:11

微服务OAuth 2.1扩展额外信息到JWT并解析(Spring Security 6)

文章目录 一、简介二、重写UserDetailsService三、Controller解析JWT获取用户信息四、后记 一、简介 VersionJava17SpringCloud2023.0.0SpringBoot3.2.1Spring Authorization Server1.2.1Spring Security6.2.1mysql8.2.0 Spring Authorization Server 使用JWT时&#xff0c;前…...

编程日记 2024/2/13 11:38:09

Python@setter用法介绍

Pythonsetter是Python编程语言中的一个关键属性&#xff0c;它简化了Python开发者的编程过程&#xff0c;提高了编程效率。 一、Pythonsetter是什么 Pythonsetter是Python语言中的一个属性&#xff0c;它允许程序员设置Python中的类成员变量。在Python中&#xff0c;属性&…...

编程日记 2024/2/13 11:34:04

格子表单GRID-FORM | 文档网站搭建（VitePress）与部署（Github Pages）

格子表单/GRID-FORM已在Github 开源&#xff0c;如能帮到您麻烦给个星&#x1f91d; GRID-FORM 系列文章 基于 VUE3 可视化低代码表单设计器嵌套表单与自定义脚本交互文档网站搭建&#xff08;VitePress&#xff09;与部署&#xff08;Github Pages&#xff09; 效果预览 格…...

编程日记 2024/2/13 11:29:59

mac无法往硬盘里存东西 Mac硬盘读不出来怎么办 Mac硬盘格式 硬盘检测工具

mac有时候会出现一些问题&#xff0c;比如无法往硬盘里存东西&#xff0c;或者无法往硬盘上拷贝文件。这些问题会给用户带来很大的困扰&#xff0c;影响正常的工作和学习。那么&#xff0c;mac无法往硬盘里存东西&#xff0c;mac无法往硬盘上拷贝怎么办呢&#xff1f;软妹子将为…...

编程日记 2024/2/13 11:26:56

DataX源码分析 reader

系列文章目录 一、DataX详解和架构介绍 二、DataX源码分析 JobContainer 三、DataX源码分析 TaskGroupContainer 四、DataX源码分析 TaskExecutor 五、DataX源码分析 reader 六、DataX源码分析 writer 七、DataX源码分析 Channel 文章目录 系列文章目录前言Reader组件如何处理…...

编程日记 2024/2/13 11:25:55

openssl3.2 - exp - RAND_bytes_ex

文章目录 openssl3.2 - exp - RAND_bytes_ex概述笔记END openssl3.2 - exp - RAND_bytes_ex 概述 生成随机数时, 要检查返回值是否成功, 不能认为一定是成功的(官方文档上有说明). 生成随机数的API, 和库上下文有关系, 使用RAND_bytes_ex()比RAND_bytes()好些. 笔记 /*! * …...

编程日记 2024/2/13 11:20:09

Oracle中怎么设置时区和系统时间

在Oracle数据库中&#xff0c;设置时区和系统时间可以通过多种方法实现。下面是一些常见的方法&#xff1a; 1. 设置数据库的时区 Oracle数据库允许你为每个会话或整个数据库设置时区。 a. 为整个数据库设置时区 你可以使用ALTER DATABASE语句为整个数据库设置时区。例如&a…...

编程日记 2024/2/13 11:19:07

常见的物联网操作系统介绍

物联网&#xff08;Internet of Things&#xff0c;IoT&#xff09;是指将各种物理设备、车辆、家用电器、工业设备等通过网络连接起来&#xff0c;实现数据交换和通信的技术。物联网操作系统是管理这些设备并使其能够相互通信的软件平台。以下是一些常见的物联网操作系统&…...

编程日记 2024/2/13 11:14:02

二级C语言笔试10

(总分101,考试时间90分钟) 一、选择题 1. 设有如下关系表&#xff1a; A) TR∩S B) TR∪S C) TRS D) TR/S 2. 在一棵二叉树中&#xff0c;叶子结点共有30个&#xff0c;度为1的结点共有40个&#xff0c;则该二叉树中的总结点数共有( )个。 A) 89 …...

编程日记 2024/2/13 11:01:50

【WebSocket】微信小程序原生组件使用SocketTask 调用星火认知大模型

直接上代码 微信开发者工具-调试器-终端-新建终端 进行依赖安装 npm install base-64 npm install crypto-js 然后顶部工具栏依次点击 工具-构建npm // index.js const defaultAvatarUrl https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQ…...

编程日记 2024/2/13 11:00:49

[1-docker-01]centos环境安装docker

官方参考文档 可以在官方docker桌面版本指导文档里找到适合自己的电脑平台进行参考&#xff0c;或者你是老司机的话直接自己上车。 如果不需要桌面版&#xff0c;也可以在官方docker engine版本指导文档里找到适合自己的平台进行参考&#xff0c;同样&#xff0c;老司机可以自…...

编程日记 2024/2/13 10:59:47

深度学习基础之《深度学习介绍》

一、深度学习与机器学习的区别 1、特征提取方面 机器学习&#xff1a;人工特征提取 分类算法 深度学习&#xff1a;没有人工特征提取&#xff0c;直接将特征值传进去 &#xff08;1&#xff09;机器学习的特征工程步骤是要靠手工完成的&#xff0c;而且需要大量领域专业知识…...

编程日记 2024/2/13 10:55:44