HTML5 浮动

1. 常见网页布局

        1-3-1布局

        1-2-1布局

2. 标准文档流

3. display属性⭐

        display: block

给span元素设置成block

        display: inline

给div元素设置成inline

        display: inline-block

给div和span元素设置为inline-block

        display: none

给div元素设置为none

        display特性

4.  浮动⭐

浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。

5. 边框塌陷

        清除浮动

6. 父级边框塌陷

        加入空div

        设置父级元素高度

        给父级元素添加overflow属性

        溢出处理-overflow的属性

        父级添加伪类⭐推荐使用

        小结

7. 总结

        inline-block和float的区别

        

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

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

相关文章

若依使用RedisCache需要注意的事项

存入redis对象的时候会带一个type字段,此处需要注意 存入方: 此处需要注意,存入redis的时候会带一个type,也就是类的路径名 redisCache.setCacheObject(screenPlayQueueName, userDemondDto,userDemondDto.getPlayDuration().in…

【STM32的通用定时器CR1的CKD[1:0]: 时钟分频因子 (Clock division)】

在 STM32 的通用定时器(如 TIM2, TIM3, TIM4, TIM5 等)中,CR1 (Control Register 1) 寄存器中的 CKD[1:0] (Clock division) 位域是一个与抗干扰和数字滤波相关的设置,它并不直接影响定时器计数器 (CNT) 的计数频率(计…

渲染学进阶内容——机械动力的渲染系统(2)

Flywheel代码 这篇来研究一下实例 InstanceHandle 接口深度解析 接口核心作用 InstanceHandle 是 Flywheel 渲染引擎中的 GPU实例句柄 接口,它提供了对底层渲染实例的直接控制能力。这个接口是**实例化渲染(Instanced Rendering)**系统的核心操作接口,与之前讨论的 Vis…

Redis:极速缓存与数据结构存储揭秘

Redis —— 这个强大又灵活的 开源、内存中的数据结构存储系统。它常被用作数据库、缓存、消息代理和流处理引擎。 核心特点 (为什么它这么受欢迎?): 内存存储 (In-Memory): 数据主要存储在 RAM 中,读写操作直接在内存中进行。核心优势&…

vulnyx Diff3r3ntS3c writeup

信息收集 arp-scan nmap 这里默认的话是只有80端口的,这个22端口是我拿到root后开的 获取userFlag 直接上web看看 扫个目录 把网页拉到最下面可以看到一个文件上传点 我们尝试上传一个php文件 失败了,那xxx呢 上传成功了,看来后端的后缀名…

【构建】CMake 构建系统重点内容

CMake 构建系统重点内容 1 基本语法与结构 cmake_minimum_required() 指定使用的最低 CMake 版本,防止不同版本行为不一致: cmake_minimum_required(VERSION 3.16)project() 定义项目名称、语言和版本: project(MyApp VERSION 1.0 LANGU…

Packagerun:VSCode 扩展 快捷执行命令

Packagerun:VSCode 快捷命令扩展(兼容cursor) Packagerun 是一个为 前端和node开发者设计的 VSCode 扩展,旨在简化 package.json 中脚本的执行,并支持自定义命令以提升开发效率。通过右键菜单、快捷键或自定义配置&am…

【C语言】计算机组成、计算机语言介绍

1.1 计算机组成 1946年2月14日,由美国军方定制的世界上第一台电子计算机“电子数字积分计算机”( ENIAC Electronic Numerical And Calculator)在美国宾夕法尼亚大学问世。 计算机(俗称电脑)堪称是人类智慧的结晶,随着计算机的不断发展,各行各…

(九)山东大学软件学院项目实训-基于大模型的模拟面试系统-面试对话标题自动总结

面试对话标题自动总结 主要实现思路:每当AI回复用户之后,调用方法查看当前对话是否大于三条,如果大于则将用户的两条和AI回复的一条对话传给DeepSeek让其进行总结(后端),总结后调用updateChatTopic进行更新…

降阶法求解偏微分方程

求解给定的四个偏微分方程,采用降阶法,令 v = u x v = u_x v=ux​,从而将原方程转化为关于 v v v 的一阶方程。 方程 u x y = 0 u_{xy} = 0 uxy​=0 令 v = u x v = u_x v=ux​,则方程变为 v y = 0 v_y = 0 vy​=0。解得 v = C 1 ( x ) v = C_1(x) v=C1​(x),即 u …

提的缺陷开发不改,测试该怎么办?

经历长时间的细致检查,逐条执行数十条测试用例,终于发现一处疑似缺陷。截图留存、粘贴日志,认真整理好各项信息,将它提交到缺陷管理系统。可不到五分钟,这条缺陷就被打回了。开发人员给出的回复十分简洁:“…

【Flutter】Widget、Element和Render的关系-Flutter三棵树

【Flutter】Widget、Element和Render的关系-Flutter三棵树 一、前言 在 Flutter 中,所谓的“三棵树”是指: Widget Tree(部件树)Element Tree(元素树)Render Tree(渲染树) 它们是…

IO之详解cin(c++IO关键理解)

目录 cin原理介绍 控制符(hex、oct、dec) cin如何检查输入 cin与字符串 cin.get(char ch) cin.get(void) istream &get(char*,int) istream &get(char*,int,char) istream &getline(char*,int); 遇到文件结尾EOF 无法完成一次完整输入:设置f…

Bootstrap 5学习教程,从入门到精通, Bootstrap 5 分页(Pagination)知识点及案例代码(13)

Bootstrap 5 分页(Pagination)知识点及案例代码 Bootstrap 5 提供了强大的分页组件,帮助开发者轻松实现分页功能。以下是关于 Bootstrap 5 分页的详细语法知识点以及一个完整的案例代码,包含详细注释,帮助初学者快速上…

Dina靶机渗透

1.信息查询 1.1. Ip查询 arp-scan -l 192.168.220.137 1.2. 端口收集 nmap -T4 -A -p- 192.168.220.137 1.3. 目录扫描 dirsearch -u 192.168.220.137 -e* -i 200 通过访问 robots.txt 文件发现有些禁止访问得目录 User-agent: *Disallow: /ange1Disallow: /angel1Dis…

通俗理解存储过程注入

【通俗理解】存储过程注入:SQL注入的“豪华升级版” 一、从厨房做菜说起:为什么需要存储过程? 想象你经营一家连锁餐厅,每道菜的制作流程非常复杂(比如“招牌红烧肉”需要先焯水、再炒糖色、最后慢炖1小时&#xff09…

【算法】基于中位数和MAD鲁棒平均值计算算法

问题 在项目中,需要对异常值进行剔除,需要一种鲁棒性比较好的方法,总结了一个实践方法。 方法 基于中位数和MAD(中位数绝对偏差)的鲁棒平均值计算算法的详细过程,按照您要求的步骤分解: 算法…

插入点(position) 和对齐点(AlignmentPoint)详解——CAD c#二次开发

在 AutoCAD 中,文本对象的位置由插入点(position) 和对齐点(Alignment Point) 共同控制,两者的关系取决于文本的对齐方式。以下是详细说明: 一、插入点与对齐点的定义 1. 插入点(p…

QT打包应用

本次工程使用qt mingGw 64-bit 下面详细介绍下windows平台qt应用程序打包流程 1、先编译项目的release版本生成exe文件 2、创建脚本运行windeployqt.exe完成打包 rundeploy.bat脚本 set PATHE:\Tools\qt\Qt5\5.14.2\mingw73_64\bin;%PATH% windeployqt.exe MyDesignWidget.ex…

[软件测试]:什么是自动化测试?selenium+webdriver-manager的安装,实现你的第一个脚本

目录 1. 什么是自动化测试? 回归测试 自动化分类 2. web自动化测试 3. selenium 1. 什么是自动化测试? 通过自动化测试工具,编写脚本,自动执行测试用例,主要用于回归测试,性能测试等重复测试任务 常…