当前位置: 首页 > ai >正文

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.xdnf.cn/news/13491.html

相关文章:

  • 统计可分解整数的数量
  • leetcode1584. 连接所有点的最小费用-medium
  • 2025低空经济区的安全与应急控制专题研讨会(SECOLZ 2025)
  • DDoS攻防实战:从应急脚本到AI云防护系统
  • 2025年智慧城市与管理工程国际会议(ICSCME 2025)
  • 第二章——线性表之循环链表、静态链表
  • 机械ERP需要解决的几个问题?关于非标机械行业物料编码,如何提升建立效率的说明!
  • 【深度学习】深度学习中的张量:从多维数组到智能计算单元
  • GO语言使用gorm的dbresolver插件实现数据库读写分离
  • iOS开发申请组播/广播权限​
  • 【C/C++】long long 类型传参推荐方式
  • asio之静态互斥量
  • 【PmHub面试篇】集成 Sentinel+OpenFeign实现网关流量控制与服务降级相关面试题解答
  • 远程io模块在汽车流水线的应用
  • 深度学习工具四剑客:Anaconda、Jupyter、PyTorch与CUDA详解
  • 达梦数据库dsc集群+异步主备
  • DeviceNet转Modbus RTU网关在玻璃制造中的关键应用
  • 如何制定兼容多个项目的整体时间计划?
  • Vue.js $emit的介绍和简单使用
  • 【leetcode-合并两个有序链表】
  • Codeforces Round 1029 (Div. 3)
  • C语言数据结构笔记6:使用宏和指针来设置和操作嵌套在结构体中的联合体数组的特定位
  • OC学习—Block初探(简易版)
  • 【实战指南】前端项目Nginx配置全流程:从打包部署到解决跨域/路由循环问题
  • 在C# 中使用建造者模式
  • 算法题(167):FBI树
  • Oracle日志体系和遇到问题后日志排查路径
  • 行为模式-责任链模式
  • 进行性核上性麻痹健康护理指南:全方位照护之道
  • Pytorch 的编程技巧