CSS的Day05（浮动+flex布局）

跟着黑马程序员的课，稍稍对CSS的了解

常见的显示模式：行内、块级、行内块

在HTML中，标准流也称为文档流或普通流，是指元素按照其在HTML文档中的出现顺序依次排列的方式。在标准流中，元素会自动占据父容器的空间，并且相邻的元素会紧密排列，直到没有足够的空间为止。

标准流中的元素按照块级元素和内联元素的性质进行排列。块级元素会独占一行，从新行开始，并且会在前后自动换行。而内联元素不会独占一行，它们会在一行上按照从左到右的顺序排列。

通过标准流，HTML文档可以自动适应不同屏幕尺寸和设备，提供更好的可访问性和用户体验。同时，开发者也可以通过CSS对标准流中的元素进行布局和样式的控制，实现自定义的页面设计。

一、浮动

1.1 浮动

作用：让块元素水平排列 属性名：float 属性值：左对齐–left
右对齐–right

特点：

顶对齐，加上float浮动后，在一行显示宽高也同样显示，
行内块的显示特点
脱离标准流

为什么第二个盒子里的文字何以看到第一个盒子

/*
在这个例子中，由于第二个盒子没有设置浮动属性，
它会占据标准流中的位置，但由于第一个盒子设置了浮动属性，
它会脱离标准流的控制，导致第二个盒子中的文字可以看到第一个盒子的空间。
这是浮动元素的特性所致。 */

  /* 若只给one加上浮动float，other的right注释后，浮动后会脱离标准流的控制float: right;  */

在这里插入图片描述
在这里插入图片描述

1.2 清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度
（可能导致页面布局错乱）
解决方法:清除浮动(清除浮动带来的影响)

方法一:额外标签法

在父元素内容的最后添加一个块级元素，
设置CSS属性clear: both

方法二：块级/* 单伪元素法 */

.clearfix::after {
content: “”;//伪元素法必备
display: block;
clear: both;
}

/* before 解决外边距塌陷问题 */

方法三：/* 双伪元素法 */

.clearfix::before,
.clearfix::after {
content: “”;
display: table;
}

/* after 清除浮动 */
.clearfix::after {
clear: both;
}

清除浮动-overflow

overflow: hidden;

1.3 浮动属性具有以下特点：

浮动后的元素会顶对齐：浮动元素会以顶部对齐的方式显示，而不是与其他元素的基线对齐。

浮动后的元素具备行内块特点：浮动元素会像行内块元素一样排列在一行上，而不占据整个宽度。

父级容器宽度不够时会换行：如果浮动元素的宽度加上之前的元素宽度超过了父级容器的宽度，浮动元素会被迫换行显示。

浮动后的元素脱离文档流：浮动元素不再占据文档流中的位置，而是被视为一层浮动在其他元素之上。这可能会对布局造成影响。
清除浮动是指解决浮动元素引起的布局问题。当子级元素浮动时，父级容器的高度无法自动撑开，从而导致布局混乱。常见的清除浮动方法有以下几种：

双伪元素法：在父级容器的末尾添加一个空的块级元素（通常是

），为其设置clear:both属性。这样可以强制父级容器闭合，使其包裹住浮动元素。
拓展：浮动的本质作用是实现图文混排效果。通过对元素应用浮动属性，可以使文本环绕在图片周围或与图片并排显示，从而实现更灵活的页面布局效果。

二、 Flex布局 – 弹性布局

非常适合结构化布局(上下排列的，左右排列的)，提供了强大的空间分布和对齐能力。

