css 定位 浮动

最新推荐文章于 2022-10-28 14:43:19 发布
最新推荐文章于 2022-10-28 14:43:19 发布
阅读量442 收藏
点赞数
分类专栏： css 文章标签： css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baby_it/article/details/42843455
版权

在开发前端或者选用第三方组件并进行简单优化调整时，都需要简单的了解css关于定位浮动的一些常识，下面就简单的梳理一下，以便记忆也为了更好的掌握好这方面的

知识。

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

普通流（文档流）：除非专门指定，否则所有框都在普通流中定位，块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来，行内框

在一行中水平布置

浮动（float）:浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块

框表现得就像浮动框不存在一样

定位（position）

relative:

absolute:

fixed:

baby_it
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS3定位和浮动详解
09-24
主要为大家详细介绍了CSS3定位和浮动的概念，以及实例代码讲解CSS3定位和浮动的使用方法，感兴趣的小伙伴们可以参考一下
CSS中的三种基本的定位机制（普通流、定位、浮动）
热门推荐
chelen_jak的专栏
12-16 1万+
一、普通流 　　普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。 　　普通流就是html文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档中的先后次序依次显示。是块级元素就占一行或多行，是行内元素就和其他元素共处一行，没什么好说的，该咋显示咋显示，一个萝卜一个坑。 二
CSS定位与浮动
m0_49034593的博客
08-18 2095
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务
CSS定位和浮动
m0_50555031的博客
05-20 1194
介绍CSS定位和浮动
CSS浮动与定位
qq_50936276的博客
10-28 992
CSS浮动与定位
css 相对定位 绝对定位 浮动 分析
09-25
W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。
理解CSS浮动float、定位position
09-27
本文针对CSS浮动float、定位position进行学习理解，通过实例帮助大家掌握CSS浮动float、定位position技巧，感兴趣的小伙伴们可以参考一下
CSS 关于浮动
09-25
浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。
99-智慧园区数据平台方案.pptx
04-27
99-智慧园区数据平台方案.pptx
node-v12.11.1-x86.msi
最新发布
04-27
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于Springboot+Vue华强北商城二手手机管理系统-毕业源码案例设计.zip
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
Excel模版：工资条模板
04-27
Excel工资条模板是一种预先设计好的电子表格文件，主要用于生成和打印员工的工资单，让员工清楚了解自己的工资组成和扣款详情。模板通常包含了以下几个关键部分： 1. **员工信息区**： - 姓名 - 员工编号/工号 - 部门 - 职位 2. **工资构成区**： - 基本工资 - 岗位工资 - 绩效奖金 - 加班工资 - 其他补贴（如交通补贴、餐补、全勤奖等） - 各项津贴（如高温补贴、取暖费等） - 其他应发收入（如年终奖、提成、福利等） 3. **扣款项目区**： - 社保扣款（养老保险、医疗保险、失业保险、工伤保险、生育保险） - 住房公积金 - 个人所得税 - 其他扣款（如迟到、旷工、违规罚款等） - 预借还款（如有） 4. **工资结算区**： - 应发工资总额 - 扣款总额 - 实发工资 5. **备注栏**： - 用于标注本月工资的特殊情况说明，如请假、调休、加班等情况。 6. **签名栏**： - 供员工确认工资数额无误后签名，也可以
29-【智慧城市与政府治理分会场】10亿大数据助推都市治理-30页.pdf
04-27
29-【智慧城市与政府治理分会场】10亿大数据助推都市治理-30页.pdf
基于Springboot+Vue的租房管理系统-毕业源码案例设计.zip
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
线路工区光缆中断抢险预案.docx
04-27
5G通信行业、网络优化、通信工程建设资料。
299-教育数据资产管理平台及配套解决方案.pptx
04-27
299-教育数据资产管理平台及配套解决方案.pptx
太戈编程第345题答案
04-27
abababababababab
css的定位和浮动属性
12-04
CSS的定位和浮动属性可以用来控制HTML元素的位置和布局。下面是它们的详细介绍： 1. 定位属性 定位属性包括：static、relative、absolute、fixed和sticky。其中，static是默认值，表示元素出现在正常的流中，不受top、bottom、left和right属性的影响；relative表示相对于元素本身的位置进行定位；absolute表示相对于最近的已定位祖先元素进行定位；fixed表示相对于浏览器窗口进行定位；sticky表示根据用户的滚动位置进行定位。 2. 浮动属性 浮动属性包括：left、right和none。浮动元素会脱离文档流，向左或向右移动，直到它的外边缘碰到包含它的元素或者另一个浮动元素的边缘为止。如果没有足够的空间，浮动元素会向下移动，直到它可以放置在页面上。 下面是一个例子，演示如何使用定位和浮动属性来布局HTML元素： ```html <!DOCTYPE html> <html> <head> <title>定位和浮动属性的例子</title> <style> .container { border: 1px solid black; padding: 10px; overflow: auto; } .box { width: 100px; height: 100px; margin: 10px; background-color: red; float: left; } .relative { position: relative; left: 50px; top: 50px; } .absolute { position: absolute; right: 50px; top: 50px; } .fixed { position: fixed; right: 50px; bottom: 50px; } .sticky { position: sticky; top: 0; } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box relative"></div> <div class="box absolute"></div> <div class="box fixed"></div> <div class="box sticky"></div> </div> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值