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

关于前端学习的思考-内边距、边框和外边距

news 2026/2/11 1:21:45

从最简单的盒子开始思考

先把实际应用摆出来：

margin：居中，控制边距。

padding：控制边距。

border：制作三角形。

 

盒子分为内容盒子，内边距盒子，边框和外边距。

如果想让块级元素居中，需要使用margin-left=auto;margin-right=auto;

如果宽度没有，高度没有，这样的居中是无效的。

ad9dc97c91a140009b40b01357ddd38e.png

例如图中的效果，因为宽度没有，高度没有，浏览器自动绘制：宽度横跨浏览器，高度为零。一旦宽度有，比如500px，

f1d1a68fd47949a3a30d64bd9a25267b.png

我们会发现，margin会自动填充，以使得盒子居中，注意这里是指内容盒子居中。那么如果我们去掉水平的auto，又会发生什么呢？

259fb1571a154116b21c38403dd117a4.png

我们发现内容边框是从左往右绘制的，margin，padding，border不设置是不会显示的，那么内边距和外边距同时为auto，它们有没有优先级？

5409b22378464c6e9a367a12e5ad9c79.png

4e16a4db458a4fe68417c029a0a2bbd7.png

如上图，为了严谨一点，我们将padding水平部分和margin水平部分的代码顺序也调换了，代码调换也是浏览器调试时候的小技巧。

所以综上，padding水平和margin水平同时存在的时候，margin水平要先于padding水平。

f34508e17f97432e828486925e43c898.png

而后我们发现无论在任何情况下，padding水平设置auto无效。

所以水平方向只有margin在内容盒子居中方面有贡献。

那么垂直方向的margin又是干嘛的呢？

设置了一遍。

貌似一点用处都没有。。。

 

 

相关文章：

关于前端学习的思考-内边距、边框和外边距

从最简单的盒子开始思考 先把实际应用摆出来： margin：居中，控制边距。 padding：控制边距。 border：制作三角形。 盒子分为内容盒子，内边距盒子，边框和外边距。 如果想让块级元素居中&#…...

编程日记 2023/12/2 10:35:29

【linux】/etc/security/limits.conf配置文件详解、为什么限制、常见限制查看操作

文章目录 一. limits.conf常见配置项详解二. 文件描述符（file descriptor）简述三. 为什么限制四. 相关操作1. 展示当前资源限制2. 查看系统当前打开的文件描述符数量3. 查看某个进程打开的文件描述符数量4. 各进程占用的文件描述符 /etc/security/limits…...

编程日记 2023/12/2 10:33:25

Windows系统下更新后自带的画图软件出现马赛克bug

一.bug的样子🍗 在使用橡皮后，原来写的内容会变成马赛克。而我们希望它是纯白色的。 二.解决方法🍗 第一步 第二步 第三步 三. 解决后的效果🍗 用橡皮擦随便擦都不会出现马赛克了。 更新过后，想用win自带的画图软件会出…...

编程日记 2023/12/2 10:31:24

[HTML]Web前端开发技术6（HTML5、CSS3、JavaScript ）DIV与SPAN，盒模型，Overflow——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…...

编程日记 2023/12/2 10:28:22

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,-> 政治面貌…...

编程日记 2023/12/2 10:25:19

创始人于东来：胖东来员工不想上班，请假不允许不批假！

12月2日早晨，一则关于“胖东来员工不想上班请假不允许不批假”的新闻登上了热搜，引起了广泛关注。熟悉胖东来的网友们可能知道，这并不是这家企业第一次成为热搜的焦点。据白鹿视频12月1日报道，11月25日，河南许昌的胖东…...

编程日记 2023/12/2 10:23:18

C++学习之路（十五）C++ 用Qt5实现一个工具箱（增加16进制颜色码转换和屏幕颜色提取功能）- 示例代码拆分讲解

上篇文章，我们用 Qt5 实现了在小工具箱中添加了《Base64图片编码预览功能》功能。为了继续丰富我们的工具箱，今天我们就再增加两个平时经常用到的功能吧，就是「 16进制颜色码转RGB文本 」和 「屏幕颜色提取」功能。下面我们就来看看如何来规划…...

编程日记 2023/12/2 10:21:16

【STM32】EXTI外部中断

1 中断系统 1.1 中断简介 中断：在主程序运行过程中，出现了特定的中断触发条件（中断源），使得CPU暂停当前正在运行的程序，转而去处理中断程序，处理完成后又返回原来被暂停的位置继续运行。 比如&a…...

编程日记 2023/12/2 10:19:14

Linux系统的常见命令十三，显示系统进程状态、文件权限、修改文件或目录所有者和所属组命令（ps、chmod和chown）

本文主要介绍Linux系统的显示系统进程状态、文件权限、修改文件或目录所有者和所属组命令，（ps、chmod和chown） 目录 显示系统进程状态文件权限设置（chmod）修改文件或目录所有者和所属组（chown） …...

