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

盒子模型

news 来源：原创 2025/5/26 5:55:40

1.1看透网页布局的本质

1.2盒子模型的组成部分

css盒子模型本质是一个盒子，封装周围的html元素，它包括边框外边距内边距和实际内容。

padding：盒子与内容间的距离
margin：盒子与盒子间的距离

1.3border边框

1.border-width 边框粗细

2.boder-style边框样式

代码

效果如图

3.border-color边框颜色

4.边框的复合写法

5.表格细线边框（boder-collapse）

collapse：倒塌，边界倒塌，所以合在一起了

原本都是1像素的边框，如果分开他们就是看起来就是两像素了

6.边框会影响盒子实际大小

如图所示，边框左右两侧都会多出10px

二.内边距

padding属性用于设置内边距，即边框与内容之间的距离。

1.padding各属性

2. padding复合写法

3.padding也会影响盒子大小

盒子的宽度需要加上内白那句还有边框

所以如果要指定盒子大小不变就需要减去边上下左右的内边距

4.padding撑开盒子用于保持边距相同

5.padding不会超出盒子的情况

加上padding之后

可以看到在没有指定宽度的情况下，padding不会撑开盒子大小

指定宽度

可以看到图片此刻已经溢出了，已经超过了屏幕所能容纳的最大宽度了

案例2

如图p的宽度还是div的大小，不会超出它的宽度

三.外边距margin

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

1. 从第一个的视角

2.从第二个的视角

3.margin的复合写法

margin的复合写法与padding一样

4.外边距典型应用

1.块级盒子水平居中

2.行内元素和行内块元素水平居中

再使用之前的技巧：让行高等于盒子宽度，既可以实现水平居中对齐了

1.行内元素水平居中对齐

2.行内块元素水平居中对齐

5.外边距合并问题

1.嵌套元素垂直外边距塌陷

看下面这代码，把两个块级元素嵌套在一起，父级元素的上外边距设置为100px，子级元素设置为50px，为何子块元素没有向下移动50px

如图看布局只有100px

2.解决方案

1.父元素定义上边框

就我猜测啊是两个块级元素的起点重合在一起了，所以margin-top的时候以为是一体的，最终使得只有大的边距起效果，所以可以给父盒子添加外边框，使得可以区分

2.给个内边距

给父亲素一个padding也就把它和儿子隔开了

3.overflow：hidden（最佳）

5.清除内外边距

网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清楚下网页元素的内外边距。

例如谷歌浏览器的外边距都是默认为8的

1.通配符选择器

通配符选择器优先级最低，先拿他把所有边距都给清了

2.案例

我们知道ul初始就有40的内边距

现在来清除它

盒子模型

1.1看透网页布局的本质 1.2盒子模型的组成部分 css盒子模型本质是一个盒子，封装周围的html元素，它包括边框外边距内边距和实际内容。 padding：盒子与内容间的距离margin：盒子与盒子间的距离 1.3border边框 1.border-width 边…...

编程日记 2025/5/26 5:55:40

厚铜PCB如何兼顾质量与成本？供应商设计规范执行的黄金平衡点

厚铜电路板供应商需要遵循一系列设计规范，以确保所提供的电路板符合行业标准和客户要求。以下是一些需要遵循的设计规范： 1. 电路板尺寸和形状：厚铜电路板供应商需要按照客户提供的规格和要求来设计电路板的尺寸和形状。一般来说，…...

编程日记 2025/5/26 5:37:19

Kafka 配置参数性能调优建议

文章目录 1、生产者调优batch.size（重要）linger.mscompression.typeacks（重要）buffer.memorymax.in.flight.requests.per.connection（重要）message.max.bytes（重要） 2、消费者调优fe…...

编程日记 2025/5/26 5:30:57

Java读Excel：解析阿里云easyExcel导入文件的行号

