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.rhkb.cn/news/252124.html

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

相关文章

《云原生安全攻防》-- 云原生安全概述

从本节课程开始&#xff0c;我们将正式踏上云原生安全的学习之旅。在深入探讨云原生安全的相关概念之前&#xff0c;让我们先对云原生有一个全面的认识。 什么是云原生呢? 云原生&#xff08;Cloud Native&#xff09;是一个组合词&#xff0c;我们把它拆分为云和原生两个词来…

bitcoin core 请求拒绝响应【或者】卡死

日志 经过排查节点日志&#xff0c;发现抛出异常。 tail -f debug.log日志&#xff1a; 2024-02-05T05:56:26Z BlockUntilSyncedToCurrentChain: txindex is catching up on block notifications 2024-02-05T05:56:26Z BlockUntilSyncedToCurrentChain: txindex is catching…

如何以管理员身份删除node_modules文件

今天拉项目&#xff0c;然后需要安装依赖&#xff0c;但是一直报错&#xff0c;如下&#xff1a; 去搜这个问题会让把node_modules文件先删掉 再去安装依赖。我在删除的过程中会说请以管理员身份来删除。 那么windows如何以管理员身份删除node_modules文件呢&#xff1f; wi…

爬虫实战--爬取简单文字图片并保存到mongodb数据库

文章目录 前言发现宝藏 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#xff0c;方便日后回顾。当然&#xff0c;如果能帮到一些萌新进行新技术的学习那也是极好的。作者菜菜一枚&#xff0c;文章中如果有记录错误&#xff0c;欢迎读者朋友们…

ios搭建OpenGL环境

前言 本篇文章介绍在ios搭建OpenGL开发环境 在app的启动文章中&#xff0c;讲述了一个ios应用是如何启动的以及在IOS 13之后苹果公司推出的多窗口功能&#xff0c;通过app的启动这篇文章&#xff0c;我们基本能随心所欲的搭建一个app应用环境&#xff0c;搭建完成后的基本文件…

idea 快捷键ctrl+shift+f失效的解决方案

文章目录 搜狗输入法快捷键冲突微软输入法快捷键冲突 idea的快捷键ctrlshiftf按了没反应&#xff0c;理论上是快捷键冲突了&#xff0c;检查搜狗输入法和微软输入法快捷键。 搜狗输入法快捷键冲突 不需要简繁切换的快捷键&#xff0c;可以关闭它&#xff0c;或修改快捷键。 微…

海康威视有插件、无插件播放;webrtc直播;西瓜视频播放器;mpegts.js直播;flvjs直播

Notes 视频播放的几种方式 一、Video mp4链接直接播放 二、海康威视3.3插件版直播、云台控制&#xff0c;资源下载地址 index.html引入hk文件中的js文件双击HCWebSDKPlugin.exe安装插件前端参照文件夹hkCamera中的示例代码 三、海康威视3.2无插件版直播&#xff0c;资源下…

图解支付-金融级密钥管理系统:构建支付系统的安全基石

经常在网上看到某某公司几千万的个人敏感信息被泄露&#xff0c;这要是放在持牌的支付公司&#xff0c;可能就是一个非常大的麻烦&#xff0c;不但会失去用户的信任&#xff0c;而且可能会被吊销牌照。而现实情况是很多公司的技术研发人员并没有足够深的安全架构经验来设计一套…

简单的JavaScript去下载转换为Base64的PDF文件

新建一个文件&#xff0c;内容填写如下&#xff0c;然后保存为 .html 类型的文件 再用浏览器打开&#xff0c;就会是下面这样子&#xff1a; 图一红色textarea里面&#xff0c;可以将PDF文件转换成BASE64位后的内容贴进去&#xff0c;点击下载时&#xff0c;就可以直接下载成PD…

windows 谷歌浏览器Chrome 怎么禁止更新

