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

盒子模型的基础

news 2025/12/13 20:51:43

  • 盒子模型

    • 边框（border）

    • border可以设置元素的边框，边框分成三部分，边框的（粗细）边框的样式，边框的颜色

    • <style>div {width: 100px;height: 100px;border-width: 200;border-style: 边框的样式 border-style: solid 实线边框 dashed 虚线边框 dotted 点线边框border-color: 边框颜色}
</style>
<body><div></div>
</body>

    • 边框的简写：没有顺序，一般规定。

    • border-width: 200;
border-style: 边框的样式 
border-color: 边框颜色

    • 简写后：border: 5px solid pink;

    • 可以分别让四个边框各自修改

    • border-top: 大小 边框样式 边框颜色。这是让上边框改变，还有bottom left right

    • border: 1px solid bule;

    • border-top: 1px solid red;//这个最靠近body里面的容器故呈现上边框是红色，其他边其他颜色

    • 当想合并两个方框的边框使其1+1=1则

    • border-collapse:collapse;

    • 测量盒子的大小的时候，不量边框

    • 测量包括边框时需要，width/height剪切边框的宽度

    • 让内容与边框有距离则利用填充的方法

    • padding-left: 200px;//将左边的进行填充
padding-top: 38px;//将上边进行填充

  • 如果固定了和盒子的大小使用padding就会使盒子变大，故当使用padding时要将其与盒子一起相加

  • 当父类有witch/height时，子类无需在定义。定义会超出父类的范围。在子类padding不会超出父类的范围

  • 外边距margin-left: 数值

  • 右外边距margin-right: 数值

  • 上外边距margin-top: 数值

  • 下外边距margin-bottom: 数值

  • 让盒子水平居中

  • 1、盒子必须指定了宽度（width)

  • 2、盒子左右的外边距都设置为auto

  • <style>div {width: 100px;height: 100px;background-color: aqua;margin: 0 auto;//0代表上下外边框为0，auto自动水平对齐}</style><body><div></div>
</body>

  • 以上的方法是让让块级元素水平居中，行内元素或者行内块元素水平居中需要给其父类元素添加text-align: center即可

  • 嵌套块元素垂直外边距的塌陷

  • 由于两个父子关系的块元素，两个都用margin-top: 59px；最终执行的是父类的塌陷

  • 解决方法一、父类定义上边框

  • border: 1px solid transparent；//transparent是全透明

  • 方法二、给父类上内边框

  • padding: 1px ；

  • 方法三、给父类添加overflow.hidden

相关文章：

盒子模型的基础

盒子模型 边框&#xff08;border&#xff09; border可以设置元素的边框&#xff0c;边框分成三部分&#xff0c;边框的&#xff08;粗细&#xff09;边框的样式&#xff0c;边框的颜色 <style>div {width: 100px;height: 100px;border-width: 200;border-style: 边框…...

编程日记 2023/10/9 3:42:12

Go复合类型之数组类型

Go复合类型之数组 文章目录 Go复合类型之数组一、数组(Array)介绍1.1 基本介绍1.2 数组的特点 二、数组的声明与初始化2.1 数组声明2.2 常见的数据类型声明方法2.3 数组的初始化方式一&#xff1a;使用初始值列表初始化数组方法二&#xff1a;根据初始值个数自动推断数组长度方…...

编程日记 2023/10/9 3:41:12

rust闭包

一、闭包是什么 &#xff08;一&#xff09;闭包是什么 我们先来看看javascript中的闭包。 在函数外部无法读取函数内的局部变量。但是我们有时候需要得到函数内的局部变量&#xff0c;那么如何从外部读取局部变量&#xff1f;那就是在函数的内部&#xff0c;再定义一个函数。…...

编程日记 2023/10/9 3:40:11

通过位运算，实现单字段标识多个状态位

可能经常有如下这种需求: 需要一张表,来记录学员课程的通过与否. 课程数量不确定,往往很多,且会有变动,随时可能新增一门课. 这种情况下,在设计表结构时,一门课对应一个字段,就有些不合适, 因为不知道课程的具体数量,也无法应对后期课程的增加. 考虑只用一个状态标志位,利用位运…...

编程日记 2023/10/9 3:39:10

ALSA pcm接口的概念解释

PCM(数字音频)接口 PCM缩写: Pulse Code Modulation脉冲调制编码,我们理解为通过一定连续时间周期产生数字音频并带有音量样本的处理过程. 模拟信号被记录通过模拟到数字转换器,数字值(也就是某个特定时刻的音量值)获得来自ADC可以进一步处理,接下的图片展示的是个sine wavefor…...

编程日记 2023/10/9 3:38:09

logging的基本使用教程

logging的基本使用教程 一、简介&#xff1a; logging模块是Python的标准库&#xff0c;用于记录应用程序运行时的日志信息。使用logging模块可以帮助您在开发过程中调试代码、追踪问题和监控应用程序的运行状况。 二、使用教程 1、logging模块的基本使用方法&#xff1a; …...

编程日记 2023/10/9 3:37:07

ds套dp——考虑位置转移or值域转移：CF1762F

https://www.luogu.com.cn/problem/CF1762F 分析性质&#xff0c;就是我们选的数要么递增&#xff0c;要么递减&#xff08;非严格&#xff09;然后很明细是ds套dp&#xff0c; f i f_i fi​ 表示以 i i i 开头的答案然后考虑如何转移&#xff08;ds套dp难点反而在转移而不是…...

编程日记 2023/10/9 3:36:06

stm32的GPIO寄存器操作以及GPIO外部中断，串口中断

一、学习参考资料 &#xff08;1&#xff09;正点原子的寄存器源码。 &#xff08;2&#xff09;STM32F103最小系统板开发指南-寄存器版本_V1.1&#xff08;正点&#xff09; &#xff08;3&#xff09;STM32F103最小系统板开发指南-库函数版本_V1.1&#xff08;正点&a…...

编程日记 2023/10/9 3:35:05

生成对抗网络入门案例

前言 生成对抗网络&#xff08;Generative Adversarial Networks&#xff0c;简称GANs&#xff09;是一种用于生成新样本的机器学习模型。它由两个主要组件组成&#xff1a;生成器&#xff08;Generator&#xff09;和判别器&#xff08;Discriminator&#xff09;。生成器尝试…...

编程日记 2023/10/9 3:33:02

多头注意力机制

1、什么是多头注意力机制 从多头注意力的结构图中&#xff0c;貌似这个所谓的多个头就是指多组线性变换&#xff0c;但是并不是&#xff0c;只使用了一组线性变换层&#xff0c;即三个变换张量对 Q、K、V 分别进行线性变换&#xff0c;这些变化不会改变原有张量的尺寸&#xf…...

编程日记 2023/10/9 3:29:59

Qt + FFmpeg 搭建 Windows 开发环境

Qt FFmpeg 搭建 Windows 开发环境 Qt FFmpeg 搭建 Windows 开发环境安装 Qt Creator下载 FFmpeg 编译包测试 Qt FFmpeg踩坑解决方法1&#xff1a;换一个 FFmpeg 库解决方法2&#xff1a;把项目改成 64 位 后记 官方博客&#xff1a;https://www.yafeilinux.com/ Qt开源社区…...

编程日记 2023/10/9 3:28:58

[网鼎杯 2020 白虎组]PicDown python反弹shell proc/self目录的信息

[网鼎杯 2020 白虎组]PicDown - 知乎 这里确实完全不会 第一次遇到一个只有文件读取思路的题目 这里也确实说明还是要学学一些其他的东西了 首先打开环境 只存在一个框框 我们通过 目录扫描 抓包 注入 发现没有用 我们测试能不能任意文件读取 ?url../../../../etc/passwd …...

编程日记 2023/10/9 3:27:57

SDL2绘制ffmpeg解析的mp4文件

文章目录 1.FFMPEG利用命令行将mp4转yuv4202.ffmpeg将mp4解析为yuv数据2.1 核心api: 3.SDL2进行yuv绘制到屏幕3.1 核心api 4.完整代码5.效果展示6.SDL2事件响应补充6.1 处理方式-016.2 处理方式-02 本项目采用生产者消费者模型&#xff0c;生产者线程&#xff1a;使用ffmpeg将m…...

编程日记 2023/10/9 3:26:55

决策树C4.5算法的技术深度剖析、实战解读

目录 一、简介决策树&#xff08;Decision Tree&#xff09;例子&#xff1a; 信息熵&#xff08;Information Entropy&#xff09;与信息增益&#xff08;Information Gain&#xff09;例子&#xff1a; 信息增益比&#xff08;Gain Ratio&#xff09;例子&#xff1a; 二、算…...

编程日记 2023/10/9 3:24:53

LLMs Python解释器程序辅助语言模型（PAL）Program-aided language models (PAL)

正如您在本课程早期看到的&#xff0c;LLM执行算术和其他数学运算的能力是有限的。虽然您可以尝试使用链式思维提示来克服这一问题&#xff0c;但它只能帮助您走得更远。即使模型正确地通过了问题的推理&#xff0c;对于较大的数字或复杂的运算&#xff0c;它仍可能在个别数学操…...

编程日记 2023/10/9 3:23:52

【12】c++设计模式——＞单例模式练习（任务队列）

属性&#xff1a; &#xff08;1&#xff09;存储任务的容器&#xff0c;这个容器可以选择使用STL中的队列&#xff08;queue) &#xff08;2&#xff09;互斥锁&#xff0c;多线程访问的时候用于保护任务队列中的数据 方法&#xff1a;主要是对任务队列中的任务进行操作 &…...

编程日记 2023/10/9 3:22:51

Python之函数、模块、包库

函数、模块、包库基础概念和作用 A、函数 减少代码重复 将复杂问题代码分解成简单模块 提高代码可读性 复用老代码 """ 函数 """# 定义一个函数 def my_fuvtion():# 函数执行部分print(这是一个函数)# 定义带有参数的函数 def say_hello(n…...

编程日记 2023/10/9 3:21:49

SQL创建与删除索引

索引创建、删除与使用&#xff1a; 1.1 create方式创建索引&#xff1a;CREATE [UNIQUE – 唯一索引 | FULLTEXT – 全文索引 ] INDEX index_name ON table_name – 不指定唯一或全文时默认普通索引 (column1[(length) [DESC|ASC]] [,column2,…]) – 可以对多列建立组合索引 …...

编程日记 2023/10/9 3:20:48

网络协议--链路层

2.1 引言 从图1-4中可以看出&#xff0c;在TCP/IP协议族中&#xff0c;链路层主要有三个目的&#xff1a; &#xff08;1&#xff09;为IP模块发送和接收IP数据报&#xff1b; &#xff08;2&#xff09;为ARP模块发送ARP请求和接收ARP应答&#xff1b; &#xff08;3&#xf…...

编程日记 2023/10/9 3:18:45

HDLbits: Count clock

目前写过最长的verilog代码&#xff0c;用了将近三个小时&#xff0c;编写12h显示的时钟&#xff0c;改来改去&#xff0c;估计只有我自己看得懂&#xff08;吐血&#xff09; module top_module(input clk,input reset,input ena,output pm,output [7:0] hh,output [7:0] mm,…...

编程日记 2023/10/9 3:17:43

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/12/7 12:18:42

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/12/8 3:35:29

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/12/8 2:32:29

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/12/11 17:03:24

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/12/3 20:44:09

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/12/11 18:01:18

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/12/10 9:46:50

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...

编程新知 2025/10/14 0:47:25