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

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

news 2026/2/8 16:25:29

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

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2026/2/8 4:37:01

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2026/2/4 12:35:34

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2026/1/24 6:30:25

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2026/1/24 14:15:44