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

CSS中控制元素水平布局的七个属性

news 2025/9/16 18:43:30

元素的水平方向的布局

元素在其父元素中水平方向的位置由一下几个属性共同决定

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 一个元素在其父元素中&#xff0c;水平布局必须要满足以下…...

编程日记 2023/12/11 12:59:28

YOLOv8改进 | 2023检测头篇 | 利用AFPN改进检测头适配YOLOv8版（全网独家创新）

一、本文介绍 本文给大家带来的改进机制是利用今年新推出的AFPN&#xff08;渐近特征金字塔网络&#xff09;来优化检测头&#xff0c;AFPN的核心思想是通过引入一种渐近的特征融合策略&#xff0c;将底层、高层和顶层的特征逐渐整合到目标检测过程中。这种渐近融合方式有助于…...

编程日记 2023/12/11 12:58:28

测试经理的职责是什么？

测试经理的职责是什么&#xff1f; 从项目启动到项目结束的管理 测试计划 获得客户对交付产品的认可 批准中间可交付内容并向客户发布补丁 记录工作内容以便绩效考评或其他计费 问题管理 团队管理 向测试协调员或SQA提交每周状态报告 参加每周回顾会议 每周发布所有测试项目的…...

编程日记 2023/12/11 12:56:26

LinuxBasicsForHackers笔记 -- BASH 脚本

你的第一个脚本&#xff1a;“你好&#xff0c;黑客崛起&#xff01;” 首先&#xff0c;您需要告诉操作系统您要为脚本使用哪个解释器。 为此&#xff0c;请输入 shebang&#xff0c;它是井号和感叹号的组合&#xff0c;如下所示&#xff1a;#! 然后&#xff0c;在 shebang …...

编程日记 2023/12/11 12:55:25

定时任务特辑 | Quartz、xxl-job、elastic-job、Cron四个定时任务框架对比，和Spring Boot集成实战

专栏集锦&#xff0c;大佬们可以收藏以备不时之需&#xff1a; Spring Cloud 专栏&#xff1a;http://t.csdnimg.cn/WDmJ9 Python 专栏&#xff1a;http://t.csdnimg.cn/hMwPR Redis 专栏&#xff1a;http://t.csdnimg.cn/Qq0Xc TensorFlow 专栏&#xff1a;http://t.csdni…...

编程日记 2023/12/11 12:54:24

【面试经典150 | 二叉树】对称二叉树

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;递归方法二&#xff1a;迭代 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本题涉及到的…...

编程日记 2023/12/11 12:53:23

使用Git进行版本控制

参考&#xff1a;《Python编程从入门到实践》 前言1、安装、配置 Git1.1 在Linux系统中安装Git1.2 在OS X系统中安装Git1.3 在Windows系统中安装Git1.4 配置Git 2、创建项目3、忽略文件4、初始化仓库5、检查状态6、将文件加入到仓库中7、执行提交8、查看提交历史 前言 版本控制…...

编程日记 2023/12/11 12:51:20

专业课145+总分440+东南大学920考研专业基础综合信号与系统数字电路经验分享

个人情况简介 今年考研440&#xff0c;专业课145&#xff0c;数一140&#xff0c;期间一年努力辛苦付出&#xff0c;就不多表了&#xff0c;考研之路虽然艰难&#xff0c;付出很多&#xff0c;当收获的时候&#xff0c;都是值得&#xff0c;考研还是非常公平&#xff0c;希望大…...

编程日记 2023/12/11 12:50:19

Leetcode每日一题

https://leetcode.cn/problems/binary-tree-preorder-traversal/ 这道题目需要我们自行进行创建一个数组&#xff0c;题目也给出我们需要自己malloc一个数组来存放&#xff0c;这样能达到我们遍历的效果&#xff0c;我们来看看他的接口函数给的是什么。 可以看到的是这个接口函…...

编程日记 2023/12/11 12:45:15

USB连接器

USB连接器 电子元器件百科 文章目录 USB连接器前言一、USB连接器是什么二、USB连接器的类别三、USB连接器的应用实例四、USB连接器的作用原理总结前言 USB连接器的使用广泛，几乎所有现代电子设备都具备USB接口，使得设备之间的数据传输和充电变得简单和便捷。 一、USB连接器是…...

