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

前端进阶html+css04----盒子模型

news 2026/2/9 12:43:00

1.一个盒子由content（文本内容)，padding,border,margin组成。
在这里插入图片描述
2.盒子的大小指的是盒子的宽度和高度。一般由box-sizing属性来控制。

1）默认情况下, 也就是box-sizing: content-box时，盒子的宽高计算公式如下：

盒子宽 =
height+padding-left+padding-right+border-left+border-right+margin-left+margin-right；
盒子高=
height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom；

2）当box-sizing:border-box时，盒子的宽高计算公式如下：

盒子宽 = width；
盒子高= height；
content-width (文本宽度)=
width-(padding-left)-(padding-right)-(border-left)-(border-right)
content-height(文本高度)=
height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)

<style>.content1{background-color: yellow;width: 100px;height: 100px;margin: 10px;padding: 20px;border: 10px solid red;box-sizing: content-box;}.content2{background-color: yellow;width: 100px;height: 100px;margin: 10px;padding: 20px;border: 10px solid red;box-sizing: border-box;}.content3{background-color: yellow;width: 100px;height: 100px;margin:10px;}
</style>
<body><div class="content1">content-box</div><div class="content2">border-box</div><div class="content3">100px</div> 
</body>

在这里插入图片描述
3)当box-sizing:inherit: 规定应从父元素继承box-sizing属性的值。

相关文章：

前端进阶html+css04----盒子模型

1.一个盒子由content&#xff08;文本内容)&#xff0c;padding,border,margin组成。 2.盒子的大小指的是盒子的宽度和高度。一般由box-sizing属性来控制。 1&#xff09;默认情况下, 也就是box-sizing: content-box时&#xff0c;盒子的宽高计算公式如下&#xff1a; 盒子宽…...

编程日记 2023/8/13 16:18:40

Go Web--Go Module

目录 一、Go Module 1、开启Go Module 2、Go Module基本操作 3、使用GoLand创建Go Module项目 4、GoLand配置File Watchers 一、Go Module Go Module包管理工具----相当于Maven 1.11版本引入 1.12版本正式支持 告别GOPATH&#xff0c;使用Go Module管理项目&#xff0c…...

编程日记 2023/8/13 16:17:38

Spring Boot 统一功能处理（拦截器实现用户登录权限的统一校验、统一异常返回、统一数据格式返回）

目录 1. 用户登录权限校验 1.1 最初用户登录权限效验 1.2 Spring AOP 用户统⼀登录验证 1.3 Spring 拦截器 &#xff08;1&#xff09;创建自定义拦截器 &#xff08;2&#xff09;将自定义拦截器添加到系统配置中&#xff0c;并设置拦截的规则 1.4 练习&#xff1a;登录…...

编程日记 2023/8/13 16:16:37

