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

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

news 2026/5/19 2:42:48

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

MATLAB Robotics Toolbox：从基础旋转变换到机器人运动学建模

1. 初识MATLAB Robotics Toolbox 第一次接触MATLAB Robotics Toolbox时&#xff0c;我完全被它强大的功能震撼到了。这个工具箱就像是为机器人工程师量身定制的瑞士军刀&#xff0c;从最基本的旋转变换到复杂的运动学建模&#xff0c;应有尽有。记得当时我正在做一个机械臂控制…...

编程新知 2026/5/19 1:47:54

终极免费开源项目管理指南：如何用GanttProject高效规划复杂项目？

终极免费开源项目管理指南&#xff1a;如何用GanttProject高效规划复杂项目&#xff1f; 【免费下载链接】ganttproject Official GanttProject repository. 项目地址: https://gitcode.com/gh_mirrors/ga/ganttproject 想要免费、开源且功能强大的项目管理工具吗&#…...

编程新知 2026/5/19 0:52:25

数字电路模块化设计的艺术：Logisim-evolution中的层次化抽象实践

数字电路模块化设计的艺术&#xff1a;Logisim-evolution中的层次化抽象实践 【免费下载链接】logisim-evolution Digital logic design tool and simulator 项目地址: https://gitcode.com/gh_mirrors/lo/logisim-evolution 在数字电路设计的世界里&#xff0c;复杂系统…...

编程新知 2026/5/19 0:37:13

为什么你的Linux桌面还缺少一个触手可及的OCR助手？

为什么你的Linux桌面还缺少一个触手可及的OCR助手&#xff1f; 【免费下载链接】Umi-OCR OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/批量导入图片&#xff0c;PDF文档识别&#xff0c;排除水印/页眉页脚&#xff0c;扫描/生成二维码。内置多国语言库…...

编程新知 2026/5/19 0:13:55

2026年靠谱物联网供应商榜

作为深耕物联网领域五年的工程师&#xff0c;我见过太多“看起来很美好”的技术方案——设备接入率低、数据延迟高、多协议适配困难&#xff0c;尤其当项目涉及复杂环境时&#xff0c;这些问题会被无限放大。我们团队在实践中发现&#xff0c;许多物联网平台在核心算法层面缺乏…...

编程新知 2026/5/18 22:26:22

DLSS Swapper终极指南：一键管理游戏图形增强文件，释放显卡全部性能

DLSS Swapper终极指南&#xff1a;一键管理游戏图形增强文件&#xff0c;释放显卡全部性能 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper DLSS Swapper是一款专为游戏玩家设计的智能图形增强文件管理工具&#xff0c;…...

编程新知 2026/5/18 22:09:05

为什么你的NotebookLM总“读不懂”Nature论文？生信老炮拆解7类专业语义断层及5种Prompt工程修复方案

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;NotebookLM生物技术研究 NotebookLM 是 Google 推出的基于 AI 的研究协作者工具&#xff0c;专为知识密集型工作流设计。在生物技术领域&#xff0c;它可高效整合海量文献、实验报告与基因组数据库摘要&#x…...

编程新知 2026/5/18 22:02:52

Mastercard开源AI代理工具包：用智能代理重塑支付集成开发体验

1. 项目概述&#xff1a;当开发者遇上Mastercard&#xff0c;一个工具包如何重塑支付集成体验如果你是一名开发者&#xff0c;正在为你的电商平台、SaaS服务或者任何需要处理在线支付的应用程序集成支付功能&#xff0c;那么你大概率绕不开与Mastercard这类全球支付网络的交互。…...

编程新知 2026/5/18 17:58:54

基于GitHub Actions的跨平台应用自动化发布流水线实战指南

1. 项目概述&#xff1a;一个开源应用发布管道的诞生在软件开发的日常里&#xff0c;发布环节常常是那个“说起来简单&#xff0c;做起来一团糟”的部分。尤其是在团队协作中&#xff0c;从代码提交到最终用户能下载到安装包&#xff0c;中间要经历构建、测试、签名、打包、上传…...

编程新知 2026/5/18 17:39:54

PyInstaller Extractor技术实现与逆向分析实践

PyInstaller Extractor技术实现与逆向分析实践 【免费下载链接】pyinstxtractor PyInstaller Extractor 项目地址: https://gitcode.com/gh_mirrors/py/pyinstxtractor PyInstaller Extractor是一个专门用于提取PyInstaller生成的可执行文件内容的Python工具。该工具能够…...

编程新知 2026/5/18 17:37:50