编程日记 2023/12/11 12:40:11

软件工程之需求分析

一、对需求的基本认识 1.需求分析简介 (1)什么是需求 用户需求&#xff1a;由用户提出。原始的用户需求通常是不能直接做成产品的&#xff0c;需要对其进行分析提炼&#xff0c;最终形成产品需求。 产品需求&#xff1a;产品经理针对用户需求提出的解决方案。 (2)为什么要…...

编程日记 2023/12/11 12:39:10

URL提示不安全

当用户访问一个没有经过SSL证书加密的网站&#xff08;即使用HTTP而不是HTTPS协议&#xff09;&#xff0c;或者SSL证书存在问题时&#xff0c;浏览器URL会显示不安全提示。这些提示旨在保护用户免受潜在的恶意活动&#xff0c;并提醒他们谨慎对待这些不安全的网站。那么该如何…...

编程日记 2023/12/11 12:37:08

JavaBean是什么

详情请参考JavaBean规范&#xff1a;https://www.oracle.com/java/technologies/javase/javabeans-spec.html JavaBean是可重用的软件组件&#xff0c;是一个java类&#xff0c;方法名称符合一定的规范&#xff0c;这样使用方使用起来方便&#xff0c;例如框架和工具可以根据规…...

编程日记 2023/12/11 12:35:06

202309-2

http://118.190.20.162/view.page?gpidT174 题目分析&#xff1a; 这道题读完题后感觉像是考察前缀和&#xff0c;这里回顾下什么是前缀和&#xff1a;https://blog.csdn.net/weixin_45629285/article/details/111146240 我们利用前缀和算法&#xff0c;就可以在O(nm)的时…...

编程日记 2023/12/11 12:34:05

数字图像处理（实践篇）二十 人脸特征提取

目录 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…...

编程日记 2023/12/11 12:33:04

Python自动化:selenium常用方法总结

使用的Python版本为3.8&#xff0c;selenium版本为4.15.2 Python自动化:selenium常用方法总结 1. 三种等待方式2. 浏览器操作3. 8种查找元素的方法4. 高级事件 1. 三种等待方式 强制等待 使用模块time下的sleep()实现等待效果隐式等待 使用driver.implicitly_wait()方法&#…...

编程日记 2023/12/11 12:32:03

『开源资讯』JimuReport积木报表 v1.6.6 版本发布—免费报表工具

项目介绍 一款免费的数据可视化报表&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完成报…...

编程日记 2023/12/11 12:27:59

每天五分钟计算机视觉：使用1*1卷积层来改变输入层的通道数量

本文重点 在卷积神经网络中有很多重要的卷积核&#xff0c;比如1*1的卷积核&#xff0c;3*3的卷积核&#xff0c;本文将讲解1*1的卷积核的使用&#xff0c;它在卷积神经网络中具有重要的地位。由于1*1的卷积核使用了最小的窗口&#xff0c;那么1*1的卷积核就失去了卷积层可以识…...

编程日记 2023/12/11 12:25:58

Java (JDK 21) 调用 OpenCV (4.8.0)

Java 调用 OpenCV 一.OpenCV 下载和安装二.创建 Java Maven 项目三.其他测试 一.OpenCV 下载和安装 Open CV 官网 可以下载编译好的包&#xff0c;也可以下载源码自行编译 双击安装 opencv-4.8.0-windows.exe 默认为当前目录 安装即解压缩 根据系统位数选择 将 x64 目录下 op…...

编程日记 2023/12/11 12:24:56

git 常用的使用方法

1.查看分支 $ git branch #查看本地分支 $ git branch -r #查看远程分支 $ git branch -a #查看所有分支 $ git branch -vv #查看本地分支及追踪的分支 2.创建分支 方法1 $ git branch 分支名 #创建本地分支 #将本地分支push&#xff0c;就创建了远程分支方法2 #创建本地分…...

编程日记 2023/12/11 12:23:55

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/9/14 12:35:26

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/9/8 19:48:28

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/9/12 14:19:17

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/9/14 20:40:14

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/6/21 15:17:11

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2025/9/2 17:47:35

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/9/12 11:11:41

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/9/6 23:12:54

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/9/7 22:14:23

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2025/9/9 10:09:30