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

前端学习DAY28（水平）

news 2026/3/30 23:22:10

元素水平方向的布局

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

        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

用Multisim 14.0和AD620/OP07，手把手教你搭建一个能用的简易心电放大电路

从零开始构建心电放大电路&#xff1a;Multisim 14.0与AD620/OP07实战指南 在生物医学信号处理领域&#xff0c;心电信号采集一直是极具挑战性的课题。想象一下&#xff0c;当医生将电极贴在你胸口时&#xff0c;那些微弱的电信号是如何被放大并转化为清晰波形图的&#xff1f;…...

编程新知 2026/3/30 23:20:29

COMSOL激光烧蚀激光融覆选区激光融化 激光直接沉积过程中，快速熔化凝固和多组分粉末的加入导...

COMSOL激光烧蚀激光融覆选区激光融化 激光直接沉积过程中&#xff0c;快速熔化凝固和多组分粉末的加入导致了熔池中复杂的输运现象。 热行为对凝固组织和性能有显著影响。 通过三维数值模型来模拟在316L上直接激光沉积过程中的传热、流体流动、凝固过程。 通过瞬态热分布可以获…...

编程新知 2026/3/30 23:08:17

ES10（ES2019）新特性完整指南

ES10&#xff08;ES2019&#xff09;新特性发布时间&#xff1a;2019年6月 ES10 新增了数组扁平化、对象转换、字符串修剪等实用方法。1. Array.prototype.flat() 将嵌套数组"拉平"&#xff0c;返回一个新数组&#xff1a; 基本用法 [1, 2, [3, 4]].flat(); //…...

编程新知 2026/3/30 22:54:05

Syncfusion Dashboard部署指南：从开发到生产环境的完整流程

Syncfusion Dashboard部署指南&#xff1a;从开发到生产环境的完整流程 【免费下载链接】project_syncfusion_dashboard This is a code repository for the corresponding YouTube video. In this tutorial we are going to build and deploy a an admin dashboard app using …...

编程新知 2026/3/30 22:52:04

避坑指南：OpenClaw对接nanobot镜像的3大常见错误与解决方法

避坑指南&#xff1a;OpenClaw对接nanobot镜像的3大常见错误与解决方法 1. 为什么需要这份避坑指南&#xff1f; 上周我在本地部署nanobot镜像时&#xff0c;原本以为半小时就能搞定的事情&#xff0c;硬是折腾了整整一个下午。这个超轻量级的OpenClaw镜像确实很吸引人——内…...

编程新知 2026/3/30 20:56:53

Java并发包中锁机制的底层实现原理剖析

实现java并发包中的锁机制底层主要有两种方式&#xff1a;1.基于jvm的monitor机制和对象头中的mark&#xff0c;synchronized关键字 word实现并通过锁升级(偏向锁→轻量级锁→重量级锁)优化性能&#xff1b;2.java.util.concurrent.locks包中的锁基于abstractquedsynchronizer&…...

编程新知 2026/3/30 20:38:40

SD-WebUI Cleaner 终极指南：AI图像清理与对象移除完整教程

SD-WebUI Cleaner 终极指南&#xff1a;AI图像清理与对象移除完整教程 【免费下载链接】sd-webui-cleaner An extension for stable-diffusion-webui to remove any object. 项目地址: https://gitcode.com/gh_mirrors/sd/sd-webui-cleaner 你是否曾经想要从照片中移除不…...

编程新知 2026/3/30 20:34:39

反线性学习—— 不是“按顺序学完教材”，是“围绕目标把知识长出来”

反线性学习—— 不是“按顺序学完教材”&#xff0c;是“围绕目标把知识长出来”在传统的学习习惯中&#xff0c;我们往往有一种 “进度条强迫症”&#xff1a;只要书看完了、课听完了、笔记记满了&#xff0c;就觉得自己“学完了”。 但现实往往很残酷&#xff1a;当你合上书本…...

编程新知 2026/3/30 19:56:22

OpenClaw节日应用：GLM-4.7-Flash驱动春节祝福邮件批量定制与发送

OpenClaw节日应用&#xff1a;GLM-4.7-Flash驱动春节祝福邮件批量定制与发送 1. 为什么需要自动化节日邮件&#xff1f; 每年春节前&#xff0c;我都会陷入同样的困境——需要给200多位合作伙伴发送祝福邮件。手动操作意味着&#xff1a;反复复制粘贴内容、检查收件人姓名、调…...

编程新知 2026/3/30 19:56:22

如何快速上手VNote：跨平台Markdown笔记软件的完整指南

如何快速上手VNote&#xff1a;跨平台Markdown笔记软件的完整指南 【免费下载链接】vnote A pleasant note-taking platform. 项目地址: https://gitcode.com/gh_mirrors/vn/vnote VNote是一款基于Qt开发的免费开源Markdown笔记应用&#xff0c;专为追求高效编辑体验的用…...

编程新知 2026/3/30 18:06:35