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

盒子模型的基础

news 2026/5/15 19:08:57

  • 盒子模型

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

3分钟让你的Obsidian代码块告别混乱：专业开发者的笔记美化秘籍

3分钟让你的Obsidian代码块告别混乱&#xff1a;专业开发者的笔记美化秘籍 【免费下载链接】obsidian-better-codeblock Add title, line number to Obsidian code block 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-better-codeblock 还在为Obsidian中密密麻…...

编程新知 2026/5/15 16:47:48

DsHidMini技术揭秘：Windows平台下DualShock 3控制器用户空间驱动实现方案

DsHidMini技术揭秘&#xff1a;Windows平台下DualShock 3控制器用户空间驱动实现方案 【免费下载链接】DsHidMini Virtual HID Mini-user-mode-driver for Sony DualShock 3 Controllers 项目地址: https://gitcode.com/gh_mirrors/ds/DsHidMini 在Windows游戏生态系统中…...

编程新知 2026/5/15 14:59:33

AI驱动的智能监控：从时序异常检测到自动化运维实战

1. 项目概述&#xff1a;AI驱动的系统守护者最近在折腾一个服务器监控项目时&#xff0c;发现了一个挺有意思的开源工具&#xff0c;叫bhusingh/ai-watchdog。这个名字直译过来就是“AI看门狗”&#xff0c;听起来就很有画面感。它本质上是一个利用人工智能技术来监控系统、预测…...

编程新知 2026/5/15 11:46:47

领信任安全架构在安全防护能力合规性业务连续性方面的建树

从被动防御到主动免疫：零信任安全架构在安全防护能力、合规性与业务连续性三大维度的全面建树 引言：当“城墙”不再有效，新的安全范式如何证明自己？ 2026年3月，一场被称为“CyberStrikeAI”的自主AI攻击战役横扫全球——完全自主的AI引擎在短短数周内攻破了55个国家的60…...

编程新知 2026/5/15 10:41:14

软件性能优化：热点代码识别与优化实战

1. 软件性能优化中的热点代码识别 在软件开发领域&#xff0c;性能优化始终是开发者面临的核心挑战之一。作为一名长期从事性能调优的工程师&#xff0c;我见过太多团队将大量时间浪费在错误的优化对象上。热点代码&#xff08;Hotspots&#xff09;就像城市交通中的拥堵点&…...

编程新知 2026/5/15 10:07:42

阿里健康年营收342亿：净利19亿 CFO屠燕武辞职

雷递网 雷建平 5月14日阿里健康&#xff08;股份代号&#xff1a;00241&#xff09;今日发布截至2026年3月31日的财报。财报显示&#xff0c;截至2026年3月31日的年度&#xff0c;阿里健康营收为342.55亿元&#xff0c;较上年同期的306亿元增长12%。截至2026年3月31日的年度&am…...

编程新知 2026/5/15 9:07:37

仅限首批200名技术负责人开放｜ElevenLabs中文定制音色微调手册（含v2.4.1未公开API参数表）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs中文语音生成优化的底层逻辑与适用边界 语音建模的语言适配瓶颈 ElevenLabs 原生模型基于英文语料大规模预训练&#xff0c;其中音素单元&#xff08;phoneme&#xff09;与韵律建模均以拉丁…...

编程新知 2026/5/15 7:20:51

零基础录音转日程教程包教包会避坑，看完就能直接上手

做销售近5年&#xff0c;日常需频繁跑客户拜访、对接客户&#xff0c;每次沟通结束后&#xff0c;将录音整理成待办日程都十分繁琐&#xff0c;先和大家分享我之前踩过的一些坑&#xff0c;不少同行可能也有类似经历。第一个坑是误以为录音转日程&#xff0c;只需先将录音转成文…...

编程新知 2026/5/15 6:21:00

代码可视化工具：从AST解析到自动化图表生成的技术实践

1. 项目概述&#xff1a;从代码到图形的自动化桥梁在软件开发、架构设计乃至技术文档编写的日常工作中&#xff0c;我们常常面临一个共同的痛点&#xff1a;如何清晰、高效地向他人&#xff08;或未来的自己&#xff09;解释一段复杂的代码逻辑、一个系统的模块关系&#xff0c…...

编程新知 2026/5/15 6:14:52

基于MCP协议构建个人AI助手：本地化读取Mac消息数据库实践

1. 项目概述&#xff1a;一个让AI助手“读懂”你Mac消息的桥梁如果你和我一样&#xff0c;是个重度依赖Mac原生“信息”应用&#xff08;也就是iMessage&#xff09;来沟通的人&#xff0c;同时又希望自己的AI助手&#xff08;比如Claude、Cursor里的AI&#xff09;能更深入地了…...

编程新知 2026/5/15 5:21:46