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

盒子模型的基础

news 2026/3/31 15:19:36

  • 盒子模型

    • 边框（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

如何通过技术优化提升Element Plus开发效率

如何通过技术优化提升Element Plus开发效率 【免费下载链接】element-plus &#x1f389; A Vue.js 3 UI Library made by Element team 项目地址: https://gitcode.com/GitHub_Trending/el/element-plus 在前端开发过程中&#xff0c;Element Plus作为一款基于Vue.js 3…...

编程新知 2026/3/31 14:54:15

原创：光刻机中下游质量约束框架：从底层落地破局芯片制造困局

光刻机中下游质量约束框架&#xff1a;从底层落地破局芯片制造困局 作者&#xff1a;华夏之光永存 摘要 当下国内芯片产业陷入一个普遍误区&#xff1a;将攻克EUV光刻机整机视为破局“卡脖子”的唯一核心&#xff0c;大量资源集中投入上游光刻机研发&#xff0c;却严重忽视中下…...

编程新知 2026/3/31 14:23:40

FastAPI 2.0流式AI接口上线前必须做的4项压力测试：QPS突破1200+的实测阈值与熔断配置清单

第一章&#xff1a;FastAPI 2.0流式AI接口压力测试全景认知FastAPI 2.0 引入了对异步流式响应&#xff08;如 StreamingResponse&#xff09;的深度优化&#xff0c;使大语言模型&#xff08;LLM&#xff09;类接口可原生支持 Server-Sent Events&#xff08;SSE&#xff09;、…...

编程新知 2026/3/31 14:15:21

Blender 3MF插件终极指南：从零开始掌握3D打印文件格式

Blender 3MF插件终极指南&#xff1a;从零开始掌握3D打印文件格式 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 3MF&#xff08;3D Manufacturing Format&#xff09;格…...

编程新知 2026/3/31 10:00:21

手把手教你为OpenBMC (AST2600平台) 正确配置PCA9545 I2C Switch的DTS节点

深入解析AST2600平台PCA9545 I2C Switch设备树配置实战指南 在嵌入式系统开发中&#xff0c;I2C总线扩展是连接多个外设的常见需求。NXP的PCA9545作为一款4通道I2C总线开关芯片&#xff0c;能够有效解决I2C地址冲突问题&#xff0c;但在实际应用中&#xff0c;设备树(DTS)配置…...

编程新知 2026/3/31 9:42:10

YOLOv8鹰眼目标检测问题解决：常见部署错误与使用技巧汇总

YOLOv8鹰眼目标检测问题解决&#xff1a;常见部署错误与使用技巧汇总 1. 引言&#xff1a;为什么选择YOLOv8鹰眼目标检测 YOLOv8作为当前计算机视觉领域最先进的目标检测模型之一&#xff0c;以其卓越的实时性和准确性赢得了广泛认可。鹰眼目标检测镜像基于Ultralytics官方YO…...

编程新知 2026/3/31 9:22:04

3个突破性技术，让抖音无水印视频下载效率提升200%

3个突破性技术&#xff0c;让抖音无水印视频下载效率提升200% 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. …...

编程新知 2026/3/31 9:05:53

Qwen3.5-9B惊艳案例：128K上下文下跨页PDF内容精准摘要

Qwen3.5-9B惊艳案例&#xff1a;128K上下文下跨页PDF内容精准摘要 1. 模型核心能力展示 Qwen3.5-9B作为一款90亿参数的开源大语言模型&#xff0c;在多个领域展现出令人印象深刻的能力。我们特别测试了其在处理长文档时的表现&#xff0c;结果令人惊喜。 1.1 长上下文处理能…...

编程新知 2026/3/31 8:43:47

EasyAnimateV5-7b-zh-InP一键部署教程：基于Linux系统的快速安装指南

EasyAnimateV5-7b-zh-InP一键部署教程&#xff1a;基于Linux系统的快速安装指南 1. 引言 想快速在Linux系统上部署一个强大的视频生成模型吗&#xff1f;EasyAnimateV5-7b-zh-InP是一个22GB的图生视频模型&#xff0c;支持多分辨率视频生成&#xff0c;还能用中英文双语进行预…...

编程新知 2026/3/31 8:33:43

基于Xinference-v1.17.1的嵌入式Linux开发指南

基于Xinference-v1.17.1的嵌入式Linux开发指南 1. 引言 嵌入式设备上的AI推理一直是个技术挑战&#xff0c;特别是在资源受限的环境中部署大模型。Xinference-v1.17.1作为一个开源推理框架&#xff0c;为嵌入式Linux系统提供了轻量级的AI模型部署方案。无论你是想在树莓派上运…...

编程新知 2026/3/31 8:03:27