文章目录引言I 解析阿里云easyExcel导入文件的行号声明解析对象的基类判断Excel解析对象类型是否包含继承某个类 isAssignableFromJava 转换list类型并设置下标到元素对象属性II 封装excel 文件读取excel 文件读取用法文件导入上下文III 参数校验工具类校验参数是否合法 (jaka…...

编程日记 2025/5/24 14:44:06

Vuex持续保存数据页面刷新不丢失 vuex-persistedstate

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据状态持久化，但是太麻烦每次都要操作，强烈建议使用插件利用vuex-persistedstate插件. 安装 npm …...

编程日记 2025/4/29 7:03:58

.NET8配置组件

一、组件的概念含义：用于从配置文件中读取配置的组件，叫做配置组件。简单来说，就是从xml、json、yaml、txt等文件中读取配置的组件。主要采用微软提供的 Microsoft.Extensions.Configuration 二、组件的使用 1、json配置读取 (1)、在Dunk.Common.Project.Configuratio…...

编程日记 2025/5/25 2:17:53

加密算法:ed25519和RSA

ed25519 和 RSA 是两种不同的非对称加密算法，常用于 SSH 密钥认证。以下是它们的对比和选择建议： 1. 算法对比特性ed25519RSA (4096-bit)安全性更高（基于椭圆曲线密码学 ECC）高（依赖大数分解难度）密钥长度固定 256 位（公钥/私钥更短）通常 2048/4096 位（公钥较大）性能…...

编程日记 2025/5/24 18:32:10

递归、搜索和回溯算法《递归》

在之前的优选算法当中我们已经学习了一些基本的算法，那么接下来我们就要来学习算法当中的一大重要章节——递归、搜索和回溯算法，其实也就是大家常常听到的dfs、bfs；其实本质就是递归，在学习搜索、回溯等算法的过程当中我们会先来…...

编程日记 2025/4/29 7:02:51

构建“云中”高并发：12306技术改造的系统性启示

作为曾参与12306余票查询系统高并发升级的技术从业者，笔者注意到公众对于12306底层技术常存在认知盲区。为破解这一迷思，特此分享十年前的架构解密文献（该技术之前名叫 gemfire 现已晋升为Apache顶级项目Geode，代码库详见&#xf…...

编程日记 2025/5/26 5:15:02

升级xcode15 报错Error (Xcode): Cycle inside Runner

升级xcode15后报错 Could not build the precompiled application for the device. Error (Xcode): Cycle inside Runner; building could produce unreliable results. This usually can be resolved by moving the shell script phase Thin Binary so that it runs before th…...

编程日记 2025/5/24 16:02:21

gradle-tasks.register(‘classesJar‘, Jar)解析

在使用gradle作为构建工具的android或者java web项目中，我们经常能遇到以下格式 tasks.register(classesJar, Jar) {from "$buildDir/intermediates/javac/release/classes" // 假设使用 release 构建变体 }artifact sourcesJar使用伪代码解释 class Cu…...

编程日记 2025/4/29 7:01:47

深度对比：Objective-C与Swift的RunTime机制与底层原理

1. RunTime简介 RunTime（运行时）是指程序在运行过程中动态管理类型、对象、方法等的机制。Objective-C 和 Swift 都拥有自己的运行时系统，但设计理念和实现方式有很大不同。理解 RunTime 的底层原理，是掌握 iOS 高级开发的关键。…...

编程日记 2025/4/29 7:01:47

升级Xcode16，flutter项目报错

升级xcode16后发现原来的项目运行不了了，flutter的版本是3.3.1 保错：[ 304 ms] Could not build the precompiled application for the device. [ 16 ms] Error (Xcode): linker command failed with exit code 1 (use -v to see invocation) 1、找到本地…...

编程日记 2025/5/26 5:15:02

MCU内存映射技术详解

MCU内存映射技术详解 1. 引言内存映射是微控制器(MCU)系统设计中的核心概念，它决定了MCU如何访问和管理内存资源。通过内存映射，处理器可以将物理设备的地址空间映射到自己的逻辑地址空间中，实现对各种硬件资源的统一访问。本文将深入探讨…...

编程日记 2025/5/26 5:46:37

Mac搭建Flutter IOS环境详细指南

目录 1. 准备工作 2. 下载Flutter SDK： 2.1 配置环境 2.2 解决环境报错 zsh:command not found:flutter 2.3、再使用source命令重新加载一下：【source ~/.zshrc】,下次再编辑这个文件就可以直接执行：【open ~/.zshrc】 2.4、执行【flut…...

编程日记 2025/5/26 5:38:48

计算机基础—（九道题）

1. 流程控制题编写一个程序，输入一个整数，判断它是否是素数（质数）。如果是素数，输出Yes，否则输出No。 #include <stdio.h> int main() /* 1. 流程控制题编写一个程序，输入一个整数&…...

编程日记 2025/5/26 5:10:26

蓝桥杯2025年第十六届省赛真题-可分解的正整数

其实只有1不符合要求，因为-1010，作为对称结构，任何数都可以改成加法，比如4-3-2-101234，但因为最小连续的数为3,1恰好在里面，所以1不行。 #include<bits/stdc.h> using namespace std; #define int l…...

编程日记 2025/4/29 7:00:39

Linux虚拟机无法重启网络

这是为什么啊？试了很多种方法都还是失败。这是本机vmware8的网络配置这是linux虚拟机的nat配置这是虚拟机里静态配置的网络有没有可以答疑解惑一下的？...

编程日记 2025/5/26 5:08:40

8.Android（通过Manifest配置文件传递数据（meta-data））

配置文件 <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"><applicationandroid:allowBackup"tr…...

编程日记 2025/4/29 7:00:37

17：00开始面试，17：08就出来了，问的问题有点变态。。。

从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到4月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%…...

编程日记 2025/4/29 7:00:37

Docker 常用命令（涵盖多个方面）

Docker 命令完整列表（表格形式） 类别命令描述示例 Docker 服务管理 sudo systemctl start docker 启动 Docker 守护进程 sudo systemctl start docker sudo systemctl stop docker 停止 Docker 守护进程，需先停止所有容…...

编程日记 2025/5/26 5:44:49

前缀树（Trie）（字典树）

做leetcode的时候看到前缀树，听都没听过，后来才知道前缀树就是字典树。之前学过，在OJ项目中用字典树来实现黑白名单限制。浅浅复习一下吧用字典树来实现黑白名单限制实现步骤 （1）定义黑名单 import java.util.Arra…...

编程日记 2025/5/26 5:32:24

word插入APA格式的参考文献

word插入APA格式的参考文献并实现交叉引用 1. 直接手写并采用超链接 2. 使用zotero插入参考文献后采用超链接(前提下载zotero和对应的插件) 1. 直接手写 APA格式生成 1. 在需要插入参考文献的地方手写格式，如下。 2. 生成书签名字随便填的，&#x…...

编程日记 2025/4/29 6:59:33

n8n部署docker本地化备份和数据持久化和迁移问题

问题总结： 在一开始的操作中，你遇到的主要问题是 Docker 容器内的文件权限导致了文件无法正确写入和修改，尤其是在复制本地备份文件到容器内时。具体问题表现为： 复制文件后，容器内文件权限错误：你使用 do…...

编程日记 2025/4/29 6:59:32

绘制板块层级图

目录【实验目的】【实验原理】【实验环境】【实验步骤】【实验总结】【实验目的】掌握数据文件读取掌握数据处理的方法实现板块层级图的绘制【实验原理】板块层级图（treemap）是一种基于面积的可视化方式，通过每一个板块&…...

编程日记 2025/4/29 6:58:30

国标云台控制状态

1.基本概念国标联网系统的信息传输、交换、控制方面的都是通过SIP服务器负责通讯得，SIP负责信令流逐级转发。其中最重要的一部分就是和摄像机进行信令交互。像安全注册、实时视音频点播、历史视音频的回放等应用的会话控制采用IETFRFC3261规定的Register、Invite等…...

编程日记 2025/4/29 6:58:28

PostgreSQL与MySQL哪个适合做时空数据分析？

PostgreSQL与MySQL的定位与区别定位差异：功能导向与性能优先 PostgreSQL和MySQL作为两大主流开源数据库，其核心设计理念和适用场景存在显著差异。PostgreSQL定位为对象-关系型数据库（ORDBMS） ，强调功能完备性与标准…...

编程日记 2025/4/29 6:58:27

uniapp利用生命周期函数实现后台常驻示例

在 Uniapp 中，利用生命周期函数实现“后台常驻”主要是通过监听应用的前后台状态变化（ onHide 和 onShow ），并结合定时器、后台任务或状态保持逻辑来实现。但需注意： 纯前端 JS 代码无法突破系统对后台应用的限制&am…...

编程日记 2025/4/29 6:57:26

JAVA设计模式——（八）单例模式

JAVA设计模式——（八）单例模式介绍理解实现饿汉式懒汉式应用介绍确保一个类只存在一个实例。理解就是一个实例，new出来的一个，很简单。不过单例模式分为了懒汉式和饿汉式，其中也有线程安全的实现方式和线程不…...

编程日记 2025/4/29 6:57:26

【亚马逊云】AWS Wavelength 从理论讲解到实验演练

一、什么是 AWS Wavelength？ Wavelength——一种新型的 AWS 基础设施，旨在运行需要低延迟或边缘弹性的工作负载。 AWS Wavelength 将按需计算和存储服务引入通信服务提供商网络，使客户能够构建和部署满足其数据驻留、低延迟和弹性要求的应用…...

编程日记 2025/4/29 6:57:24

Uniapp：vite.config.js全局配置

目录一、基本概述二、配置自动引入插件一、基本概述 vite.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 vite 的编译选项二、配置自动引入插件在项目命令行终端中执行如下代码 npm install unplugin-auto-import…...

编程日记 2025/4/29 6:57:23

Springboot整合阿里云腾讯云发送短信验证码可随时切换短信运营商

本文描述了在springboot项目中整合实现对接阿里云和腾讯云的短信验证码发送，可通过更改配置文件达到切换短信发送运营商(申请签名、短信模版这些本文不在叙述)。首先看下大体结构： 一、需要导入的jar <dependency><groupId>com.…...

编程日记 2025/4/29 6:56:19

git 查看用户信息

在 Git 中查看用户信息是一项常见的任务，可以帮助你确认当前仓库的配置或全局的 Git 配置是否正确设置。你可以通过多种方式来查看这些信息。查看全局用户信息全局用户信息是应用于所有 Git 仓库的默认设置。要查看全局用户信息，可以使用以下命令&am…...

编程日记 2025/4/29 6:56:19

JAVA基础：Collections 工具类实战指南-从排序到线程安全

在 Java 开发中，集合类几乎贯穿每一个项目，而Collections工具类提供了一系列强大的方法，用于操作和增强集合的功能。无论是排序、查找还是线程安全的封装，Collections工具类都是提升代码效率和质量的重要工具。一、Collections …...

编程日记 2025/4/29 6:56:18

【计算机视觉】TorchVision 深度解析：从核心功能到实战应用 ——PyTorch 官方计算机视觉库的全面指南

TorchVision 深度解析：从核心功能到实战应用 ——PyTorch 官方计算机视觉库的全面指南 1. TorchVision 项目概览核心模块 2. 实战案例：10 大应用场景详解案例 1：使用预训练 ResNet 进行图像分类代码实现常见问题相关论文案例 2：加…...

编程日记 2025/4/29 6:55:17

case和字符串操作

使用if选择结构 if [];then elif [];then #注意这个地方,java是else if else ; fi 使用for循环结构使用for循环，语法结构如下所示： for 变量名 in 值1 值2 值3 #值的数量决定循环任务的次数 do命令序列 done#循环输出1到10 for i in {1..10} #注…...

编程日记 2025/4/29 6:55:15

Golang｜外观模式和具体逻辑

最终返回的是Document的切片，然后取得Bytes自己再去做反序列化拿到文档的各种详细信息。外观模式是一种结构型设计模式，它的目的是为复杂的子系统提供一个统一的高层接口，让外部调用者（客户端）可以更简单地使用子系统…...

编程日记 2025/4/29 6:55:15

关于kafka

1.为什么需要消息队列举个经典的例子。你是一个网购达人，经常在网上购物。快递小哥到了你的小区后，立刻给你打电话说：“你的快递到了，请马上来取。” 但你是一个合格的牛马，在上班，不方便取快递&#…...

编程日记 2025/4/29 6:55:13

OpenCV 图形API（67）图像与通道拼接函数-----水平拼接（横向连接）两个输入矩阵（GMat 类型）函数concatHor()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述该函数用于水平拼接两个 GMat 矩阵，要求输入矩阵的行数必须一致: GMat A { 1, 4,2, 5,3, 6 }; GMat B { 7, 10,8, 11,9, 12 }; GM…...

编程日记 2025/4/29 6:54:11

夜莺 v8.0.0-beta.10 部署

夜莺 v8.0.0-beta.10 部署 1. mariadb-server2. Redis安装3. 下载 n9e-v8.0.0-beta.10-linux-amd64.tar.gz设置 root 用户密码配置文件配置mariadb的登录密码导入数据库表结构配置为 systemd 启动服务重新加载 systemd配置日志访问夜莺VictoriaMetrics 时序数据库安装接入数据…...

编程日记 2025/4/29 6:54:10

HTML5好看的水果蔬菜在线商城网站源码系列模板7

文章目录 1.设计来源1.1 主界面1.2 关于我们界面1.3 商城界面1.4 商品信息界面1.5 我的账户界面1.6 联系我们界面 2.效果和源码2.1 动态效果2.2 源代码源码下载万套模板，程序开发，在线开发，在线沟通作者：xcLeigh 文章地址&#…...

编程日记 2025/4/29 6:54:10

优化问题中变量分类与作用分析

优化问题中的变量分类与作用在优化问题中，变量的定义和作用因问题类型和建模需求而异。以下从决策变量、控制变量的区别与联系出发，结合其他相关变量进行系统分析： 1. 决策变量（Decision Variables） 定义&#xff1a…...

编程日记 2025/4/29 6:54:08

RSS‘25｜CMU提出统一空中操作框架：以末端执行器为中心，无人机实现高精度遥操作

导读在科技飞速发展的当下，机器人技术不断拓展其应用边界，空中操作领域成为了研究的热点之一。无人空中操纵器（UAMs）凭借其在高空复杂任务中的巨大潜力，正逐渐改变着诸如高空设备维护、桥梁检测等传统行业的作业模式&a…...

编程日记 2025/4/29 6:54:07

智能指针之设计模式6

本系列文章探讨了智能指针和设计模式的关系，前面五篇文章介绍的是使用设计模式实现了智能指针的相关特性，比如使用工厂模式控制了智能指针对象的创建，使用代理模式控制了资源对象的销毁。本文介绍一下使用智能指针来帮助我们实现相关的设计模…...

编程日记 2025/4/29 6:54:06

【设计模式】GOF概括

一、创建型模式（5种） 1. 单例模式 (Singleton) 适用场景：全局唯一实例（如配置管理、日志工具）。C示例：// 所谓的scott mayer单例模式 class Singleton { public:static Singleton& getInstance() {st…...

编程日记 2025/4/29 6:54:05

深入浅出限流算法（三）：追求极致精确的滑动日志

在限流的世界里，精度往往是关键。我们已经讨论过固定窗口（简单但有突刺）和滑动窗口（更平滑但仍有格子边界）。如果我们需要更精确的控制，滑动日志 (Sliding Log) 算法便登场了。核心思想：记录每…...

编程日记 2025/4/29 6:53:04

一文读懂Tomcat应用之 CentOS安装部署Tomcat服务

目录一、Tomcat概述 (一)、Tomcat安装目录简介 (二)、Tomcat配置文件简介 1、server.xml文件 2、web.xml 3、context.xml 4、tomcat-users.xml 5、logging.properties 二、Tomcat安装部署 (一)、环境规划 (二)、安装JDK 1、下载JDK二进制安装包 2、解压JDK二进制…...

编程日记 2025/4/29 6:53:03

JVM 内存分配策略

引言在 Java 虚拟机（JVM）中，内存分配与垃圾回收是影响程序性能的核心机制。内存分配的高效性直接决定了对象创建的速率，而垃圾回收策略则决定了内存的利用率以及系统的稳定性。为了在复杂多变的应用场景中实现高效的内存管理&am…...