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

前端【3】--CSS布局，CSS实现横向布局，盒子模型

news 2025/11/11 10:05:27

盒子分类

1、块级盒子

2、内联级盒子

3、内联块级盒子

4、弹性盒子 

5、盒子内部分区

方法一：使用 float 普通盒子实现横向布局

方法二：使用 display: inline-block 内联块级元素实现横向布局

方法三：使用弹性盒子 flexbox（推荐）

1、父级属性：

 2、子级属性：

示例：

往期文章：

前端【2】html添加样式、CSS选择器-CSDN博客

盒子分类

1、块级盒子

块级元素布局：块级元素的特性，独占一行，竖向排列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>块级元素</title><style>div {width: 200px;height: 100px;background-color: aquamarine;margin: 10px 0; /* 上下间距 */}</style>
</head>
<body><!-- 块级元素：独占一行,竖着布局对宽度高度支持 display:block --><div>块级元素 1</div><div>块级元素 2</div><p>段落文本</p><h1>标题</h1>
</body>
</html>

 

2、内联级盒子

内联元素的特性：不独占一行，对宽高不支持，行内元素连续排列。

<body>
<!-- 内联级元素 不独占一行 对宽度高度不支持 display: inline --><span>内联元素 1</span><span>内联元素 2</span><a href="#">超链接</a>
</body>

3、内联块级盒子

内联块级元素的特性：不独占一行，但支持宽高设置，连续排列。 

 <!-- 内联块级级元素 不独占一行 对宽度高度支持 display:inline-block --><img src="material/蒲公英.png" alt=""><img src="material/蒲公英.png" alt=""><img src="material/蒲公英.png" alt="">

 

4、弹性盒子 

