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

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

news 2026/4/2 6:19:47

元素的水平方向的布局

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

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

大模型预训练中的损失函数：从交叉熵到代码实现的全方位解析

大模型预训练中的损失函数&#xff1a;从交叉熵到代码实现的全方位解析 在深度学习领域&#xff0c;大语言模型的崛起彻底改变了自然语言处理的格局。这些庞然大物的核心驱动力之一&#xff0c;正是预训练阶段精心设计的损失函数。对于decoder-only架构的模型而言&#xff0c;交…...

编程新知 2026/4/2 5:54:02

帆软FineDB数据库驱动上传权限配置与实战指南

1. 为什么需要配置数据库驱动上传权限 在企业级报表开发中&#xff0c;经常会遇到需要连接特殊数据库的场景。帆软报表平台默认只内置了常见数据库的驱动&#xff0c;比如MySQL、Oracle这些。但实际项目中&#xff0c;我们可能需要连接达梦、GBase这些国产数据库&#xff0c;或…...

编程新知 2026/4/2 5:52:02

OpenClaw技能开发入门：为Qwen3-4B定制专属自动化模块

OpenClaw技能开发入门&#xff1a;为Qwen3-4B定制专属自动化模块 1. 为什么需要自定义OpenClaw技能 去年夏天&#xff0c;我接手了一个重复性极高的周报生成工作。每周都要从十几个PDF报告中提取关键数据&#xff0c;整理成固定格式的Excel表格&#xff0c;再转成PPT汇报。当…...

编程新知 2026/4/2 4:33:20

OpenClaw多模型切换指南：Qwen3.5-9B与Llama3混合调度实战

OpenClaw多模型切换指南&#xff1a;Qwen3.5-9B与Llama3混合调度实战 1. 为什么需要多模型切换&#xff1f; 去年我在搭建个人AI工作流时&#xff0c;发现单一模型很难满足所有需求。用Qwen处理文档时效果惊艳&#xff0c;但遇到代码生成任务就显得力不从心&#xff1b;换成专…...

编程新知 2026/4/2 2:45:05

【WEB模型】CS架构BS架构HTMLCSSJS

一、CS架构 - Client/Server 客户端/服务器pc安装软件&#xff1a;安卓应用、ios应用需要安装专门软件才能用&#xff0c;软件直接跟服务器通信开发成本高&#xff0c;各个平台都有对应的开发工程师好处&#xff1a;功能强大二、BS架构 - Browser/Server 浏览器/服务器不需要安…...

编程新知 2026/4/2 2:28:50

别再被@JsonFormat和@DateTimeFormat搞晕了！SpringBoot中时间处理的完整避坑指南

SpringBoot时间格式化终极指南&#xff1a;从JsonFormat到实战避坑 凌晨三点的办公室&#xff0c;咖啡杯已经见底&#xff0c;屏幕上却再次弹出那个熟悉的400错误——"Failed to parse Date value"。这可能是每个Java开发者在处理时间格式时都经历过的噩梦。时间数据…...

编程新知 2026/4/2 1:28:11

AI命理工具实测：主流大模型八字紫微能力对比及避坑指南

1. AI命理新风向&#xff1a;当大模型碰撞传统术数 最近身边刮起了一阵“AI命理”的热潮&#xff1a;做开发的朋友电脑里存着排盘工具包&#xff0c;运营岗的同事午休时在研究紫微斗数星曜含义&#xff0c;就连开策划会的间隙&#xff0c;都有人拿着AI输出的六爻结果讨论项目走…...

编程新知 2026/4/2 1:12:02

ModTheSpire模组加载器全攻略：解锁杀戮尖塔无限可能

ModTheSpire模组加载器全攻略&#xff1a;解锁杀戮尖塔无限可能 【免费下载链接】ModTheSpire External mod loader for Slay The Spire 项目地址: https://gitcode.com/gh_mirrors/mo/ModTheSpire 副标题&#xff1a;从零开始的模组探索之旅——让你的游戏体验突破边界…...

编程新知 2026/4/1 22:39:31

机器学习在医疗诊断中的应用

机器学习在医疗诊断中的应用 【免费下载链接】Zettlr Your One-Stop Publication Workbench 项目地址: https://gitcode.com/GitHub_Trending/ze/Zettlr 背景 [[医疗诊断现状分析]]显示当前诊断方法的局限性。 方法 基于[[机器学习基础概念]]中的监督学习方法。 应用…...

编程新知 2026/4/1 21:52:50

在WinForm里玩转Halcon 3D点云：从C#代码导出到完整UI显示的保姆级避坑指南

在WinForm里玩转Halcon 3D点云&#xff1a;从C#代码导出到完整UI显示的保姆级避坑指南 当工业视觉项目需要处理复杂的三维场景时&#xff0c;Halcon的3D点云处理能力往往成为开发者的首选。但将Halcon的强大算法无缝集成到C# WinForm应用中&#xff0c;却可能遭遇一系列"…...

编程新知 2026/4/1 20:35:58