关于前端学习的思考-内边距、边框和外边距
从最简单的盒子开始思考
先把实际应用摆出来：
margin：居中，控制边距。
padding：控制边距。
border：制作三角形。
盒子分为内容盒子，内边距盒子，边框和外边距。
如果想让块级元素居中，需要使用margin-left=auto;margin-right=auto;
如果宽度没有，高度没有，这样的居中是无效的。
例如图中的效果，因为宽度没有，高度没有，浏览器自动绘制：宽度横跨浏览器，高度为零。一旦宽度有，比如500px，
我们会发现，margin会自动填充，以使得盒子居中，注意这里是指内容盒子居中。那么如果我们去掉水平的auto，又会发生什么呢？
我们发现内容边框是从左往右绘制的，margin，padding，border不设置是不会显示的，那么内边距和外边距同时为auto，它们有没有优先级？
如上图，为了严谨一点，我们将padding水平部分和margin水平部分的代码顺序也调换了，代码调换也是浏览器调试时候的小技巧。
所以综上，padding水平和margin水平同时存在的时候，margin水平要先于padding水平。
而后我们发现无论在任何情况下，padding水平设置auto无效。
所以水平方向只有margin在内容盒子居中方面有贡献。
那么垂直方向的margin又是干嘛的呢？
设置了一遍。
貌似一点用处都没有。。。
相关文章：
关于前端学习的思考-内边距、边框和外边距
从最简单的盒子开始思考 先把实际应用摆出来： margin：居中，控制边距。 padding：控制边距。 border：制作三角形。 盒子分为内容盒子，内边距盒子，边框和外边距。 如果想让块级元素居中&#…...
【linux】/etc/security/limits.conf配置文件详解、为什么限制、常见限制查看操作
文章目录 一. limits.conf常见配置项详解二. 文件描述符（file descriptor）简述三. 为什么限制四. 相关操作1. 展示当前资源限制2. 查看系统当前打开的文件描述符数量3. 查看某个进程打开的文件描述符数量4. 各进程占用的文件描述符 /etc/security/limits…...
Windows系统下更新后自带的画图软件出现马赛克bug
一.bug的样子🍗 在使用橡皮后，原来写的内容会变成马赛克。而我们希望它是纯白色的。 二.解决方法🍗 第一步 第二步 第三步 三. 解决后的效果🍗 用橡皮擦随便擦都不会出现马赛克了。 更新过后，想用win自带的画图软件会出…...
[HTML]Web前端开发技术6（HTML5、CSS3、JavaScript ）DIV与SPAN，盒模型，Overflow——喵喵画网页
希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…...
SQL练习
建数据库： mysql> create database worker; Query OK, 1 row affected (0.00 sec) mysql> CREATE TABLE worker (-> 部门号 int(11) NOT NULL,-> 职工号 int(11) NOT NULL,-> 工作时间 date NOT NULL,-> 工资 float(8,2) NOT NULL,-> 政治面貌…...
创始人于东来：胖东来员工不想上班，请假不允许不批假！
12月2日早晨，一则关于“胖东来员工不想上班请假不允许不批假”的新闻登上了热搜，引起了广泛关注。熟悉胖东来的网友们可能知道，这并不是这家企业第一次成为热搜的焦点。据白鹿视频12月1日报道，11月25日，河南许昌的胖东…...
C++学习之路（十五）C++ 用Qt5实现一个工具箱（增加16进制颜色码转换和屏幕颜色提取功能）- 示例代码拆分讲解
上篇文章，我们用 Qt5 实现了在小工具箱中添加了《Base64图片编码预览功能》功能。为了继续丰富我们的工具箱，今天我们就再增加两个平时经常用到的功能吧，就是「 16进制颜色码转RGB文本 」和 「屏幕颜色提取」功能。下面我们就来看看如何来规划…...
【STM32】EXTI外部中断
1 中断系统 1.1 中断简介 中断：在主程序运行过程中，出现了特定的中断触发条件（中断源），使得CPU暂停当前正在运行的程序，转而去处理中断程序，处理完成后又返回原来被暂停的位置继续运行。 比如&a…...
Linux系统的常见命令十三，显示系统进程状态、文件权限、修改文件或目录所有者和所属组命令（ps、chmod和chown）
本文主要介绍Linux系统的显示系统进程状态、文件权限、修改文件或目录所有者和所属组命令，（ps、chmod和chown） 目录 显示系统进程状态文件权限设置（chmod）修改文件或目录所有者和所属组（chown） …...
Python 批量修改文件名
主要步骤 通过os.listdir查看该文件夹下所有的文件（包括文件夹）遍历所有文件，如果是文件夹则跳过，或指定跳过指定文件获取文件扩展名按照需求生成新的文件路径文件名进行重命名 代码示例 # -*- coding: utf-8 -*- import osdef…...
git的基本命令操作超详细解析教程
Git基础教学 1、初始化配置2、初始化仓库3、工作区域和文件状态4、添加和提交文件5、git reset 回退版本6、git diff查看差异7、删除文件git rm8、.gitignore9、本地文件提交到远程仓库10、分支基础 Git：一个开源的分布式版本控制系统，它可以在本地和远程…...
【代码】两阶段鲁棒优化/微电网经济调度入门到编程
内容包括 matlab-yalmipcplex微电网两阶段鲁棒经济调度（刘） matlab-yalmipcplex两阶段鲁棒微电网容量经济优化调度 两阶段鲁棒优化CCG列于约束生成和Benders代码，可扩展改编，复现自原外文论文 【赠送】虚拟储能单元电动汽车建…...
【图论】重庆大学图论与应用课程期末复习资料2-各章考点（填空证明部分）（私人复习资料）
图论各章考点 一、图与网络的基本概念二、树三、连通性四、路径算法五、匹配六、行遍性问题七、平面图 一、图与网络的基本概念 生成子图：生成子图 G ’ G’ G’中顶点个数V’必须和原图G中V的数量相同，而 E ’ ∈ E E’∈E E’∈E即可。顶点集导出子图…...
基于Intel® AI Analytics Toolkits的智能视频监控系统
【oneAPI DevSummit & OpenVINODevCon联合黑客松】 跳转链接：https://marketing.csdn.net/p/d2322260c8d99ae24795f727e70e4d3d 目录 1方案背景 2方案描述 3需求分析 4技术可行性分析 5详细设计5.1数据采集 5.2视频解码与帧提取 5.3人脸检测 5.4行为识别…...
深度学习中的注意力机制：原理、应用与实践
深度学习中的注意力机制：原理、应用与实践 摘要： 本文将深入探讨深度学习中的注意力机制，包括其原理、应用领域和实践方法。我们将通过详细的解析和代码示例，帮助读者更好地理解和应用注意力机制，从而提升深度学习模…...
将本地项目推送到github
欢迎大家到我的博客浏览。将本地项目推送到github | YinKais Blog 本地项目上传至 GitHub<!--more--> 1、进入项目根目录，初始化本地仓库 git init 2、创建密钥：创建 .ssh 文件夹，并进入 .ssh 文件夹 mkdir .ssh cd .ssh/ 3、生成…...
[读论文]meshGPT
概述 任务：无条件生成mesh （无颜色）数据集：shapenet v2方法：先trian一个auto encoder，用来获得code book；然后trian一个自回归的transformermesh表达：face序列。face按规定的顺序&a…...
反序列化漏洞详解（一）
目录 一、php面向对象 二、类 2.1 类的定义 2.2 类的修饰符介绍 三、序列化 3.1 序列化的作用 3.2 序列化之后的表达方式/格式 ① 简单序列化 ② 数组序列化 ③ 对象序列化 ④ 私有修饰符序列化 ⑤ 保护修饰符序列化 ⑥ 成员属性调用对象 序列化 四、反序列化 …...
键盘打字盲打练习系列之指法练习——2
一.欢迎来到我的酒馆 盲打，指法练习！ 目录 一.欢迎来到我的酒馆二.开始练习 二.开始练习 前面一个章节简单地介绍了基准键位、字母键位和数字符号键位指法，在这个章节详细介绍指法。有了前面的章节的基础练习，相信大家对盲打也有了…...
小程序----使用图表显示数据--canvas
需求：在小程序上实现数据可视化 思路：本来想用的是echarts或者相关的可视化插件，但因为用的是vue3，大多数插件不支持，所以用了echarts，但最后打包的时候说包太大超过2M无法上传，百度了一下&…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
Spring是如何解决Bean的循环依赖：三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间互相持有对方引用，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
Java毕业设计：WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发，实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构，服务器端使用Java Servlet处理请求，数据库采用MySQL存储信息࿰…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...
BLEU评分：机器翻译质量评估的黄金标准
BLEU评分：机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域，衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标，自2002年由IBM的Kishore Papineni等人提出以来，…...