CSS中控制元素水平布局的七个属性
元素的水平方向的布局
元素在其父元素中水平方向的位置由一下几个属性共同决定
margin-left border-left padding-left width padding-right border-right margin-right
一个元素在其父元素中,水平布局必须要满足以下的等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
=父元素内容区的宽度(必须满足)
举例:子元素 inner七个元素的值如下
0 +0 + 0+ 200 + 0 + 0 + 0 =600 ??不成立
以上等式必须满足,如果相加结果等式不成立,则称为过度约束,则浏览器会让等式自动调整
——调整的情况
1:如果七个值中没有auto情况,则浏览器会调整margin-right值以使等式满足
0 +0 + 0+ 200 + 0 + 0 + 400 =600
2:这7个值中width,margin-left,margin-right,这三个值可以设置auto
如果有设置auto,则浏览器会自动调整auto的值,以使等式成立
0 +0 + 0+ auto + 0 + 0 + 0 =600 auto=600
0 +0 + 0+ auto + 0 + 0 + 200 =600 auto=400
3:如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大
4:如果三个值都是auto,也只会调整宽度
5:如果将两个外边距设为auto,宽度固定,则两侧外边距会设置为相同的值,会使元素自动在父元素中居中,所以我们经常将左右外边距设置为auto
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.outer {width: 600px;height: 200px;border: 10px red solid;}.inner {width: 200px;margin-right: auto;margin-left: auto;/* margin: 0 auto; */height: 200px;background-color: sandybrown;}</style></head><body><div class="outer"><div class="inner"></div></div></body>
</html>
相关文章:
CSS中控制元素水平布局的七个属性
元素的水平方向的布局 元素在其父元素中水平方向的位置由一下几个属性共同决定 margin-left border-left padding-left width padding-right border-right margin-right 一个元素在其父元素中,水平布局必须要满足以下…...
YOLOv8改进 | 2023检测头篇 | 利用AFPN改进检测头适配YOLOv8版(全网独家创新)
一、本文介绍 本文给大家带来的改进机制是利用今年新推出的AFPN(渐近特征金字塔网络)来优化检测头,AFPN的核心思想是通过引入一种渐近的特征融合策略,将底层、高层和顶层的特征逐渐整合到目标检测过程中。这种渐近融合方式有助于…...
测试经理的职责是什么?
测试经理的职责是什么? 从项目启动到项目结束的管理 测试计划 获得客户对交付产品的认可 批准中间可交付内容并向客户发布补丁 记录工作内容以便绩效考评或其他计费 问题管理 团队管理 向测试协调员或SQA提交每周状态报告 参加每周回顾会议 每周发布所有测试项目的…...
LinuxBasicsForHackers笔记 -- BASH 脚本
你的第一个脚本:“你好,黑客崛起!” 首先,您需要告诉操作系统您要为脚本使用哪个解释器。 为此,请输入 shebang,它是井号和感叹号的组合,如下所示:#! 然后,在 shebang …...
定时任务特辑 | Quartz、xxl-job、elastic-job、Cron四个定时任务框架对比,和Spring Boot集成实战
专栏集锦,大佬们可以收藏以备不时之需: Spring Cloud 专栏:http://t.csdnimg.cn/WDmJ9 Python 专栏:http://t.csdnimg.cn/hMwPR Redis 专栏:http://t.csdnimg.cn/Qq0Xc TensorFlow 专栏:http://t.csdni…...
【面试经典150 | 二叉树】对称二叉树
文章目录 写在前面Tag题目来源解题思路方法一:递归方法二:迭代 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法,两到三天更新一篇文章,欢迎催更…… 专栏内容以分析题目为主,并附带一些对于本题涉及到的…...
使用Git进行版本控制
参考:《Python编程从入门到实践》 前言1、安装、配置 Git1.1 在Linux系统中安装Git1.2 在OS X系统中安装Git1.3 在Windows系统中安装Git1.4 配置Git 2、创建项目3、忽略文件4、初始化仓库5、检查状态6、将文件加入到仓库中7、执行提交8、查看提交历史 前言 版本控制…...
专业课145+总分440+东南大学920考研专业基础综合信号与系统数字电路经验分享
个人情况简介 今年考研440,专业课145,数一140,期间一年努力辛苦付出,就不多表了,考研之路虽然艰难,付出很多,当收获的时候,都是值得,考研还是非常公平,希望大…...
Leetcode每日一题
https://leetcode.cn/problems/binary-tree-preorder-traversal/ 这道题目需要我们自行进行创建一个数组,题目也给出我们需要自己malloc一个数组来存放,这样能达到我们遍历的效果,我们来看看他的接口函数给的是什么。 可以看到的是这个接口函…...
USB连接器
USB连接器 电子元器件百科 文章目录 USB连接器前言一、USB连接器是什么二、USB连接器的类别三、USB连接器的应用实例四、USB连接器的作用原理总结前言 USB连接器的使用广泛,几乎所有现代电子设备都具备USB接口,使得设备之间的数据传输和充电变得简单和便捷。 一、USB连接器是…...
软件工程之需求分析
一、对需求的基本认识 1.需求分析简介 (1)什么是需求 用户需求:由用户提出。原始的用户需求通常是不能直接做成产品的,需要对其进行分析提炼,最终形成产品需求。 产品需求:产品经理针对用户需求提出的解决方案。 (2)为什么要…...
URL提示不安全
当用户访问一个没有经过SSL证书加密的网站(即使用HTTP而不是HTTPS协议),或者SSL证书存在问题时,浏览器URL会显示不安全提示。这些提示旨在保护用户免受潜在的恶意活动,并提醒他们谨慎对待这些不安全的网站。那么该如何…...
JavaBean是什么
详情请参考JavaBean规范:https://www.oracle.com/java/technologies/javase/javabeans-spec.html JavaBean是可重用的软件组件,是一个java类,方法名称符合一定的规范,这样使用方使用起来方便,例如框架和工具可以根据规…...
202309-2
http://118.190.20.162/view.page?gpidT174 题目分析: 这道题读完题后感觉像是考察前缀和,这里回顾下什么是前缀和:https://blog.csdn.net/weixin_45629285/article/details/111146240 我们利用前缀和算法,就可以在O(nm)的时…...
数字图像处理(实践篇)二十 人脸特征提取
目录 1 安装face_recognition 2 涉及的函数 3 实践 使用face_recognition进行人脸特征提取. 1 安装face_recognition pip install face_recognition 或者 pip --default-timeout100 install face_recognition -i http://pypi.douban.com/simple --trusted-host pypi.dou…...
Python自动化:selenium常用方法总结
使用的Python版本为3.8,selenium版本为4.15.2 Python自动化:selenium常用方法总结 1. 三种等待方式2. 浏览器操作3. 8种查找元素的方法4. 高级事件 1. 三种等待方式 强制等待 使用模块time下的sleep()实现等待效果隐式等待 使用driver.implicitly_wait()方法&#…...
『开源资讯』JimuReport积木报表 v1.6.6 版本发布—免费报表工具
项目介绍 一款免费的数据可视化报表,含报表和大屏设计,像搭建积木一样在线设计报表!功能涵盖,数据报表、打印设计、图表报表、大屏设计等! Web 版报表设计器,类似于excel操作风格,通过拖拽完成报…...
每天五分钟计算机视觉:使用1*1卷积层来改变输入层的通道数量
本文重点 在卷积神经网络中有很多重要的卷积核,比如1*1的卷积核,3*3的卷积核,本文将讲解1*1的卷积核的使用,它在卷积神经网络中具有重要的地位。由于1*1的卷积核使用了最小的窗口,那么1*1的卷积核就失去了卷积层可以识…...
Java (JDK 21) 调用 OpenCV (4.8.0)
Java 调用 OpenCV 一.OpenCV 下载和安装二.创建 Java Maven 项目三.其他测试 一.OpenCV 下载和安装 Open CV 官网 可以下载编译好的包,也可以下载源码自行编译 双击安装 opencv-4.8.0-windows.exe 默认为当前目录 安装即解压缩 根据系统位数选择 将 x64 目录下 op…...
git 常用的使用方法
1.查看分支 $ git branch #查看本地分支 $ git branch -r #查看远程分支 $ git branch -a #查看所有分支 $ git branch -vv #查看本地分支及追踪的分支 2.创建分支 方法1 $ git branch 分支名 #创建本地分支 #将本地分支push,就创建了远程分支方法2 #创建本地分…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
MFC 抛体运动模拟:常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...
9-Oracle 23 ai Vector Search 特性 知识准备
很多小伙伴是不是参加了 免费认证课程(限时至2025/5/15) Oracle AI Vector Search 1Z0-184-25考试,都顺利拿到certified了没。 各行各业的AI 大模型的到来,传统的数据库中的SQL还能不能打,结构化和非结构的话数据如何和…...
消息队列系统设计与实践全解析
文章目录 🚀 消息队列系统设计与实践全解析🔍 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡💡 权衡决策框架 1.3 运维复杂度评估🔧 运维成本降低策略 🏗️ 二、典型架构设计2.1 分布式事务最终一致…...
数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)
目录 🔍 若用递归计算每一项,会发生什么? Horners Rule(霍纳法则) 第一步:我们从最原始的泰勒公式出发 第二步:从形式上重新观察展开式 🌟 第三步:引出霍纳法则&…...
echarts使用graphic强行给图增加一个边框(边框根据自己的图形大小设置)- 适用于无法使用dom的样式
pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图,如果边框加在dom上面,pdf-lib导出svg的时候并不会导出边框,所以只能在echarts图上面加边框 grid的边框是在图里…...