<!-- Flex布局也叫弹性布局，是浏览器提倡的布局模型，  非常适合结构化布局(上下排列的，左右排列的)，提供了强大的空间分布和对齐能力。Flex模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活 --><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{display: flex;justify-content: space-between;/* height: 300px; */border: 1px solid #000;}.box div{/* float: left;margin: 50px; */width: 200px;height: 100px;background: yellow;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div></div></body>
</html>

在这里插入图片描述

2.1 组成

<!-- 给父元素设置分、display:flex，子元素自行挤压伸拉组成部分：
弹性容器
弹性盒子
主轴：默认在水平方向
侧轴 / 交叉轴：默认在垂直方向 --><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-组成</title><style>/* 弹性容器flex */.box {/* 主轴：默认在水平方向 */display: flex;height: 300px;border: 1px solid #000;}/* 弹性盒子（弹性容器flex的子级）：沿着主轴方向排列 */.box div {/* 挤压。、，弹性布局 */width: 200px;/* 注释高，会拉伸，是自动的也可以手动控制 *//* height: 100px; */background-color: pink;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>1</div><div>2</div><div>3</div><div>1</div><div>2</div><div>3</div></div></body>
</html>

在这里插入图片描述

2.2 flex布局-主轴对齐方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-主轴对齐方式</title><style>.box {display: flex;/* justify-content: flex-start; *//* justify-content: flex-end; *//* 居中 *//* justify-content: center; *//* 父级剩余的尺寸分配成间距 *//* 弹性盒子之间的间距相等 *//* justify-content: space-between; *//* 间距出现在弹性盒子两侧 *//* 视觉效果：弹性盒子之间的间距是两端间距的2倍 *//* justify-content: space-around; *//* 各个间距都相等 */justify-content: space-evenly;height: 300px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

在这里插入图片描述

2.3 flex布局-侧轴对齐方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-侧轴对齐方式</title><style>.box {display: flex;/* 弹性盒子在侧轴方向没有尺寸才能拉伸 */align-items: stretch;/* align-items: center; *//* align-items: flex-start; *//* align-items: flex-end; */height: 300px;border: 1px solid #000;}/* 第二个div，侧轴居中对齐 */.box div:nth-child(2) {align-self: center;}.box div {width: 200px;height: 100px;background-color: pink;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div></div></body>
</html>

在这里插入图片描述

2.4 flex布局-修改主轴方向

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-修改主轴方向</title><style>.box {display: flex;/* 修改主轴方向 垂直方向；侧轴自动变换到水平方向 */flex-direction: column;/* 主轴在垂直，视觉效果：垂直居中 */justify-content: center;/* 侧轴在水平，视觉效果：水平居中 */align-items: center;width: 150px;height: 120px;background-color: pink;}img {width: 32px;height: 32px;}</style></head><body><div class="box"><img src="../Day01/img/1.jpg" alt><span>媒体</span></div></body>
</html>

在这里插入图片描述

2.5 flex布局-弹性伸缩比

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-弹性伸缩比</title><style>/* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */.box {display: flex;flex-direction: column;height: 300px;border: 1px solid #000;}.box div {/* height: 100px; */background-color: pink;}.box div:nth-child(1) {width: 200px;}.box div:nth-child(2) {flex: 1;}.box div:nth-child(3) {flex: 2;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div></div></body>
</html>

在这里插入图片描述

2.6 flex布局-弹性换行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-弹性换行</title><style>.box {display: flex;flex-wrap: wrap;/* 不换行 */  /* flex-wrap: nowrap; */justify-content: space-between;height: 300px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></body>
</html>

在这里插入图片描述

2.7 flex布局-行对齐方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex布局-行对齐方式</title><style>/* 因为父级DIV没有设置宽度，所以宽度就是浏览器宽度，改变窗口大小就会有影响 */.box {display: flex;flex-wrap: wrap;justify-content: space-between;/* 调整 行对齐方式：对单行弹性盒子不生效 *//* align-content: flex-start; *//* align-content: flex-end; *//* align-content: center; *//* align-content: space-between; *//* align-content: space-around; *//* 没有代码提示 */align-content: space-evenly;height: 400px;border: 1px solid #000;}.box div {width: 200px;height: 100px;background-color: pink;}</style></head><body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div></body>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/669052.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

编程实例分享，麻将馆计时方法计费系统，棋牌室计时计费管理系统软件试用版教程

编程实例分享，麻将馆计时方法计费系统，棋牌室计时计费管理系统软件试用版教程

编程实例分享&#xff0c;麻将馆计时方法计费系统&#xff0c;棋牌室计时计费管理系统软件试用版教程 一、前言 以下教程以 佳易王棋牌计时计费管理系统软件V17.9为例说明 1、恢复上次状态&#xff1a;在突然停电或非正常关机情况下&#xff0c;再次打开软件&#xff0c;可以…
阅读更多...
openssl3.2 - use openssl cmd create ca and p12

openssl3.2 - use openssl cmd create ca and p12

文章目录 openssl3.2 - use openssl cmd create ca and p12概述笔记实验的openssl环境建立CA生成私钥和证书请求生成CA证书用CA签发应用证书用CA对应用证书进行签名将已经签名好的PEM证书封装为P12证书验证P12证书是否可用END openssl3.2 - use openssl cmd create ca and p12 …
阅读更多...
Linux实验记录：使用BIND提供域名解析服务

Linux实验记录：使用BIND提供域名解析服务

前言&#xff1a; 本文是一篇关于Linux系统初学者的实验记录。 参考书籍&#xff1a;《Linux就该这么学》 实验环境&#xff1a; VmwareWorkStation 17——虚拟机软件 RedHatEnterpriseLinux[RHEL]8——红帽操作系统 备注&#xff1a; 为了降低用户访问网络资源的门槛&am…
阅读更多...
PySpark（三）RDD持久化、共享变量、Spark内核制度，Spark Shuffle

PySpark（三）RDD持久化、共享变量、Spark内核制度，Spark Shuffle

目录 RDD持久化 RDD 的数据是过程数据 RDD 缓存 RDD CheckPoint 共享变量 广播变量 累加器 Spark 内核调度 DAG DAG 的宽窄依赖和阶段划分 内存迭代计算 Spark是怎么做内存计算的? DAG的作用?Stage阶段划分的作用? Spark为什么比MapReduce快&#xff1f; Spar…
阅读更多...
【动态规划】【精度】1883. 准时抵达会议现场的最小跳过休息次数

【动态规划】【精度】1883. 准时抵达会议现场的最小跳过休息次数

作者推荐 【动态规划】【状态压缩】【2次选择】【广度搜索】1494. 并行课程 II 本文涉及知识点 动态规划汇总 LeetCode:1883. 准时抵达会议现场的最小跳过休息次数 给你一个整数 hoursBefore &#xff0c;表示你要前往会议所剩下的可用小时数。要想成功抵达会议现场&#…
阅读更多...
pthread实现生产者消费者模式

pthread实现生产者消费者模式

总感觉Java线程这块缺了些啥&#xff0c;看源代码有时候看不太懂。因此就萌生了我下面的想法&#xff0c;学习pthread的相关知识&#xff0c;去探究Java Thread对象的底层是如何实现。基于这样的缘由我在某位大佬的基础写了下面的代码。 之前没有写过pthrea的代码&#xff0c;这…
阅读更多...
Springboot写一个对接钉钉机器人的小插件

Springboot写一个对接钉钉机器人的小插件

钉钉机器人 有时候我门需要监控各种事件&#xff0c;需要机器人给我发给提醒 如&#xff1a;git代码交接&#xff0c;代码合并&#xff0c; 服务器异常捕获&#xff0c;。。。。 参照钉钉给我们的开发文档&#xff0c;可以发现对接起来是非常简单哈哈 这是我写的小插件以及例子…
阅读更多...
ChatGPT生产力|chat gpt实战介绍

ChatGPT生产力|chat gpt实战介绍

标注说| ⭐ : 使用稳定&#xff0c;推荐 | &#x1f604; : 免费使用 | &#x1f511; : 需要登陆或密码 | ✈️ : 需waiwang进行访问 | ChatGPT 1PoePoe - Fast, Helpful ...&#x1f511;&#x1f604;&#x1f517;2 AItianhuGPT4&#x1f604;⭐&#x1f517;3 PhantoNa…
阅读更多...
XCTF：3-1[WriteUP]

XCTF：3-1[WriteUP]

从题目中获取文件 使用file命令查看文件类型 修改后缀为.rar后进行解压缩 再次使用file命令查询该文件的类型 再次修改后缀为.pcap或者.pcapng 使用wireshark打开&#xff0c;直接搜索flag字样 在多个数据包里发现了flag.rar、flag.txt等文件 尝试使用http导出文件 有一个fl…
阅读更多...
数据结构——框架简介

数据结构——框架简介

1.数据结构的作用 数据结构是计算机科学中一种重要的概念&#xff0c;它主要用于组织和存储数据以便有效地进行操作。数据结构可以看作是数据的组织方式&#xff0c;通过合理的数据结构设计&#xff0c;可以更高效地执行各种操作&#xff0c;提高程序的性能和可维护性。 以下是…
阅读更多...
文献速递：肿瘤分割---- ALA-Net：用于3D结直肠肿瘤分割的自适应病变感知注意力网络

文献速递：肿瘤分割---- ALA-Net：用于3D结直肠肿瘤分割的自适应病变感知注意力网络

文献速递&#xff1a;肿瘤分割---- ALA-Net&#xff1a;用于3D结直肠肿瘤分割的自适应病变感知注意力网络 01 文献速递介绍 结直肠癌&#xff08;CRC&#xff09;在全球范围内与高发病率和死亡率相关&#xff0c;。肿瘤的预后高度依赖于诊断时疾病的阶段。准确检测和分割肿瘤…
阅读更多...
不需英文基础也可以轻松学编程，中文编程开发工具免费版下载，编程工具构件箱之扩展控制面板构件用法

不需英文基础也可以轻松学编程，中文编程开发工具免费版下载，编程工具构件箱之扩展控制面板构件用法

不需英文基础也可以轻松学编程&#xff0c;中文编程开发工具免费版下载&#xff0c;编程工具构件箱之扩展控制面板构件用法 一、前言 编程入门视频教程链接 https://edu.csdn.net/course/detail/39036 编程工具及实例源码文件下载可以点击最下方官网卡片——软件下载——常…
阅读更多...
1-3 动手学深度学习v2-线性回归的从零开始实现-笔记

1-3 动手学深度学习v2-线性回归的从零开始实现-笔记

手动创建训练数据集 根据带有噪声的线性模型构造一个人造数据集。我们使用线性模型参数 w [ 2 , − 3.4 ] T \pmb{w} [2,-3.4]^{T} w[2,−3.4]T、 b 4.2 b 4.2 b4.2和噪声项 ϵ \epsilon ϵ生成数据集及其标签&#xff1a; y X w b ϵ \pmb{y} \pmb{Xw}b\epsilon yXw…
阅读更多...
2024年【化工自动化控制仪表】考试题及化工自动化控制仪表最新解析

2024年【化工自动化控制仪表】考试题及化工自动化控制仪表最新解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年化工自动化控制仪表考试题为正在备考化工自动化控制仪表操作证的学员准备的理论考试专题&#xff0c;每个月更新的化工自动化控制仪表最新解析祝您顺利通过化工自动化控制仪表考试。 1、【单选题】()指用多个相…
阅读更多...
spring-security authentication persistence

spring-security authentication persistence

翻译版本【spring-security 6.2.1】persistence Persisting Authentication 用户第一次请求受保护的资源时&#xff0c;系统会提示他们输入凭据。提示输入凭据的最常见方法之一是将用户重定向到登录页面。未经身份验证的用户请求受保护的资源的HTTP交换可能如下所示: 例1。未…
阅读更多...
关于Linux和消息队列常见的十道面试题

关于Linux和消息队列常见的十道面试题

实际工作中如何排查CPU飙升问题&#xff1f; 在实际工作中&#xff0c;我们可以通过以下步骤来排查CPU飙升的问题&#xff1a; 使用系统监控工具&#xff1a;首先&#xff0c;我们可以使用系统监控工具&#xff0c;如top命令&#xff0c;来查看所有进程占系统CPU的排序。这样可…
阅读更多...
UML---用例图，类图

UML---用例图，类图

用例图 用例图&#xff08;Use Case Diagram&#xff09;主要描述系统的功能需求和参与者与系统之间的交互。它是用户与系统交互的最简表示形式&#xff0c;展现了用户和与他相关的用例之间的关系。用例图被视为系统的蓝图&#xff0c;通过它&#xff0c;人们可以获知系统不同种…
阅读更多...
mysql：事务的特性ACID、并发事务（脏读、不可重复读、幻读、如何解决、隔离级别）、undo log和redo log的区别、相关面试题和答案

mysql：事务的特性ACID、并发事务（脏读、不可重复读、幻读、如何解决、隔离级别）、undo log和redo log的区别、相关面试题和答案

事务是一组操作的集合&#xff0c;它会把所有的操作作为一个整体一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 事务的特性&#xff08;ACID&#xff09; 原子性&#xff08;Atomicity&#xff09;&#xff1a;事务是不可分割的…
阅读更多...
idea开发工具的简单使用与常见问题

idea开发工具的简单使用与常见问题

1、配置git 选择左上角目录file->setting 打开&#xff0c;Version Control 目录下Git&#xff0c;选择git安装目录下的git.exe文件&#xff1b; 点击test&#xff0c;出现git版本&#xff0c;则表示git识别成功&#xff0c;点击右下角确认即可生效。 2、配置node.js 选…
阅读更多...
ubuntu开机报错/dev/nume0n1p2:clean

ubuntu开机报错/dev/nume0n1p2:clean

本来是开机卡在这个界面&#xff0c;经过以下操作&#xff0c;变成这种了 现在的问题变成linux卡在 failed to start NVIDIA Persistence Daemon 按照下面的操作方法&#xff0c;可以有开机界面了。但是输入密码后&#xff0c;一直在登录界面 1.方式一&#xff1a;重新安装显…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023