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

前端学习DAY28（水平）

news 2026/2/10 3:34:02

元素水平方向的布局

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

        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

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2026/1/26 14:19:52

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/2/9 1:38:05

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2026/2/7 15:39:49

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

深度学习水论文：mamba＋图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

编程新知 2026/1/26 4:52:47

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

编程新知 2026/2/5 4:20:53

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

编程新知 2026/1/22 13:43:14

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤：1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现：客户端实现：4. Axi…...

编程新知 2025/10/29 4:33:36