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

从最简单的盒子开始思考

先把实际应用摆出来:

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又是干嘛的呢?

设置了一遍。

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

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/183504.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【排序】希尔排序(C语言实现)

文章目录 前言1. 希尔排序的思想2. 希尔排序的一些小优化 前言 本章将详细介绍希尔排序的思想及实现,由于希尔排序是在插入排序的思想上进行升华,所以如果不知道插入排序或者不熟悉的可以先看看这篇文章:《简单排序》中的直接插入排序。 1. 希…

《golang设计模式》第三部分·行为型模式-09-策略模式(Strategy)

文章目录 1. 概述1.1 作用1.1 角色1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 类图 1. 概述 1.1 作用 策略(Strategy)是用于封装一组算法中单个算法的对象,这些策略可以相互替换,使得单个算法的变化不影响使用它的客户端。 1.1 …

软件设计师——程序设计语言基础(一)

📑前言 本文主要是【程序设计语言基础】——程序设计语言基础的相关题目,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是听风与他🥇 ☁️博客首页:CSDN主页听风与他 &#…

TA-Lib学习研究笔记——Overlap Studies(二)上

TA-Lib学习研究笔记——Overlap Studies(二) 1. Overlap Studies 指标 [BBANDS, DEMA, EMA, HT_TRENDLINE, KAMA, MA, MAMA, MAVP, MIDPOINT, MIDPRICE, SAR, SAREXT, SMA, T3, TEMA, TRIMA, WMA]2.数据准备 get_data函数参数(代码&#x…

UI自动化测试的正确姿势 —— Airtest设备连接API详解第一篇

一、背景 Airtest作为一款优秀的自动化测试工具,有着强大的API功能,处理日常自动化测试过程中需要的各类操作。今天就给大家逐一介绍关于设备连接和常用API部分,结合自动化测试中的各类需求,看看如何通过使用Airtest来快速实现。…

leetcode 15. 三数之和(优质解法)

代码&#xff1a; class Solution {public static List<List<Integer>> threeSum(int[] nums) {Arrays.sort(nums);List<List<Integer>> listsnew ArrayList<>();int lengthnums.length;for(int i0;i<length-3;){int lefti1;int rightlength…

【论文学习】机器学习模型安全与隐私研究综述

机器学习在数据层、模型层以及应用层面临的安全和隐私威胁&#xff0c;呈现出多样性、隐蔽性和动态演化的特点。 应用领域&#xff1a;计算机视觉、自然语言处理、语音识别等 应用场景&#xff1a;自动驾驶、人脸识别、智慧医疗等 Key words: machine learning; poisoning atta…

设计模式之Strategy策略模式

Strategy策略模式 我的理解是在不同情况下使用不同方法&#xff0c;而方法可以增加&#xff0c;所以写一个方法父类&#xff0c;让所有方法继承下来&#xff0c;在子类写实现&#xff0c;添加时写新的子类就可以 动机 在软件构建过程中&#xff0c;某些对象使用的算法可能多…

【星火大模型】api使用

讯飞星火官方首页 准备工作 注册讯飞星火账号申请开发者api试用 从一个demo开始 讯飞星火官方的程序员为我们提供了非常优秀的demo&#xff0c;基本涵盖了大多数常用语言。 demo下载链接 这里我选用Java带上下文调用示例 下载后可以看到这是一个idea项目&#xff0c;直接…

2336. 无限集中的最小数字 : 容易又高效的分类做法

题目描述 这是 LeetCode 上的 「2336. 无限集中的最小数字」 &#xff0c;难度为 「中等」。 Tag : 「优先队列&#xff08;堆&#xff09;」、「哈希表」 现有一个包含所有正整数的集合 。 实现 SmallestInfiniteSet 类&#xff1a; SmallestInfiniteSet() 初始化 SmallestIn…

Python实现学生信息管理系统(详解版)

Python实现学生信息管理系统-详解版 个人简介实验名称&#xff1a;学生信息管理系统系统功能实验步骤详讲添加入住学生信息删除学生的住宿信息修改学生的住宿信息查询学生的住宿信息显示所有学生住宿信息显示所有请假学生的信息 运行截图展示1.主界面2.添加新的入住学生信息3.显…

Django路由分发

首先明白一点&#xff0c;Django的每一个应用下都可以有自己的templates文件夹&#xff0c;urls.py文件夹&#xff0c;static文件夹&#xff0c;基于这个特点&#xff0c;Django能够很好的做到分组开发&#xff08;每个人只写自己的app&#xff09;&#xff0c;作为老大&#x…

如何自定义spring-boot-starter

1. 创建自定义starter 1.1 生成Maven工程 mvn archetype:generate -DarchetypeGroupIdorg.apache.maven.archetypes -DarchetypeArtifactIdmaven-archetype-quickstart -DarchetypeVersion1.4交互式输入groupId、artificatId、version&#xff0c;生成Maven工程后用IDEA打开 …

详细学习Pyqt5中的2种弹簧

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图&#xff08;Item View&#xff09; 快速弄懂Pyqt5的4种项目部件&#xff08;Item Widget&#xff09; 快速掌握Pyqt5的6种按钮 快速掌握Pyqt5的10种容器&…

第十三章 python之爬虫

Python基础、函数、模块、面向对象、网络和并发编程、数据库和缓存、 前端、django、Flask、tornado、api、git、爬虫、算法和数据结构、Linux、设计题、客观题、其他 第十三章 爬虫 1. 写出在网络爬取过程中, 遇到防爬问题的解决办法。 在网络爬取过程中&#xff0c;可能会遇…

工业物联网数据传输方式探究

文章目录 引言Modbus RTU&#xff1a;传统数据采集的基础Modbus TCP&#xff1a;现代工业物联网的关键演进与影响 结语 引言 工业物联网的发展为工业数据采集带来了巨大的变革。从最初的 Modbus RTU 到现在广泛应用的 Modbus TCP&#xff0c;数据采集方式的演进使得工业领域的…

element ui 表格合计项合并

如图所示&#xff1a; 代码&#xff1a; <el-table height"400px" :data"tableData " borderstyle"width: 100%"stripe show-summaryref"table"id"table"> </el-table>监听表格 watch: { //监听table这个对象…

【LeeCode】54.螺旋矩阵

给定一个二维数组 array&#xff0c;请返回「螺旋遍历」该数组的结果。 螺旋遍历&#xff1a;从左上角开始&#xff0c;按照 向右、向下、向左、向上 的顺序 依次 提取元素&#xff0c;然后再进入内部一层重复相同的步骤&#xff0c;直到提取完所有元素。 示例 1&#xff1a;…

【华为数通HCIP | 网络工程师】821刷题日记-IS-IS(2)

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大三在校生&#xff0c;喜欢AI编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;落798. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc;️…

【面试】typescript

目录 为什么用TypeScript&#xff1f; TS和JS的区别 控制类成员可见性的访问关键字&#xff1f; public protected&#xff09;&#xff0c;该类及其子类都可以访问它们。 但是该类的实例无法访问。 私有&#xff08;private&#xff09;&#xff0c;只有类的成员可以访问…