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

前端学习DAY28（水平）

news 2026/2/10 1:49:39

元素水平方向的布局

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

        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

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2026/1/22 15:36:10

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2026/2/1 22:23:58

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2026/1/31 6:53:51

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2026/1/26 13:29:00

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

编程新知 2025/9/18 22:43:13

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2026/1/20 13:43:41