1.首先把任务管理器里的谷歌浏览器程序结束&#xff1a; &#xff08;鼠标在任务栏右击&#xff0c;出现任务管理器&#xff09; 2.windowr&#xff0c;输入services.msc 带有Google Update的服务&#xff0c;选择禁用。 3.windowr&#xff0c;输入taskschd.msc 任务计划程序…

MTK8365安卓核心板_联发科MT8365(Genio 350)核心板规格参数

MTK8365安卓核心板是一款高性能的嵌入式处理器产品&#xff0c;基于联发科领先的SoC架构和先进的12纳米工艺。它集成了四核ARM Cortex-A53处理器&#xff0c;每个核心频率高达2.0 GHz&#xff0c;搭载强大的多标准视频加速器&#xff0c;支持高达1080p 60fps的视频解码。此外&a…

C++_多态

目录 1、什么是虚函数 1.1 什么是虚函数重写 1.2 虚函数的继承 1.3 协变 1.4 析构函数的重写 2、override和final 2.1 final 2.2 override 3、纯虚函数/抽象类 3.1 接口继承和实现继承 4、多态的原理 前言&#xff1a; 在C中&#xff0c;多态指的是调用同一个类的…

Python算法题集_环形链表

Python算法题集_环形链表 题234&#xff1a;环形链表1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【集合检索】2) 改进版一【字典检测】3) 改进版二【双指针】 4. 最优算法 本文为Python算法题集之一的代码示例 题234&#xff1a;环形链表 …

【Elasticsearch】从入门到精通

目前java常见的针对大数据存储的方案并不多&#xff0c;常见的就是mysql的分库分表、es存储 这里偏向es存储方案&#xff0c;es不同的版本之间其实差异还挺大的&#xff0c;本篇博文版本Elasticsearch 7.14.0 Springboot整合Easy-Es Easy-Es官方文档 Elasticsearch的初步认识 …

自学Java的第十九天

一&#xff0c;每日收获 1.排序 2.冒泡排序法 3.查找 4.多维数组-二维数组 二&#xff0c;新名词与小技巧 三&#xff0c;今天学习中所遇到的困难 一&#xff0c;每日收获 1.排序 ① 排序的介绍 排序是将多个数据&#xff0c;依指定的顺序进行排列的过程。 ② 排序的…

【Rust】——rust前言与安装rust

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

使用 PyTorch 构建 NLP 聊天机器人

一、说明 聊天机器人提供自动对话&#xff0c;可以帮助用户完成任务或寻求信息。随着深度学习的最新进展&#xff0c;聊天机器人正变得越来越具有对话性和实用性。这个全面的教程将利用 PyTorch 和 Python 从头开始构建聊天机器人&#xff0c;涵盖模型架构、数据准备、训练循环…

认识Tomcat (一)

认识Tomcat &#xff08;一&#xff09; 一、服务器 1.1 服务器简介 ​ 硬件服务器的构成与一般的PC比较相似&#xff0c;但是服务器在稳定性、安全性、性能等方面都要求更高&#xff0c;因为CPU、芯片组、内存、磁盘系统、网络等硬件和普通PC有所不同。 ​ 软件服务器&…

初始数据库

华子目录 什么是数据库DBMS&#xff08;数据库管理系统&#xff09;数据库系统和文件系统的区别文件系统数据库系统对比区别优缺点总结 常见数据库关系型数据库ACID原则关系型数据库的优缺点优点缺点 非关系型数据库存储方式常见的非关系型数据库非关系型数据库的优缺点优点缺点…

BUU UPLOAD COURSE 1

进去之后是一个上传页面 尝试上传一句话木马的php代码&#xff0c;保存为一个1.php&#xff0c;然后上传 <?php eval($_POST[1]);?>发现后缀名被改为jpg了 访问一下 http://a82bcc09-b809-42c9-b5ad-5406b72e5707.node5.buuoj.cn:81/uploads/65bfa77eab1f6.jpg发现可…