前端Flex布局
day06-Flex布局
目标:熟练使用 Flex 完成结构化布局
01-标准流
标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1MdYdSsF-1691944005696)(assets/1680334840709.png)]
02-浮动
基本使用
作用:让块元素水平排列。
属性名:float
属性值
- left:左对齐
- right:右对齐
<style>/* 特点:顶对齐;具备行内块显示模式特点;浮动的盒子会脱标 */.one {width: 100px;height: 100px;background-color: brown;float: left;}.two {width: 200px;height: 200px;background-color: orange;/* float: left; */float: right;}
</style><div class="one">one</div>
<div class="two">two</div>
特点:
- 浮动后的盒子顶对齐
- 浮动后的盒子具备行内块特点
- 浮动后的盒子脱标,不占用标准流的位置
产品区域布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NxpJVrkx-1691944005697)(assets/1680335016853.png)]
HTML标签
<!-- 版心:左右,右面:8个产品 → 8个 li -->
<div class="product"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</div>
CSS样式
<style>* {margin: 0;padding: 0;}li {list-style: none;}.product {margin: 50px auto;width: 1226px;height: 628px;background-color: pink;}.left {float: left;width: 234px;height: 628px;background-color: skyblue;}.right {float: right;width: 978px;height: 628px;background-color: brown;}.right li {float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: orange;}/* 第四个li和第八个li 去掉右侧的margin */.right li:nth-child(4n) {margin-right: 0;}/* 细节:如果父级宽度不够,浮动的盒子会掉下来 */
</style>
清除浮动
场景:浮动元素会脱标,如果父级没有高度,子级无法撑开父级高度(可能导致页面布局错乱)
解决方法:清除浮动(清除浮动带来的影响)
场景搭建
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bBGZFT6a-1691944005698)(assets/1680335081694.png)]
<style>.top {margin: 10px auto;width: 1200px;/* height: 300px; */background-color: pink;}.left {float: left;width: 200px;height: 300px;background-color: skyblue;}.right {float: right;width: 950px;height: 300px;background-color: orange;}.bottom {height: 100px;background-color: brown;}</style><div class="top"><div class="left"></div><div class="right"></div>
</div>
<div class="bottom"></div>
额外标签法
在父元素内容的最后添加一个块级元素,设置 CSS 属性 clear: both
<style>
.clearfix {clear: both;
}
</style><div class="father"><div class="left"></div><div class="right"></div><div class="clearfix"></div>
</div>
单伪元素法
- 准备 after 伪元素
.clearfix::after {content: "";display: block;clear: both;
}
- 父级使用 clearfix 类
<div class="father clearfix"></div>
双伪元素法
- 准备 after 和 before 伪元素
/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {content: "";display: table;
}/* after 清除浮动 */
.clearfix::after {clear: both;
}
- 父级使用 clearfix 类
<div class="father clearfix"></div>
overfow法
.father {margin: 10px auto;width: 1200px;/* height: 300px; */background-color: pink;overflow: hidden;
}
03-Flex布局
Flex 布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力。
Flex 模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-odLWc749-1691944005698)(assets/1680335815005.png)]
Flex组成
设置方式:给父元素设置 display: flex,子元素可以自动挤压或拉伸
组成部分:
- 弹性容器
- 弹性盒子
- 主轴:默认在水平方向
- 侧轴 / 交叉轴:默认在垂直方向
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZMNJ2Utu-1691944005699)(assets/1680335870554.png)]
主轴对齐方式
属性名:justify-content
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TQUBNDqe-1691944005699)(assets/1680335902526.png)]
侧轴对齐方式
- align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)
- align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ZsufGez-1691944005700)(assets/1680335957166.png)]
修改主轴方向
主轴默认在水平方向,侧轴默认在垂直方向
属性名:flex-direction
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ru5c7d3K-1691944005701)(assets/1680335988425.png)]
弹性伸缩比
作用:控制弹性盒子的主轴方向的尺寸。
属性名:flex
属性值:整数数字,表示占用父级剩余尺寸的份数。
弹性盒子换行
弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示。
属性名:flex-wrap
属性值
- wrap:换行
- nowrap:不换行(默认)
行内对齐方式
属性名:align-content
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C7nh2zzB-1691944005701)(assets/1680336183457.png)]
注意:该属性对单行弹性盒子模型无效。
04-综合案例 – 抖音解决方案
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fd9fueGX-1691944005702)(assets/1680336238340.png)]
整体布局
<style>
* {margin: 0;padding: 0;box-sizing: border-box;
}li {list-style: none;
}.box {margin: 50px auto;width: 1200px;height: 418px;border: 1px solid #ddd;border-radius: 10px;
}
</style><div class="box"></div>
列表布局
<style>
.box ul {display: flex;/* 弹性盒子换行 */flex-wrap: wrap;/* 调整主轴对齐方式 */justify-content: space-between;/* 调整 行对齐方式 */align-content: space-between;padding: 90px 40px 90px 60px;height: 418px;
}.box li {display: flex;width: 500px;height: 88px;/* background-color: pink; */
}
</style><div class="box"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</div>
内容样式
<style>
.box .pic {margin-right: 15px;
}.box .text h4 {line-height: 40px;font-size: 20px;font-weight: 400;color: #333;
}.box .text p {font-size: 14px;color: #666;
}
</style><ul><li><div class="pic"><img src="./images/1.svg" alt=""></div><div class="text"><h4>一键发布多端</h4><p>发布视频到抖音短视频、西瓜视频及今日头条</p></div></li><li><div class="pic"><img src="./images/2.svg" alt=""></div><div class="text"><h4>管理视频内容</h4><p>支持修改已发布稿件状态和实时查询视频审核状态</p></div></li><li><div class="pic"><img src="./images/3.svg" alt=""></div><div class="text"><h4>发布携带组件</h4><p>支持分享内容携带小程序、地理位置信息等组件,扩展内容及突出地域性</p></div></li><li><div class="pic"><img src="./images/4.svg" alt=""></div><div class="text"><h4>数据评估分析</h4><p>获取视频在对应产品内的数据表现、获取抖音热点,及时进行表现评估</p></div></li>
</ul>
相关文章:
前端Flex布局
day06-Flex布局 目标:熟练使用 Flex 完成结构化布局 01-标准流 标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。 [外链图片转存失败,源站可能有防盗链机制,建议…...
文盘Rust -- Mutex解决并发写文件乱序问题 | 京东云技术团队
在实际开发过程中,我们可能会遇到并发写文件的场景,如果处理不当很可能出现文件内容乱序问题。下面我们通过一个示例程序描述这一过程并给出解决该问题的方法。 use std::{fs::{self, File, OpenOptions},io::{Write},sync::Arc,time::{SystemTime, UNI…...
数据结构算法--2 冒泡排序,选择排序,插入排序
基础排序算法 冒泡排序 思想就是将相邻元素两两比较,当一个元素大于右侧相邻元素时,交换他们的位置,小于右侧元素时,位置不变,最终序列中的最大元素,像气泡一样,到了最右侧。 这时冒泡排序第一…...
秋招面经——快手
Mysql mysql事务 共享锁与排他锁 共享锁:允许一个事务去读一行,阻止其他事务获得相同数据集的排他锁。(读都允许读,但我在读不允许你去改) 排他锁:允许一个事务去读一行,阻止其他事务获得相同…...
【STM32RT-Thread零基础入门】 2. 新建RT-Thread项目
硬件:STM32F103ZET6、ST-LINK、usb转串口工具 文章目录 前言一、新建RT-Thread项目二、项目结构三、构建项目四、下载程序(调试器下载)五、终端交互总结 前言 RT-Thread的全称是Real Time Thread,顾名思义,它是一个嵌…...
别人直播的时候怎么录屏?分享一些录屏方法
随着互联网的快速发展,直播已经成为人们日常生活中不可或缺的一部分。但是,有时候我们可能会错过某些重要的直播内容,这时候就需要录屏来保存和观看。那么,如何录屏别人的直播呢?本文将分享一些录屏方法和技巧&#…...
React Native 在高IOS版本下无法显示图片的问题处理
图片在低ios版本下可以看到图片,在高版本ios下显示不了图片 直接上解决方法 找文件 /node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m 修改源码 原代码 if (_currentFrame) {layer.contentsScale self.animatedImageScale;layer.contents…...
SSH远程连接MacOS catalina并进行终端颜色配置
一、开关SSH服务 在虚拟机上安装了MacOS catalina,想要使用SSH远程进行连接,但是使用“系统偏好设置”/“共享”/“远程登录”开关进行打开,却一直是正在启动“远程登录”: 难道是catalina有BUG?不过还是有方法的&…...
用JSON.toJSONString转JSON时,属性的值为null时,输出的JSON里没有该属性
1、问题 用JSON.toJSONString转JSON时,当属性值为null的话,转出来的JSON里没有了值为null的属性,属性丢失了 2、原因 用fastjson将java对象转json字符串时会默认去除空字段 2、解决办法 在JSON.toJSONString方法加上SerializerFeature这一…...
Java版企业电子招标采购系统源码—企业战略布局下的采购寻源tbms
项目说明 随着公司的快速发展,企业人员和经营规模不断壮大,公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境,最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范,以…...
轻拍牛头(约数)
题意:求ai在n个数中,ai可以整除的数有多少个,不包括ai自己。 分析:暴力写需要n^2的时间复杂度,此时想一下预处理每个数的倍数,约数和倍数是有关系的,把每个数的倍数都加上1. #include<bits…...
Vc - Qt - 绘制窗口背景色
要在Qt中绘制一个背景颜色,你可以使用Qt的绘图功能来完成。下面是一种简单的方法: 步骤1:在你想要绘制背景颜色的QWidget(例如QMainWindow或QDialog)的派生类中,重写 它的paintEvent函数。步骤2:…...
js和cocos creator学习笔记
1.Javascript有哪些数据类型?举例两个最常见的内置对象数据类型? 常用的数据类型:Number,String,Boolean,Null,Undefined,Object 常见内置对象:Array,Function2.下面代码输出内容是什么? let a []; a[10] 10; console.log(a.length); console.log(a[0]); a[200] undefi…...
Ceph分布式存储系统
Ceph 是一个开源的分布式存储系统,旨在提供高性能、高可靠性和可扩展性的存储解决方案。它被设计用于管理大规模的数据,可以轻松地扩展到数千台服务器和多个存储节点,适用于私有云、公有云、虚拟化环境等多种场景。 Ceph 的主要特点和组件包…...
阿里云SMS,APi接口返回错误码
API错误码 更新时间:2023-06-29 16:33提交缺陷 产品详情 相关技术圈 我的收藏 调用API接口失败时,会返回错误码。本文档为您提供API接口错误码列表,请根据错误码和对应错误信息排查问题。 错误码(Code) 错误信息…...
Floyd算法
正如我们所知道的,Floyd算法用于求最短路径。Floyd算法可以说是Warshall算法的扩展,三个for循环就可以解决问题,所以它的时间复杂度为O(n^3)。 Floyd算法的基本思想如下:从任意节点A到任意节点B的最短路径不外乎2种可能ÿ…...
SpringBoot究竟应该如何学习?
如果你有Spring的基础,学习Spring Boot就很简单了。 首先要知道Spring Boot是建立在Spring框架之上的,它旨在简化和加速Java应用程序的开发过程。 Spring Boot的目标是简化Spring应用程序的配置和开发,通过提供自动配置、快速开发和零配置的…...
为什么很多人认为ChatGPT最好的替代工具是Claude?
ChatGPT引领着生成式AI聊天机器人领域,但Claude AI看起来是一个有力的竞争者。 前段时间,ChatGPT的强劲竞争对手Claude2面世。当时很多人认为它可能会取代ChatGPT,在体验过一段时间之后,深以为然。原因如下: 更强大的…...
学习Vue:简介和优势
什么是 Vue.js? Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它专注于视图层,并且可以轻松地集成到现有的项目中。Vue.js 的设计理念是渐进式,这意味着您可以根据项目的需要逐步引入 Vue.js,从而更好地控制应用的复…...
***is not a commit and a branch ‘***‘ cannot be created from it 报错
git执行如下代码 git checkout -b daily/1.0.0 origin/daily/1.0.0遇到报错 fatal: ‘origin/daily/1.0.27’ is not a commit and a branch ‘daily/1.0.27’ cannot be created from it 解决办法: git fetch --all原因: 报错说is not a commit而不是说branch doesn’t exis…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能,我们需要对它的功能特点进行分析: 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具: mysql:关系型数据库&am…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
