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

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

news 文章来源：https://blog.csdn.net/csgojingyu/article/details/134869110 2025/4/8 3:28:44

元素的水平方向的布局

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

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

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

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

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

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

测试经理的职责是什么？

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

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

LinuxBasicsForHackers笔记 -- BASH 脚本

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

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

定时任务特辑 | 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…...

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

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

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

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

使用Git进行版本控制

参考：《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，专业课145，数一140，期间一年努力辛苦付出，就不多表了，考研之路虽然艰难，付出很多，当收获的时候，都是值得，考研还是非常公平，希望大…...

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

Leetcode每日一题

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

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

USB连接器

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

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

软件工程之需求分析

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

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

URL提示不安全

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

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

JavaBean是什么

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

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

202309-2

http://118.190.20.162/view.page?gpidT174 题目分析： 这道题读完题后感觉像是考察前缀和，这里回顾下什么是前缀和：https://blog.csdn.net/weixin_45629285/article/details/111146240 我们利用前缀和算法，就可以在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，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 版本发布—免费报表工具

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

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

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

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

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

Java (JDK 21) 调用 OpenCV (4.8.0)

Java 调用 OpenCV 一.OpenCV 下载和安装二.创建 Java Maven 项目三.其他测试一.OpenCV 下载和安装 Open CV 官网可以下载编译好的包，也可以下载源码自行编译双击安装 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，就创建了远程分支方法2 #创建本地分…...

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

使用Caliper对Fabric地basic链码进行性能测试

如果你需要对fabric网络中地合约进行吞吐量、延迟等性能进行评估，可以使用Caliper来实现，会返回给你一份网页版的直观测试报告。下面是对test-network网络地basic链码地测试过程。目录 1. 建立caliper-workspace文件夹2. 安装npm等3. calipe安装4. 创建…...

编程日记 2023/12/11 12:21:52

一台是阿里云，一台是腾讯云，一台是华为云，一台是百度云等多种公有云混合安装K8S集群

1. 修改主机名称和添加hosts #永久修改主机名 hostnamectl set-hostname master && bash #在master01上操作，阿里云服务器 hostnamectl set-hostname worker1 && bash #在node01上操作，阿里腾讯云服务器 hostnamectl set-ho…...

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