编程日记 2023/12/2 10:18:13

Python 批量修改文件名

主要步骤 通过os.listdir查看该文件夹下所有的文件（包括文件夹）遍历所有文件，如果是文件夹则跳过，或指定跳过指定文件获取文件扩展名按照需求生成新的文件路径文件名进行重命名 代码示例 # -*- coding: utf-8 -*- import osdef…...

编程日记 2023/12/2 10:16:11

git的基本命令操作超详细解析教程

Git基础教学 1、初始化配置2、初始化仓库3、工作区域和文件状态4、添加和提交文件5、git reset 回退版本6、git diff查看差异7、删除文件git rm8、.gitignore9、本地文件提交到远程仓库10、分支基础 Git：一个开源的分布式版本控制系统，它可以在本地和远程…...

编程日记 2023/12/2 10:13:09

【代码】两阶段鲁棒优化/微电网经济调度入门到编程

内容包括 matlab-yalmipcplex微电网两阶段鲁棒经济调度（刘） matlab-yalmipcplex两阶段鲁棒微电网容量经济优化调度 两阶段鲁棒优化CCG列于约束生成和Benders代码，可扩展改编，复现自原外文论文 【赠送】虚拟储能单元电动汽车建…...

编程日记 2023/12/2 10:12:08

【图论】重庆大学图论与应用课程期末复习资料2-各章考点（填空证明部分）（私人复习资料）

图论各章考点 一、图与网络的基本概念二、树三、连通性四、路径算法五、匹配六、行遍性问题七、平面图 一、图与网络的基本概念 生成子图：生成子图 G ’ G’ G’中顶点个数V’必须和原图G中V的数量相同，而 E ’ ∈ E E’∈E E’∈E即可。顶点集导出子图…...

编程日记 2023/12/2 10:11:07

基于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行为识别…...

编程日记 2023/12/2 10:10:06

深度学习中的注意力机制：原理、应用与实践

深度学习中的注意力机制：原理、应用与实践 摘要： 本文将深入探讨深度学习中的注意力机制，包括其原理、应用领域和实践方法。我们将通过详细的解析和代码示例，帮助读者更好地理解和应用注意力机制，从而提升深度学习模…...

编程日记 2023/12/2 10:08:05

将本地项目推送到github

欢迎大家到我的博客浏览。将本地项目推送到github | YinKais Blog 本地项目上传至 GitHub<!--more--> 1、进入项目根目录&#xff0c;初始化本地仓库 git init 2、创建密钥&#xff1a;创建 .ssh 文件夹&#xff0c;并进入 .ssh 文件夹 mkdir .ssh cd .ssh/ 3、生成…...

编程日记 2023/12/2 10:05:01

[读论文]meshGPT

概述 任务&#xff1a;无条件生成mesh &#xff08;无颜色&#xff09;数据集&#xff1a;shapenet v2方法&#xff1a;先trian一个auto encoder&#xff0c;用来获得code book&#xff1b;然后trian一个自回归的transformermesh表达&#xff1a;face序列。face按规定的顺序&a…...

编程日记 2023/12/2 10:02:59

反序列化漏洞详解（一）

目录 一、php面向对象 二、类 2.1 类的定义 2.2 类的修饰符介绍 三、序列化 3.1 序列化的作用 3.2 序列化之后的表达方式/格式 ① 简单序列化 ② 数组序列化 ③ 对象序列化 ④ 私有修饰符序列化 ⑤ 保护修饰符序列化 ⑥ 成员属性调用对象 序列化 四、反序列化 …...

编程日记 2023/12/2 10:00:57

键盘打字盲打练习系列之指法练习——2

一.欢迎来到我的酒馆 盲打&#xff0c;指法练习&#xff01; 目录 一.欢迎来到我的酒馆二.开始练习 二.开始练习 前面一个章节简单地介绍了基准键位、字母键位和数字符号键位指法&#xff0c;在这个章节详细介绍指法。有了前面的章节的基础练习&#xff0c;相信大家对盲打也有了…...

编程日记 2023/12/2 9:57:54

小程序----使用图表显示数据--canvas

需求&#xff1a;在小程序上实现数据可视化 思路&#xff1a;本来想用的是echarts或者相关的可视化插件&#xff0c;但因为用的是vue3&#xff0c;大多数插件不支持&#xff0c;所以用了echarts&#xff0c;但最后打包的时候说包太大超过2M无法上传&#xff0c;百度了一下&…...

编程日记 2023/12/2 9:56:53

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2026/2/8 4:37:10

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/2/7 17:33:19

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2026/1/23 10:24:30

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/2/1 21:58:45

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

编程新知 2026/2/9 20:30:28

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2026/1/24 12:01:38