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

前端学习DAY28（水平）

news 2025/9/18 6:37:55

元素水平方向的布局

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

        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 + 0 =300        auto=300

        3、如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{width: 800px;height:300px;   border:20px cyan solid;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

        4、如果三个值都是auto，也只会调整宽度

        5、如果将两个外边距设为auto。宽度固定，则两侧外边距会设置为相同的值

        会使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto

 

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{width: 800px;height:300px;   border:20px cyan solid;}.inner{width:400px;height: 300px;margin: auto;background-color: blue;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

这里可以换成margin：0 outo

         .inner{width:200px;margin: 0 auto;height: 300px;background-color: blue;}

相关文章：

前端学习DAY28（水平）

元素水平方向的布局 元素在其父元素中水平方向的位置有以下几个属性共同决定 margin-left border-left padding-left width padding-right border-right margin-right 一个元素在其父元素中&#xff0c;水平布局必须要满足以下的等式 margin-left border-left …...

编程日记 2024/12/29 11:43:48

【MyBatis】day01搭建MyBatis框架

目录 第一章 初识Mybatis 第二章 搭建Mybatis框架 第三章 Mybatis核心配置详解【mybatis-config.xml】 第一章 初识Mybatis 1.1 框架概述 生活中“框架” 买房子 笔记本电脑 程序中框架【代码半成品】 Mybatis框架&#xff1a;持久化层框架【dao层】 SpringMVC框架&…...

编程日记 2024/12/29 11:42:47

yolov7算法及其改进

yolov7算法及其改进 1、YOLOV7简介2、ELAN架构设计2.1、Partial Residual Networks2.1.1、Masked Residual Layer2.1.2、Asymmetric Residual Layer 2.2、Cross Stage Partial Networks2.2.1、Cross stage partial operation2.2.2、Gradient flow truncate operation 2.3、Effi…...

编程日记 2024/12/29 11:39:44

spring cloud微服务-OpenFeign的使用

OpenFeign的使用 openFeign的作用是服务间的远程调用 &#xff0c;比如通过OpenFeign可以实现调用远程服务。 已经有了LoadBalancer为什么还要用openFeign? 在微服务架构中&#xff0c;LoadBalancer和OpenFeign虽然都提供了服务间调用的能力&#xff0c;但它们的设计目的和…...

编程日记 2024/12/29 11:38:43

【汇编】关于函数调用过程的若干问题

1. 为什么需要bp指针&#xff1f; 因为bp是栈帧的起始地址&#xff0c;函数内的局部栈变量&#xff0c;采用相对bp的内存寻址。不能相对于sp&#xff0c;sp是一直在变的。 2. 函数调用过程&#xff1f; 函数开始&#xff0c;先压栈bp&#xff0c;保存父函数栈底指针bp&#…...

编程日记 2024/12/29 11:37:42

针对Kali 系统进行分区设置

手动设置分区 Kali 安装之腾讯云经验遇到坑_腾讯云安装kali-CSDN博客 安装过程中的几处关键点,文字总结如下&#xff1a; ①分区--手动 ②是否创建空的分区表 ---yes ③选择---创建一个新的分区 ④大小--默认-----主分区 ⑤分区类型----系统&#xff09;一个逻辑分区 ⑥是否…...

编程日记 2024/12/29 11:32:37

C语言简单测试总结

前言 在学C语言之前回顾一下C中的一些知识.选用的是中国大学MOOC中C程序设计(面向对象进阶)中的C语言水平评估测试题. 题目 ​The keyword "unsigned" can modify the keyword [ B ] A.signed B.long C.long double D.float题解:unsigned是无符号的意识,通常在…...

编程日记 2024/12/29 11:30:35

Android OpenGl（二） Shader

一、Shader 1、什么是Shader&#xff0c;为什么要使用Shder &#xff08;1&#xff09;shader运行在gpu上的小程序 &#xff08;2&#xff09;以前使用固定管线&#xff0c;但缺点是灵活度不够&#xff0c;无法满足复杂需求&#xff0c;为了解决固定管线的缺点&#xff0c;出…...

编程日记 2024/12/29 11:23:29

DevOps实战：用Kubernetes和Argo打造自动化CI/CD流程（1）

DevOps实战&#xff1a;用Kubernetes和Argo打造自动化CI/CD流程&#xff08;1&#xff09; 架构 架构图 本设计方案的目标是在一台阿里云ECS服务器上搭建一个轻量级的Kubernetes服务k3s节点&#xff0c;并基于Argo搭建一套完整的DevOps CI/CD服务平台&#xff0c;包括Argo CD…...

编程日记 2024/12/29 11:19:26

【已解决】“Content-Security-Policy”头缺失

1、作用 简称CSP&#xff0c;意为内容安全策略&#xff0c;通过设置约束指定可信的内容来源&#xff0c;降低异源文件攻击&#xff0c;例如&#xff1a;js/css/image等 2、相关设置值 指令名 demo 说明 default-src self cdn.example.com 默认策略,可以应用于js文件/图片…...

编程日记 2024/12/29 11:17:24

win系统B站播放8k视频启用HEVC编码

下载HEVC插件 点击 HEVC Video Extension 2.2.20.0 latest downloads&#xff0c;根据教程下载安装 安装 Random User-Agent 点击 Random User-Agent 安装 配置 Random User-Agent 在youtube中会导致视频无法播放&#xff0c;我选择直接屏蔽了 B站设置...

编程日记 2024/12/29 11:14:21

快速理解24种设计模式

简单工厂模式 建立产品接口类&#xff0c;规定好要实现方法。 建立工厂类&#xff0c;根据传入的参数&#xff0c;实例化所需的类&#xff0c;实例化的类必须实现指定的产品类接口 创建型 单例模式Singleton 保证一个类只有一个实例&#xff0c;并提供一个访问他它的全局…...

编程日记 2024/12/29 11:11:19

为什么深度学习和神经网络要使用 GPU？

为什么深度学习和神经网络要使用 GPU&#xff1f; 本篇文章的目标是帮助初学者了解 CUDA 是什么&#xff0c;以及它如何与 PyTorch 配合使用&#xff0c;更重要的是&#xff0c;我们为何在神经网络编程中使用 GPU。 图形处理单元 (GPU) 要了解 CUDA&#xff0c;我们需要对图…...

编程日记 2024/12/29 11:09:17

Yocto 项目中的交叉编译：原理与实例

Yocto 项目是一个强大的工具集&#xff0c;它专注于为嵌入式系统生成定制的 Linux 发行版。交叉编译在 Yocto 项目中扮演着核心角色&#xff0c;它使得开发者能够在功能强大的宿主机上构建适用于资源受限目标设备的软件系统。这篇文章将从运行原理、实际案例和工具链组成等角度…...

编程日记 2024/12/29 11:03:09

Python入门：7.Pythond的内置容器

引言 Python 提供了强大的内置容器&#xff08;container&#xff09;类型&#xff0c;用于存储和操作数据。容器是 Python 数据结构的核心部分&#xff0c;理解它们对于写出高效、可读的代码至关重要。在这篇博客中&#xff0c;我们将详细介绍 Python 的五种主要内置容器&…...

编程日记 2024/12/29 10:59:05

sqlserver镜像设置

本案例是双机热备&#xff0c;只设置主体服务器&#xff08;主&#xff09;和镜像服务器&#xff08;从&#xff09;&#xff0c;不设置见证服务器 设置镜像前先检查是否启用了 主从服务器数据库的 TCP/IP协议 和 RemoteDAC &#xff08;1&#xff09;打开SQL Server配置管理器…...

编程日记 2024/12/29 10:53:00

Pandas04

Pandas01 Pandas02 Pandas03 文章目录 内容回顾1 数据的合并和变形1.1 df.append (了解)1.2 pd.concat1.3 merge 连接 类似于SQL的join1.4 join (了解) 2 变形2.1 转置2.2 透视表 3 MatPlotLib数据可视化3.1 MatPlotLib API 套路 &为什么要可视化3.2 单变量可视化3.3 双变量…...

编程日记 2024/12/29 10:51:58

农历节日倒计时：基于Python的公历与农历日期转换及节日查询小程序（升级版）

农历节日倒计时&#xff1a;基于Python的公历与农历日期转换及节日查询小程序升级版 调整的功能 上一个小程序只是能计算当年的农历节日的间隔时间&#xff0c;那么这次修改一下&#xff0c;任意年份的农历节日都可以&#xff0c;并且能输出农历节日对应的阳历日期&#xff0…...

编程日记 2024/12/29 10:49:55

c语言中void关键字的含义和用法

在 C 语言中&#xff0c;void 是一个特殊的关键字&#xff0c;主要有以下几个用途&#xff1a; 1. 表示函数没有返回值 当一个函数不需要返回任何值时&#xff0c;可以将其返回类型声明为 void。 #include <stdio.h>void printMessage() {printf("Hello, World!\…...

编程日记 2024/12/29 10:48:54

安卓音频之dumpsys audio

目录 概述 详述 dumpsys audio 1、音频服务生命周期的事件日志 2、音频焦点事件日志 3、音频流音量信息 4、音量组和设备的相关信息 5、铃声模式 6、音频路由 7、其他状态信息 8、播放活动监控信息 9、录音活动记录 10、AudioDeviceBroker 的记录 11、音效&#…...

编程日记 2024/12/29 10:47:53

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/9/11 11:00:29

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/8/25 20:32:49

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/9/8 2:13:23

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2025/9/13 23:29:05

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/8/27 10:42:43

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/7/9 6:12:46

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/9/12 15:03:05

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2025/9/14 16:27:40

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/9/16 19:44:37

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

编程新知 2025/8/25 16:54:39