P4058 [Code+#1] 木材

1&#xff1a;思路&#xff1a;二分月数&#xff0c;然后贪心&#xff0c;就是说要求最小月数&#xff0c;拿每次判断是否到达s长度的时候我们就从大的开始拿。 int l-1,r1e181;while(l1<r){int midlr>>1;if(check(mid))rmid;else lmid;} 2&#xff1a;记得看数据&a…...

编程日记 2023/8/13 16:15:34

Python学习笔记第五十二天（Pandas 安装）

Python学习笔记第五十二天 Pandas 安装查看安装版本 安装验证结束语 Pandas 安装 安装 pandas 需要基础环境是 Python&#xff0c;开始前我们假定你已经安装了 Python 和 Pip。 使用 pip 安装 pandas: pip install pandas安装成功后&#xff0c;我们就可以导入 pandas 包使用…...

编程日记 2023/8/13 16:14:33

分布式搜索ElasticSearch-ES（一）

一、ElasticSearch介绍 ES是一款非常强大的开源搜索引擎&#xff0c;可以帮我们从海量的数据中快速找到我们需要的内容。 ElasticSearch结合kibana、Logstash、Beats&#xff0c;也就是elastic stack(ELK)&#xff0c;被广泛运用在日志数据分析&#xff0c;实时监控等领域。 …...

编程日记 2023/8/13 16:13:32

react学习笔记——3. jsx语法规则

jsx是什么&#xff1f; jsx全称&#xff1a;javaScript XML是react定义的一种类似于XML的js扩展语法&#xff0c;是jsxml。 xml早期用于存储和传输数据&#xff0c;是标签加数据的形式。只不过后来慢慢的变成了json 其本质就是React.createElement(标签,属性,内容)方法的语法糖…...

编程日记 2023/8/13 16:12:30

MySQL分表实现上百万上千万记录分布存储的批量查询设计模式

我们知道可以将一个海量记录的 MySQL 大表根据主键、时间字段&#xff0c;条件字段等分成若干个表甚至保存在若干服务器中。唯一的问题就是跨服务器批量查询麻烦&#xff0c;只能通过应用程序来解决。谈谈在Java中的解决思路。其他语言原理类似。这里说的分表不是 MySQL 5.1 的…...

编程日记 2023/8/13 16:11:29

射频入门知识-1

信号源 示波器 综合测试仪 功率计 噪声测试仪 频谱分析仪 频谱分析仪: 放大器的噪声系数测试 放大器增益测试 噪声和增益是放大器的最关键指标&#xff0c;学学怎么用频谱仪做放大器的噪声测试 那个 hbf740 输入和输出阻抗匹配具体怎么搞 《ADS2011射频电路设计与…...

编程日记 2023/8/13 16:10:28

基于注解函数式编程实现组件解耦设计

随着业务系统的不断发展，系统架构变得越来越复杂，多种业务交叉写在一起，不仅带来了维护层面的困难，而且新人也很难以入手修改代码，业界通常采用组件模块化开发模式，用于降低系统的复杂度，本文主要针对组件化具体实施过程中，组件层面的方法解耦进行了详细讲解。 1前言 …...

编程日记 2023/8/13 16:09:27

并查集、树状数组

并查集、树状数组、线段树 并查集树状数组树状数组1 (单点修改&#xff0c;区间查询)树状数组2 (单点查询&#xff0c;区间修改) 并查集 【模板】并查集 题目描述 如题&#xff0c;现在有一个并查集&#xff0c;你需要完成合并和查询操作。 输入格式 第一行包含两个整数 …...

编程日记 2023/8/13 16:08:26

ES6中Null判断运算符(??)正确打开方式-

读取对象属性的时候&#xff0c;如果某个属性的值是null或者undefined&#xff0c;有时候需要为它们指定默认值。常见的作法是通过||运算符指定默认值。 const headerText response.settings.headerText || Hello, world!; const animationDuration response.settings.anima…...

编程日记 2023/8/13 16:07:23

java的内存模型

Java内存基础 并发编程模型的两个关键问题 线程之间如何通信及线程之间如何同步 线程之间的通信机制有两种&#xff1a;共享内存和消息传递。 在共享内存的并发模型里&#xff0c;线程之间共享程序的公共状态&#xff0c;通过写-读内存中的公共状态 进行隐式通信。在消息传…...

编程日记 2023/8/13 16:06:22

基于 CentOS 7 构建 LVS-DR 群集 配置nginx负载均衡

环境配置&#xff1a; RHCE客户机192.168.100.146node1lvs192.168.100.145node2RS192.168.100.147node3RS192.168.100.148 配置ipvsadm httpd&#xff1a; [rootnode1 ~]# yum install ipvsadm.x86_64 [rootnode2 ~]# yum install http -y [rootnode2 ~]# systemctl …...

编程日记 2023/8/13 16:05:21

CSS练习

CSS练习 工具代码运行结果 工具 HBuilder X 代码 <!DOCTYPE html> <!-- 做一个表格&#xff0c;6行4列实现隔行换色&#xff08;背景色&#xff09;并且第3列文字红色第一个单元格文字大小30px。最后一个单元格文字加粗--> <html><head><meta ch…...

编程日记 2023/8/13 16:04:19

基于深度学习的3D城市模型增强【Mask R-CNN】

在这篇文章中&#xff0c;我们描述了一个为阿姆斯特丹 3D 城市模型自动添加门窗的系统&#xff08;可以在这里访问&#xff09;。 计算机视觉用于从城市全景图像中提取有关门窗位置的信息。 由于这种类型的街道级图像广泛可用&#xff0c;因此该方法可用于较大的地理区域。 推荐…...

编程日记 2023/8/13 16:03:18

LabVIEW对并行机器人结构进行建模仿真

LabVIEW对并行机器人结构进行建模仿真 为了对复杂机器人结构的数学模型进行建模、搜索、动画和验证&#xff0c;在工业机器人动态行为实验室中&#xff0c;设计并实现了具有五个自由度的单臂型机器人。在研究台上可以区分以下元素&#xff1a;带有直流电机和编码器的机器人;稳…...

编程日记 2023/8/13 16:02:17

【算法题】1281. 整数的各位积和之差

题目&#xff1a; 给你一个整数 n&#xff0c;请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例 1&#xff1a; 输入&#xff1a;n 234 输出&#xff1a;15 解释&#xff1a; 各位数之积 2 * 3 * 4 24 各位数之和 2 3 4 9 结果 24 - 9 15 示…...

编程日记 2023/8/13 16:01:16

（一）ES6 介绍

为什么学习ES6 ES6的版本变动内容最多&#xff0c;具有里程碑意义ES加入许多新的语法特性&#xff0c;编程实现更简单、搞笑ES6是前端发展趋势&#xff0c;就业必备技能 什么是ECMA ECMA&#xff08;European Computer Manufacturers Association&#xff09;&#xff0c;中…...

编程日记 2023/8/13 16:00:14

窥孔优化（Peephole Optimization）

窥孔优化&#xff08;Peephole Optimization&#xff09;是编译器中的一个技术&#xff0c;用于优化生成的中间代码或目标代码。该优化方法通过查看代码的小部分&#xff08;或称为“窥孔”&#xff09;来识别并提供更高效的代码替代方案。 1. 基本概念 定义&#xff1a;窥孔优…...

编程日记 2023/8/13 15:59:12

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/8 4:37:41

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2026/1/23 4:56:05

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2026/2/1 4:13:59

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/2/6 2:16:18

探索Selenium：自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

编程新知 2025/11/19 18:06:51

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

编程新知 2026/2/4 16:40:55

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

编程新知 2025/9/10 21:14:06