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

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

news 2026/3/31 22:12:35

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

Ubuntu20.04下ROS2与MoveIt2环境配置全攻略：从虚拟环境到避坑指南

Ubuntu 20.04下ROS2与MoveIt2环境配置实战指南 机器人操作系统&#xff08;ROS&#xff09;作为现代机器人开发的基石&#xff0c;其第二代的ROS2凭借更强大的实时性和分布式架构&#xff0c;正在成为工业界和学术界的新宠。而MoveIt2作为ROS2中的运动规划框架&#xff0c;为机…...

编程新知 2026/3/31 21:16:56

Llama-3.2V-11B-cot真实案例展示：OCR后图像逻辑推理生成可验证结论

Llama-3.2V-11B-cot真实案例展示&#xff1a;OCR后图像逻辑推理生成可验证结论 1. 模型能力概览 Llama-3.2V-11B-cot是一个突破性的视觉语言模型&#xff0c;它不仅能理解图像内容&#xff0c;还能进行系统性推理并生成可验证的结论。这个基于LLaVA-CoT论文实现的模型&#x…...

编程新知 2026/3/31 20:54:30

B站视频下载神器：3分钟学会用BilibiliDown轻松保存喜欢的视频

B站视频下载神器&#xff1a;3分钟学会用BilibiliDown轻松保存喜欢的视频 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mi…...

编程新知 2026/3/31 20:36:05

从温控器到无人机：PID参数整定的‘手感’秘籍，附C语言代码避坑指南

从温控器到无人机&#xff1a;PID参数整定的‘手感’秘籍与实战避坑指南 在工业自动化和智能硬件开发中&#xff0c;PID控制算法就像一位隐形的调音师&#xff0c;默默调节着系统的每一个细微变化。无论是缓慢升温的工业烘箱&#xff0c;还是高速响应的四旋翼无人机&#xff0c…...

编程新知 2026/3/31 19:57:32

React-Grid-Layout外部拖拽：从零构建可视化编辑体验

React-Grid-Layout外部拖拽&#xff1a;从零构建可视化编辑体验 【免费下载链接】react-grid-layout A draggable and resizable grid layout with responsive breakpoints, for React. 项目地址: https://gitcode.com/gh_mirrors/re/react-grid-layout 在构建现代Web应…...

编程新知 2026/3/31 18:46:17

如何用快马平台为网站开发公司快速生成企业官网原型，提升方案演示效率

作为一名经常需要快速响应客户需求的网站开发者&#xff0c;我最近发现了一个能大幅提升工作效率的好方法 - 使用InsCode(快马)平台来生成企业官网原型。这个方法特别适合像我们华网三百每年.cn这样需要快速为客户提供方案演示的网站开发公司。 需求分析阶段 当接到一个新客户…...

编程新知 2026/3/31 18:44:16

5个效率提升技巧：Cursor AI功能优化指南

5个效率提升技巧&#xff1a;Cursor AI功能优化指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial request li…...

编程新知 2026/3/31 18:11:46

告别osgQt！用osgQOpenGLWidget在Qt6中轻松加载OsgEarth三维地球（附完整代码）

现代Qt6与OsgEarth集成实战&#xff1a;osgQOpenGLWidget替代方案详解 如果你正在使用Qt6开发三维地理可视化应用&#xff0c;却苦于找不到合适的OpenSceneGraph(OSG)集成方案&#xff0c;这篇文章将为你提供一条清晰的迁移路径。随着Qt和OSG版本的迭代&#xff0c;传统的osgQt…...

编程新知 2026/3/31 16:48:23

PaddlePaddle GPU环境搭建：从驱动到深度学习库的完整指南

1. 为什么需要GPU加速深度学习&#xff1f; 如果你刚接触深度学习&#xff0c;可能会疑惑为什么大家都在讨论GPU。简单来说&#xff0c;GPU就像是个超级计算器&#xff0c;能同时处理大量简单计算。想象你要算100万道加减法题&#xff0c;用普通计算器&#xff08;CPU&#xf…...

编程新知 2026/3/31 15:27:13

如何极速获取金融市场数据：5分钟实战指南

如何极速获取金融市场数据&#xff1a;5分钟实战指南 【免费下载链接】qstock qstock由“Python金融量化”公众号开发&#xff0c;试图打造成个人量化投研分析包&#xff0c;目前包括数据获取&#xff08;data&#xff09;、可视化(plot)、选股(stock)和量化回测&#xff08;策…...

编程新知 2026/3/31 15:22:40