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

re:从0开始的CSS学习之路 9. 盒子水平布局

news 文章来源：https://blog.csdn.net/qq_40394751/article/details/136091638 2024/9/20 7:50:25

0. 写在前面

过年也不能停止学习，一停下就难以为继，实属不应
在这里插入图片描述

1. 盒子的水平宽度

当一个盒子出现在另一个盒子的内容区时，该盒子的水平宽度“必须”等于父元素内容区的宽度
盒子水平宽度：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

若强行设置盒子的水平宽度不等于父元素内容区的宽度时，这种情况称为“过度约束”
若发生过度约束时，浏览器会按照从左到右的顺序尽可能的满足条件，若不满足则自动调整margin-right使等式成立
（注：现在好像不能在浏览器中通过F12选元素查看到浏览器的自动调整，不知道是为啥）

margin-left和margin-right的auto属性：让浏览器自动设置左右外边距
margin-left和margin-right的值设置为auto后，浏览器会根据上述公式平均分配左右外边距

盒子的水平居中
width: 100px;
margin: 0 auto;
注意：必须指明宽度width，否则默认值为auto，浏览器会默认使用width进行内容区的填充

示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Box horizontal layout</title>.father {width: 1200px;height: 200px;border: 5px solid red;}.son {width: 200px;height: 200px;background-color: #c7decc;margin: 0 auto;}
</head><body><div class="father"><div class="son"></div></div>
</body></html>

相关文章：

re:从0开始的CSS学习之路 9. 盒子水平布局

0. 写在前面 过年也不能停止学习&#xff0c;一停下就难以为继&#xff0c;实属不应 1. 盒子的水平宽度 当一个盒子出现在另一个盒子的内容区时&#xff0c;该盒子的水平宽度“必须”等于父元素内容区的宽度 盒子水平宽度&#xff1a; margin-left border-left padding-lef…...

编程日记 2024/2/12 7:10:43

【MySQL基础】：深入探索DQL数据库查询语言的精髓（上）

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; MySQL从入门到进阶 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. DQL1.1 基本语法1.2 基础查询1.3 条件查询1.3 聚合函数 &#x1f324;️ 全篇…...

编程日记 2024/2/12 7:08:41

JavaScript实现轮播图方法

效果图 先来看下效果图&#xff0c;嫌麻烦就不用具体图片来实现了&#xff0c;主要是理清思路。&#xff08;自动轮播&#xff0c;左右按钮切换图片&#xff0c;小圆点切换图片&#xff0c;鼠标移入暂停轮播&#xff0c;鼠标移出继续轮播&#xff09; HTML 首先是html内容&am…...

编程日记 2024/2/12 7:04:36

Web课程学习笔记--jsonp的原理与简单实现

jsonp的原理与简单实现 原理 由于同源策略的限制&#xff0c;XmlHttpRequest只允许请求当前源&#xff08;域名、协议、端口&#xff09;的资源&#xff0c;为了实现跨域请求&#xff0c;可以通过script标签实现跨域请求&#xff0c;然后在服务端输出JSON数据并执行回调函数&…...

编程日记 2024/2/12 6:58:30

第78讲 修改密码

系统管理实现 修改密码实现 前端 modifyPassword.vue&#xff1a; <template><el-card><el-formref"formRef":model"form":rules"rules"label-width"150px"><el-form-item label"用户名&#xff1a;&quo…...

编程日记 2024/2/12 6:57:29

Docker 容器网络：C++ 客户端 — 服务器应用程序。

一、说明 在下面的文章中&#xff0c; 将向您概述 docker 容器之间的通信。docker 通信的验证将通过运行 C 客户端-服务器应用程序和标准“ping”命令来执行。将构建并运行两个单独的 Docker 映像。 由于我会关注 docker 网络方面&#xff0c;因此不会提供 C 详细信息。…...

编程日记 2024/2/12 6:54:24

Android 识别车牌信息

打开我们心爱的Android Studio 导入需要的资源 gradle //开源车牌识别安卓SDK库implementation("com.github.HyperInspire:hyperlpr3-android-sdk:1.0.3")button.setOnClickListener(v -> {Log.d("Test", "");try (InputStream file getAs…...

编程日记 2024/2/12 6:52:22

C#在窗体正中输出文字以及输出文字的画刷使用

为了在窗体正中输出文字&#xff0c;需要获得输出文字区域的宽和高&#xff0c;这使用MeasureString方法&#xff0c;方法返回值为Size类型&#xff1b; 然后计算输出的起点的x和y坐标&#xff0c;就可以输出了&#xff1b; using System; using System.Collections.Generic; …...

编程日记 2024/2/12 6:50:20

二十、K8S-1-权限管理RBAC详解

目录 k8s RBAC 权限管理详解 一、简介 二、用户分类 1、普通用户 2、ServiceAccount 三、k8s角色&角色绑定 1、授权介绍&#xff1a; 1.1 定义角色&#xff1a; 1.2 绑定角色&#xff1a; 1.3主体&#xff08;subject&#xff09; 2、角色&#xff08;Role和Cluster…...

编程日记 2024/2/12 6:49:19

【PTA|期末复习|编程题】数组相关编程题（一）

目录 7-1 乘法口诀数列 (20分) 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 样例解释&#xff1a; 代码 7-2 矩阵列平移(20分) 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; …...

编程日记 2024/2/12 6:48:18

[office] 怎么在Excel2003菜单栏自定义一个选项卡 #其他#微信#知识分享

怎么在Excel2003菜单栏自定义一个选项卡 怎么在Excel2003菜单栏自定义一个选项卡 ①启动Excel2003&#xff0c;单击菜单栏--工具--自定义。 ②在自定义界面&#xff0c;我们单击命令标签&#xff0c;在类别中选择新菜单&#xff0c;鼠标左键按住新菜单&#xff0c;拖放到菜单栏…...

编程日记 2024/2/12 6:38:07

面试 JavaScript 框架八股文十问十答第六期

面试 JavaScript 框架八股文十问十答第六期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;use strict是什么…...

编程日记 2024/2/12 6:37:05

【Web】小白友好的Java内存马基础学习笔记

目录 简介 文件马与内存马的比较 文件马原理 内存马原理 内存马使用场景 内存马分类 内存马注入方式 这篇文章主要是概念性的&#xff0c;具体技术细节不做探究&#xff0c;重点在祛魅。 简介 内存马&#xff08;Memory Shellcode&#xff09;是一种恶意攻击技术&…...

编程日记 2024/2/12 6:33:00

Rust猜数字游戏

Rust进阶&#xff1a;猜数字游戏 Rust是一门现代的系统级编程语言&#xff0c;注重内存安全、并发性能以及表达力。在这篇博客中&#xff0c;我们将深入介绍一个更加复杂的猜数字游戏代码&#xff0c;展示Rust语言的一些高级特性。 代码示例 以下是一个升级版的Rust猜数字游…...

编程日记 2024/2/12 6:31:59

.gitlab-ci.yml文件参数配置和使用

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2024/2/12 6:30:58

Go语言从基础到高级-目录

一、编程入门和Go语言简介 什么是编程和为什么要学习编程计算机编程的基本概念Go语言简介为什么选择Go语言 二、设置Go语言开发环境 如何安装Go语言设置环境变量Go语言的工作空间配置 三、Go语言基础 Hello, World!初体验变量和常量数据类型&#xff08;整数、浮点数、字符…...

编程日记 2024/2/12 6:27:53

Linux CentOS stream 9 alias

alias命令在Linux中用于创建命令别名。它允许用户为常用的命令或命令组合创建短而易记的别名，从而提高工作效率。 alias命令与windows中的快捷方式相同，执行别名时，终端解释器就进行查询与转换，进而执行原来的完整命令。 熟练使用alias命令可以使我们将一长串命令或者一些…...

编程日记 2024/2/12 6:26:52

WebSocketServer+redis实时更新页面数据

redis 实现发布订阅功能具体实现_redis convertandsend-CSDN博客 主要看上面这个 使用redis做websocket分布式消息推送服务_websocket redis-CSDN博客 ClassCastException: java.lang.String cannot be cast to com.alibaba.fastjson.JSONObject 的解决办法_java.lang.class…...

编程日记 2024/2/12 6:25:51

快速掌握Vue.js框架：从入门到实战

一、引言 Vue.js，作为一款广受欢迎的渐进式JavaScript框架，以其轻量级、易用性和高效性在前端开发领域占据了一席之地。Vue.js遵循MVVM（Model-View-ViewModel）设计模式，它通过双向数据绑定机制简化了开发者对用户界面与底层数据模型之间关系的处理，使得构建现代Web应用变…...

编程日记 2024/2/12 6:22:48

###C语言程序设计-----C语言学习（11）#数据的存储和基本数据类型

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步。 一. 数据的存储 1.整型数据的存储 计算机处理的所有信息都以二进制形式表示…...

编程日记 2024/2/12 6:21:48

机器学习案例1：利用 Python 将语音转换为文本

目录 内容简介 基本环境配置 Python库安装 麦克风语音识别 音频文件的语音识别 长音频源语音识别 内容简介 语音识别是机器或程序识别口语中的单词和短语并将其转换为文本信息的能力。 大多数对于语音识别技术的应用场景就是Siri、Cortana和Google Assistant等个人助理，…...

编程日记 2024/2/12 6:19:45

杨辉三角的变形（数学）

题目 import java.util.Scanner;public class Main {public static void main(String[] args) { // 1 // 1 1 1 // 1 2 3 2 1 // 1 3 6 7 6 3 1 // 1 4 10 16 19 16 10 4 1Scanner sc new Scanner(System.in);int n sc.nextInt();int[][] res new int[n1][2*n];for(i…...

编程日记 2024/2/12 6:18:44

YOLOv5改进 | 融合改进篇 | 华为VanillaNet + BiFPN突破涨点极限

一、本文介绍 本文给大家带来的改进机制是华为VanillaNet主干配合BiFPN实现融合涨点，这个主干是一种注重极简主义和效率的神经网络我也将其进行了实验， 其中的BiFPN不用介绍了从其发布到现在一直是比较热门的改进机制，其主要思想是通过多层级的特征金字塔和双向信息传递来提…...

编程日记 2024/2/12 6:16:42

C++初阶篇----新手进村

目录 一、什么是C二、C关键字三、命名空间3.1命名空间的定义3.2命名空间的使用 四、C输入和输出五、缺省参数5.1缺省参数的概念5.2缺省参数的分类 六、函数重载6.1函数重载的概念6.2函数重载的原理----名字修饰 七、引用7.1引用概念7.2引用特性7.3常引用7.4引用的使用7.5传值、…...

编程日记 2024/2/12 6:15:40

假期刷题打卡--Day26

1、MT1212乘法表 请编写一个简单程序&#xff0c;输出九九乘法表。输入n&#xff0c;就输出乘法表到n的地方。 格式 输入格式&#xff1a; 输入整型 输出格式&#xff1a; 输出整型。形式如&#xff1a;1*11 样例 1 输入&#xff1a; 5输出&#xff1a; 1*11 2*12 …...

编程日记 2024/2/12 6:12:37

159基于matlab的基于密度的噪声应用空间聚类(DBSCAN)算法对点进行聚类

基于matlab的基于密度的噪声应用空间聚类(DBSCAN)算法对点进行聚类&#xff0c;聚类结果效果好&#xff0c;DBSCAN不要求我们指定集群的数量&#xff0c;避免了异常值&#xff0c;并且在任意形状和大小的集群中工作得非常好。它没有质心&#xff0c;聚类簇是通过将相邻的点连接…...

编程日记 2024/2/12 6:11:36

CVPR 2023: GANmouflage: 3D Object Nondetection with Texture Fields

我们使用以下6个分类标准对本文的研究选题进行分析： 1. 伪装类型: 自然伪装: 此类别关注受自然界伪装策略启发或直接复制的研究。这包括研究动物的体色、图案和纹理，为人工伪装的设计提供信息，通常以生物学真实性和有效性为目标 (例如，参考文献 [12, 19, 30, 48])。人工伪…...

编程日记 2024/2/12 6:03:26

【ASP.NET Core 基础知识】--部署和维护--日志记录和错误处理

一、日志记录(Logging) 1.1 日志记录的概念 日志记录是一种记录系统运行状态、活动和事件的重要机制。在软件开发和系统管理中&#xff0c;日志记录扮演着关键角色&#xff0c;用于追踪应用程序的执行过程、监视系统的健康状况、诊断问题和安全审计等。在ASP.NET Core等现代W…...

编程日记 2024/2/12 6:02:25

docker命令梳理

docker镜像操作 //从硬盘加入镜像 docker load -i xxx.tar //基于dockerfile构建镜像 docker build -t xxx:xxx . //查看镜像 docker images //镜像改名 docker tag //docker镜像提交到容器 //docker commit [-m“描述信息”] [-a“作者”]容器id 镜像名[:标签名] docker镜像仓…...

编程日记 2024/2/12 6:00:23

彩虹系统7.0免授权+精美WAP端模板源码

最低配置环境 PHP7.2 1、上传源码到网站根目录&#xff0c;导入数据库文件 2、修改数据库配置文件&#xff1a;/config.php 3、后台&#xff1a;/admin 账号&#xff1a; 4、前台用户&#xff1a;123456 密码&#xff1a;1234561...

编程日记 2024/2/12 5:57:19

linux系统haproxy负载均衡工具的介绍以及使用

haproxy 概述haproxy的特点haproxy算法haproxy做四层负载均衡haproxy做七层负载均衡 概述 ha-proxy是一款高性能的负载均衡软件。其专注于负载均衡这一些事情&#xff0c;因此与nginx比起来&#xff0c;负载均衡做的更好haproxy---主要是做负载均衡的7层&#xff0c;也可以做4…...

编程日记 2024/2/12 5:55:16

七、Nacos源码系列：Nacos服务发现

目录 一、服务发现 二、getServices()&#xff1a;获取服务列表 2.1、获取服务列表 2.2、总结图 三、getInstances(serviceId)&#xff1a;获取服务实例列表 3.1、从缓存中获取服务信息 3.2、缓存为空&#xff0c;执行订阅服务 3.2.1、调度更新&#xff0c;往线程池中…...

编程日记 2024/2/12 5:54:15

Vue源码系列讲解——模板编译篇【一】(综述)

目录 1. 前言 2. 什么是模板编译 3. 整体渲染流程 4. 模板编译内部流程 4.1 抽象语法树AST 4.2 具体流程 5. 总结 1. 前言 在前几篇文章中&#xff0c;我们介绍了Vue中的虚拟DOM以及虚拟DOM的patch(DOM-Diff)过程&#xff0c;而虚拟DOM存在的必要条件是得先有VNode&…...

编程日记 2024/2/12 5:50:12

【机器学习】数据清洗之识别异常点

&#x1f388;个人主页&#xff1a;甜美的江 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进步…...

编程日记 2024/2/12 5:49:11

MacOS 制作 TF 卡/ U 盘镜像

最近有张老的 TF 卡没办法直接拷贝里面的数据&#xff0c;于是打算利用 dd 工具直接全卡拷贝为镜像再分析里面的数据 在终端中&#xff0c;输入以下命令来列出所有磁盘设备&#xff1a; diskutil list这将显示Mac上所有的磁盘设备。你需要找到TF卡对应的设备&#xff0c;它通…...

编程日记 2024/2/12 5:46:08

怎么用postman调用webservice(反推SoapUI)

<soapenv:Envelope xmlns:soapenv“http://schemas.xmlsoap.org/soap/envelope/” xmlns:lis“LisDataTrasen”> soapenv:Header/ soapenv:Body lis:Test lis:test111111111</lis:test> </lis:Test> </soapenv:Body> </soapenv:Envelope> Conten…...

编程日记 2024/2/12 5:42:03

【开源】JAVA+Vue.js实现衣物搭配系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 衣物档案模块2.2 衣物搭配模块2.3 衣物收藏模块 三、系统设计3.1 用例设计3.2 E-R图设计3.3 数据库设计3.3.1 衣物档案表3.3.2 衣物搭配表3.3.3 衣物收藏表 四、系统实现4.1 登录页4.2 衣物档案模块4.3 衣物搭配模块4.4…...

编程日记 2024/2/12 5:40:00

【Flask + AI】接入CHATGLM API 实现翻译接口

【Flask AI】接入CHATGLM API 实现翻译接口 最近的项目中&#xff0c;需要加一个翻译功能&#xff0c;正好chatglm4发布了&#xff0c;于是决定着手用它实现。 https://chatglm.cn 准备 首先&#xff0c;在chatglm开发者中心申请api key&#xff0c;这里不再赘述 其次&…...

编程日记 2024/2/12 5:37:58

并发事务带来的问题及解决方法

引言 在数据库系统中&#xff0c;事务是指一组操作被视为一个逻辑单元&#xff0c;要么全部执行成功&#xff0c;要么全部不执行&#xff0c;保证数据库的一致性和完整性。而并发事务则是指多个事务同时执行的情况。虽然并发事务能够提高系统的性能和吞吐量&#xff0c;但也会…...

编程日记 2024/2/12 5:35:45

CRNN介绍：用于识别图中文本的深度学习模型

CRNN&#xff1a;用于识别图中文本的深度学习模型 CRNN介绍&#xff1a;用于识别图中文本的深度学习模型CRNN的结构组成部分工作原理 CRNN结构分析卷积层&#xff08;Convolutional Layers&#xff09;递归层&#xff08;Recurrent Layers&#xff09;转录层&#xff08;Transc…...

编程日记 2024/2/12 5:34:44

机器人运动学林沛群——变换矩阵

对于仅有移动&#xff0c;由上图可知&#xff1a; A P B P A P B o r g ^AP^BP^AP_{B org} APBPAPBorg​ 对于仅有转动&#xff0c;可得&#xff1a; A P B A R B P ^AP^A_BR^BP APBA​RBP 将转动与移动混合后&#xff0c;可得&#xff1a; 一个例子 在向量中&#xff…...

编程日记 2024/2/12 5:33:43

阿里云增加数据库访问白名单

阿里云增加数据库访问白名单 概况 我们希望在外网访问数据库时&#xff0c;可能会遇到无法连接的问题&#xff0c;这有可能是被拦截了。这时就需要去查看自己的ip有没有在白名单里面&#xff0c;没有的话就把ip加入到白名单。 路径 阿里云控制台-搜索RDS-进入RDS管理控制台…...

编程日记 2024/2/12 5:32:40

Rust基础拾遗--辅助功能

Rust基础拾遗 前言1.错误处理1.1 panic为什么是 Result 2. create与模块3. 宏4. 不安全代码5. 外部函数 前言 通过Rust程序设计-第二版笔记的形式对Rust相关重点知识进行汇总&#xff0c;读者通读此系列文章就可以轻松的把该语言基础捡起来。 1.错误处理 Rust 中的两类错误处理…...

编程日记 2024/2/12 5:30:38

【数据结构】双向链表(链表实现+测试+原码)

前言 在双向链表之前&#xff0c;如果需要查看单链表来复习一下&#xff0c;链接在这里&#xff1a; http://t.csdnimg.cn/Ib5qS 1.双向链表 1.1 链表的分类 实际中链表的结构非常多样&#xff0c;以下情况组合起来就有8种链表结构&#xff1a; 1.1.1 单向或者双向 1.1.2 …...

编程日记 2024/2/12 5:27:35

ChatGPT 3.5与4.0：深入解析技术进步与性能提升的关键数据

大家好&#xff0c;欢迎来到我的博客&#xff01;今天我们将详细比较两个引人注目的ChatGPT版本——3.5和4.0&#xff0c;通过一些关键数据来深入解析它们之间的差异以及4.0版本的技术进步。 1. 模型规模与参数 ChatGPT 3.5&#xff1a; 参数数量&#xff1a;约1.7亿个模型层数…...

编程日记 2024/2/12 5:26:34

前端JavaScript篇之ajax、axios、fetch的区别

目录 ajax、axios、fetch的区别AjaxAxiosFetch总结注意 ajax、axios、fetch的区别 在Web开发中&#xff0c;ajax、axios和fetch都是用于与服务器进行异步通信的技术&#xff0c;但它们在实现方式和功能上有所不同。 Ajax 定义与特点&#xff1a;Ajax是一种在无需重新加载整个…...

编程日记 2024/2/12 5:25:33

【PyTorch][chapter 15][李宏毅深度学习][Neighbor Embedding-LLE]

前言&#xff1a; 前面讲的都是线性降维&#xff0c;本篇主要讨论一下非线性降维. 流形学习&#xff08;mainfold learning&#xff09;是一类借鉴了拓扑流行概念的降维方法. 如上图,欧式距离上面 A 点跟C点更近&#xff0c;距离B 点较远 但是从图形拓扑结构来看&#xff0c; …...

编程日记 2024/2/12 5:20:27

在JSP中实现JAVABEAN

在JSP中实现JAVABEAN 问题陈述 创建Web应用程序以连接数据库并检索作者名、地址、城市、州及邮政编码等与作者的详细信息。JavaBean组件应接受作者ID、驱动程序名及URL作为参数。信息要从authors表中检索。 解决方案 要解决上述问题，需要执行以下任务： 创建Web应用程序。创…...

编程日记 2024/2/12 5:18:24

智能优化算法 | Matlab实现飞蛾扑火(MFO)（内含完整源码）

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 智能优化算法 | Matlab实现飞蛾扑火(MFO)（内含完整源码） 源码设计 %%%% clear all clc SearchAgents_no=100; % Number of search ag...

编程日记 2024/2/12 5:17:23

LSF 主机状态 unreach 分析

在LSF集群运行过程中&#xff0c;有主机状态变为 unreach。熟悉LSF的朋友都知道主机状态为 unreach 表示主机上的 SBD 服务中断服务了&#xff0c;但其它服务 LIM 和 RES 还在正常运行。 影响分析 那么主机上的 SBD 服务中断的影响是什么呢&#xff1f; 我们需要先明白 SBD …...

编程日记 2024/2/12 5:04:10