弹性盒子（Flexbox）的特性：子元素默认横向排列，可灵活控制布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>弹性盒子</title><style>.container {display: flex; /* 弹性盒子 */width: 600px;height: 200px;background-color: yellow;justify-content: space-between; /* 子元素之间平均分布 */align-items: center; /* 垂直方向居中 */}.container div {width: 150px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="container"><div>子元素 1</div><div>子元素 2</div><div>子元素 3</div></div>
</body>
</html>

5、盒子内部分区

CSS页面布局（超详解）_css布局-CSDN博客----推荐博客~~

每个元素的盒子由以下四个部分组成：

1. 内容区 (Content)

  • 元素的实际内容（如文字、图片等）所在的区域。
  • 它的大小由 width 和 height 属性决定。

2. 内边距 (Padding)

  • 内容与边框之间的距离。
  • 使用 padding 属性设置，可以单独设置上下左右的内边距。

3. 边框 (Border)

  • 环绕内容区和内边距的边界。
  • 使用 border 属性设置，定义边框的宽度、样式和颜色。

4. 外边距 (Margin)

  • 元素与其他元素之间的距离。
  • 使用 margin 属性设置，可以单独设置上下左右的外边距。

这里放一张名图：

 浏览器默认给外边距和内边距设置一定的初值，可以对margin和padding的值来改变其样式，其代码如下:

*{              /*通用选择器，选择所有元素*/margin:0;  /*外边距清0*/padding:0; /*内边距清0*/
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型示例</title><style>.box {width: 200px;                /* 内容区宽度 */height: 100px;               /* 内容区高度 */background-color: lightblue; /* 内容区背景色 */padding: 20px;               /* 内边距 */border: 10px solid blue;     /* 边框 */margin: 30px auto;           /* 外边距：上下30px，左右居中 */}body {background-color: #f5f5f5;   /* 页面背景色 */}</style>
</head>
<body><div class="box">内容区</div>
</body>
</html>

 

在前端布局开发中，我们经常需要对元素进行横向布局。实现横向布局的方法有很多，从传统的 float 到现代的 flexbox，每种方式都有其特点和适用场景。本文将对三种常见方法进行详细介绍，分析它们的优缺点，并推荐最佳实践。

方法一：使用 float 普通盒子实现横向布局

通过为子元素设置 float 属性可以实现横向布局：

  • float: left; 子元素左浮动。
  • float: right; 子元素右浮动

存在的问题：父级元素高度坍塌：使用 float 后，父级元素的高度不会被子元素撑开，可能导致后续元素向上移动。

解决方法

  1. 设置父级高度：手动为父级元素设置固定高度，如 height: 150px;。但固定高度难以灵活适配内容。
  2. 清除浮动：
    • 给父级元素添加 overflow: hidden;，使父级高度随子级内容变化。

无法解决的问题：

1、子级元素均分 父级元素需要计算设置宽度 ，但不一定能均分

2、子级元素想要在父级元素内均匀分布需要计算设置 margin，但不一定能均匀分布

3、书写比较繁琐，代码冗余

方法二：使用 display: inline-block 内联块级元素实现横向布局

将子元素设置为 inline-block，让其表现为块状元素，同时可以像文本一样在一行内排列。

存在的问题：空白间隙--inline-block 布局的子元素之间若存在换行符，会被浏览器解析为空白符，导致子元素之间有多余间隙。

解决方法

  1. 移除换行符：将子元素标签紧贴书写。 
    <div class="parent"><div class="child"></div><div class="child"></div></div>
  2. 设置 font-size 为 0：在父级元素上设置 font-size: 0;，清除空白符影响。

 

无法解决的问题：

1、子级元素均分 父级元素需要计算设置宽度 ，但不一定能均分

 2、子级元素想要在父级元素内均匀分布需要计算设置 margin，但不一定能均匀分布

 3、书写比较繁琐，代码冗余

方法三：使用弹性盒子 flexbox（推荐）

  flexbox 是一种强大且灵活的现代布局方式，通过为父级元素设置 display: flex，即可实现横向布局，且能够轻松解决 float 和 inline-block 布局中的许多问题。 

1、父级属性：

  • flex-direction：定义子元素排列方向。
    • row：从左到右排列（默认）。
    • row-reverse：从右到左排列。
    • column：纵向从上到下排列。
    • column-reverse：纵向从下到上排列。
  • flex-wrap：定义子元素是否换行。
    • nowrap：不换行（默认）。
    • wrap：自动换行。
  • justify-content：定义子元素在主轴方向的分布方式。
    • flex-start：从起点开始排列。（需要结合flex-direction 来看)
    • flex-end：从终点开始排列。
    • center：居中排列。
    • space-between：代表空白元素均匀分布在元素中间-------经常用到
    • space-around：子元素之间及首尾均分空隙。
    • space-evenly：所有间隙（子元素之间及首尾）均等。
  • align-items：定义子元素在交叉轴方向上的对齐方式。
    • stretch（默认）、flex-start、flex-end、center。

 2、子级属性：

  • order：设置子元素排列顺序，值越小越靠前。
  • flex（简写属性）：
    • flex-grow：拉伸因子 根据每个属性的拉伸因子采用求和均分按比例将空余i部分分配给每个元素
    • flex-shrink：压缩因子 ,前提是子元素和>父级元素宽/高，原理与grow一致定义子元素在超出父级宽度时的压缩比例。
    • flex-basis：定义子元素的初始尺寸。

示例：

/* 父容器 .top 样式 */
.top {width: 800px; /* 设置父容器宽度 */background-color: palegreen; /* 背景颜色为淡绿色 */display: flex; /* 启用弹性布局 */flex-direction: row; /* 主轴方向为水平方向 */justify-content: space-between; /* 子元素在主轴方向均匀分布 */
}/* 左侧子容器 .left 样式 */
.left {flex-grow: 3; /* 拉伸因子，分配更多剩余空间 */order: 3; /* 排列顺序较低 */background-color: powderblue; /* 背景颜色为淡蓝色 */width: 200px; /* 固定宽度 */height: 100px; /* 固定高度 */
}/* 中间子容器 .middle 样式 */
.middle {flex-grow: 1; /* 拉伸因子，占用较少的剩余空间 */order: 1; /* 排列顺序最高 */background-color: yellow; /* 背景颜色为黄色 */width: 200px; /* 固定宽度 */height: 100px; /* 固定高度 */
}/* 右侧子容器 .right 样式 */
.right {order: 2; /* 排列顺序居中 */background-color: orange; /* 背景颜色为橙色 */width: 200px; /* 固定宽度 */height: 130px; /* 固定高度 */
}/* 底部容器 .bottom 样式 */
.bottom {width: 800px; /* 宽度与父容器一致 */height: 200px; /* 固定高度 */background-color: rgb(168, 51, 70); /* 背景颜色为深红色 */
}

相关文章：

前端【3】--CSS布局，CSS实现横向布局，盒子模型

盒子分类 1、块级盒子 2、内联级盒子 3、内联块级盒子 4、弹性盒子 5、盒子内部分区 方法一&#xff1a;使用 float 普通盒子实现横向布局 方法二&#xff1a;使用 display: inline-block 内联块级元素实现横向布局 方法三&#xff1a;使用弹性盒子 flexbox&#xff0…...

编程日记 2025/1/17 20:43:36

SQL语句IN和OR的区别

在SQL中&#xff0c;IN和OR都用于筛选条件&#xff0c;但它们的用途和性能上有一些区别。以下是两者的对比&#xff1a; 1. 语法 IN SELECT * FROM table_name WHERE column_name IN (value1, value2, value3);IN用于检查某列的值是否在一个给定的值列表中。 OR SELECT * FRO…...

编程日记 2025/1/17 20:41:33

OCP使用中的常见问题与解决方法

OCP的常见问题 页面卡顿&#xff1a; 遇到页面卡顿的问题时&#xff0c;首先需要区分是全局性的卡顿&#xff0c;即所有页面都出现延迟或响应缓慢&#xff0c;还是仅限于特定的监控页面。 监控数据看不到: 需要明确是全部数据都无法查看&#xff0c;还是仅限于特定集群的数…...

编程日记 2025/1/17 20:30:22

Git 版本控制：.gitignore 文件完全指南

.gitignore 文件是 Git 版本控制系统中的一个重要配置文件&#xff0c;用于告诉 Git 哪些文件和目录应该被忽略&#xff0c;不需要纳入版本控制。以下是关于 .gitignore 的完整笔记。 基本概念 .gitignore 文件可以放在项目的任何目录下&#xff0c;其作用范围包括所在目录及…...

编程日记 2025/1/17 20:27:17

STM32 FreeRTOS 介绍

目录 什么是裸机开发 什么是操作系统 通用操作系统 实时操作系统 FreeRTOS简介 FreeRTOS发展历史 FreeRTOS优势 FreeRTOS特点 什么是裸机开发 裸机开发指的是在没有操作系统&#xff08;OS&#xff09;或者其他高级软件支持的情况下&#xff0c;直接在裸机硬件上进行软…...

编程日记 2025/1/17 20:25:14

在 Azure 100 学生订阅中新建 Ubuntu VPS 并部署 Mastodon 服务器

今天想和大家分享一下如何在 Azure 的 100 学生订阅中&#xff0c;创建一台 Ubuntu VPS&#xff0c;并通过 Docker 部署 Mastodon 服务器。Mastodon 是一个开源的社交网络平台&#xff0c;允许用户创建自己的实例&#xff0c;类似于 Twitter&#xff0c;但更加去中心化。Docker…...

编程日记 2025/1/17 20:10:56

【Linux网络编程】序列化与反序列化

目录 一&#xff0c;序列化和反序列化的说明 二&#xff0c;Jsoncpp库的介绍 三&#xff0c;Jsoncpp库的使用 3-1&#xff0c;Json::Value类 3-2&#xff0c;Json::StreamWriter类 3-3&#xff0c;Json::CharReader类 一&#xff0c;序列化和反序列化的说明 序列化与反…...

编程日记 2025/1/17 20:06:52

Spring Boot中的自动配置原理是什么

Spring Boot 自动配置原理 Spring Boot 的自动配置机制基于 条件化配置&#xff0c;通过 EnableAutoConfiguration 注解来启用。自动配置的核心原理是 基于类路径和环境条件来推断所需要的配置&#xff0c;Spring Boot 会根据项目中引入的依赖和当前环境来自动装配相关的配置项…...

编程日记 2025/1/17 20:04:50

大模型相关资料、基础技术和排行榜

大模型排行榜 测试集CEval中文多个学科测试集排名MMLU大规模多任务语言理解英文排名&#xff0c;介绍斯坦福排行榜Math-VMath-VistaOpen LLMs LeaderboardCMMLU 大模型数据集 标题简介19个大模型常用的评估数据集和训练数据集汇总19个大模型常用的评估数据集和训练数据集汇总最…...

编程日记 2025/1/17 20:01:47

如何安装cnpm

今天尝试用npm install安装一个项目的依赖&#xff0c;但是无论如何都不能完成&#xff0c;等待时间非常久&#xff0c;所以同事推荐了cnpm&#xff0c;确实非常好用&#xff0c;所以推荐了出来&#xff0c;希望能给大家带来帮助。 cnpm 是中国淘宝团队提供的一个 npm 镜像工具…...

编程日记 2025/1/17 20:00:47

正则表达式 匹配特定字符后的所有字符

在处理文本数据时&#xff0c;正则表达式&#xff08;RegularExpressions&#xff0c;简称Regex&#xff09;是一种非常强大的工具&#xff0c;它可以用来搜索、匹配和替换文本中符合特定模式的字符串。 首先&#xff0c;明确我们的目标是匹配完整的URL&#xff0c;并获取它之…...

编程日记 2025/1/17 19:56:43

计算机网络 （44）电子邮件

一、概述 电子邮件&#xff08;Electronic Mail&#xff0c;简称E-mail&#xff09;是因特网上最早流行的应用之一&#xff0c;并且至今仍然是因特网上最重要、最实用的应用之一。它利用计算机技术和互联网&#xff0c;实现了信息的快速、便捷传递。与传统的邮政系统相比&#…...

编程日记 2025/1/17 19:55:42

数据结构与算法：动态规划dp：理论基础和相关力扣题（509.斐波那契数列、70.爬楼梯）

1.0.理论基础 动态规划主要解决的问题种类有&#xff1a; 背包问题打家劫舍股票问题子序列问题 解决步骤&#xff1a; dp数组及其下标的意义递推公式dp数组初始化遍历顺序打印dp数组 2.0.相关力扣题 509.斐波那契数列 class Solution:def fib(self, n: int) -> int:i…...

编程日记 2025/1/17 19:47:32

某政务行业基于 SeaTunnel 探索数据集成平台的架构实践

分享嘉宾&#xff1a;某政务公司大数据技术经理 孟小鹏 编辑整理&#xff1a;白鲸开源 曾辉 导读&#xff1a;本篇文章将从数据集成的基础概念入手&#xff0c;解析数据割裂给企业带来的挑战&#xff0c;阐述数据集成的重要性&#xff0c;并对常见的集成场景与工具进行阐述&…...

编程日记 2025/1/17 19:44:28

word-break控制的几种容器换行行为详解

word-break 属性在控制换行行为时需要根据语言判断&#xff0c;对于中文 一个字符就是一个单词&#xff0c;字符换行不影响阅读理解&#xff0c;而对于英文来说&#xff0c;多个连续的字符才会是一个单词&#xff0c;例如中文的 早 英文为 morning。 morning7个字符才算一个单词…...

编程日记 2025/1/17 19:43:27

【0x0084】HCI_Set_Min_Encryption_Key_Size命令详解

目录 一、命令概述 二、命令格式及参数 2.1 HCI_Set_Min_Encryption_Key_Size命令格式 2.2. Min_Encryption_Key_Size 三、生成事件及参数 3.1. HCI_Command_Complete 事件 3.2. Status 四、命令的执行流程 4.1. 主机端准备阶段 4.2. 命令发送阶段 4.3. 控制器接收和…...

编程日记 2025/1/17 19:41:25

关于2025年智能化招聘管理系统平台发展趋势

2025年&#xff0c;招聘管理领域正站在变革的十字路口&#xff0c;全新的技术浪潮与不断变化的职场生态相互碰撞&#xff0c;促使招聘管理系统成为重塑企业人才战略的关键力量。智能化招聘管理系统平台在这一背景下迅速崛起&#xff0c;其发展趋势不仅影响企业的招聘效率与质量…...

编程日记 2025/1/17 19:38:22

Docker部署Spring Boot + Vue项目

目录 前提条件 概述 下载代码 打开代码 Docker创建网络 MySQL容器准备 MySQL数据库配置 启动MySQL容器 测试连接MySQL 初始化MySQL数据 Redis容器准备 修改Redis配置 启动redis容器 部署后端 后端代码打包 上传jar包到Linux 创建Dockerfile 构建镜像 运行后…...

编程日记 2025/1/17 19:36:20

开发规范

开发规范 企业项目开发有2种开发模式&#xff1a;前后台混合开发和前后台分离开发。 前后台混合开发 顾名思义就是前台后台代码混在一起开发&#xff0c;如下图所示&#xff1a; 这种开发模式有如下缺点&#xff1a; 沟通成本高&#xff1a;后台人员发现前端有问题&#xf…...

编程日记 2025/1/17 19:35:18

九 RK3568 android11 MPU6500

一 MPU6500 内核驱动 1.1 查询设备连接地址 查看原理图， MPU6500 I2C 连接在 I2C4 上， 且中断没有使用 i2c 探测设备地址为 0x68 1.2 驱动源码 drivers/input/sensors/gyro/mpu6500_gyro.c drivers/input/sensors/accel/mpu6500_acc.c 默认 .config 配置编译了 mpu6550 …...

编程日记 2025/1/17 19:31:15

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/11/11 6:24:12

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/9/11 5:41:27

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2025/11/8 7:31:37

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/11/8 7:47:48

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/11/11 3:14:55

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/11/7 14:06:23

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/11/7 19:35:50

「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

编程新知 2025/8/21 16:28:18