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

前端学习DAY28（水平）

news 2026/2/10 1:33:22

元素水平方向的布局

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

        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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2026/2/7 20:40:53

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

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

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

编程新知 2026/2/1 5:24:17

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2026/1/23 10:51:19

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2026/2/5 4:18:48

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

编程新知 2025/11/26 7:13:37

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...

编程新知 2025/11/29 18:42:46

aardio 自动识别验证码输入

技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”&#xff0c;于是尝试整合图像识别与网页自动化技术&#xff0c;完成了这套模拟登录流程。核心思路是&#xff1a;截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...

编程新知 2026/2/7 7:52:16

Java多线程实现之Runnable接口深度解析

Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...

编程新知 2025/9/15 15:07:19