css定位、position与float同时使用的情况
2024-08-26 09:52:35
一、css定位
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通流中定位。
2.绝对定位:position:absolute/fixed;元素框脱离普通文档流。
3.浮动:float:left/right;元素脱离普通文档流。
二、对元素同时使用position和float的情况
经过实践发现,无论position和float谁写在前面或后面,都是position先起作用。
1.当position为absolute/fixed时,元素已脱离文档流,再对元素应用float失效(即不起作用)。
2.当position为static/relative时,元素依旧处于普通流中,再对元素应用float起作用。
三、css定位机制之绝对定位机制与浮动定位机制的区别
1.用position使元素脱离普通流后,该元素不占据空间,用top/bottom/left/right决定位置。
2.用float使元素脱离普通流后,该元素占据空间,用margin,padding等决定和周围内容的距离等。
(该文供学习交流,欢迎大家共同探讨~)
最新文章
- Vertica 导出数据测试用例
- 20145213《Java程序设计学习笔记》第六周学习总结
- 7.python模块补充
- http://stackoverflow.com/questions/12601907/loading-google-maps-in-anonymous-function
- Python 通过pickle标准库加载和保存数据对象
- ORACLE 毫秒与日期的相互转换
- SpringMVC与Mybatis框架整合遇到的坑(转)
- Java JDBC Batch
- PVST+(每个VLAN 的生成树PVST 加)
- (2)java中的集中关系,is a, has a, 继承,重点聊聊继承
- blog建表操作
- Java线程中断机制-如何中断线程
- 记录一次坑爹的Python脚本抢购低价手机经历!
- 重写Distinct
- MySQL的binlog操作
- How to Pronounce the Word THEM
- [Haskell]解决hslua unknown symbol `___s trtod'的问题
- 简单的 Android 菜单
- Spark standalone模式的安装(spark-1.6.1-bin-hadoop2.6.tgz)(master、slave1和slave2)
- 字符串aaaa......bbbb....ccc...dddddd用正则替换为abcd
热门文章
- GNSS数据下载网站
- Java单元测试 - TestNG
- Gorgeous Sequence 题解 (小清新线段树)
- 谈一谈a:link、a:visited、a:hover、a:active的正确使用顺序
- LeetCode--不同路径
- iview表单密码自定义验证
- The Morning after Halloween uva1601
- SGC强制最低128位加密,公钥支持ECC加密算法的SSL证书
- 【Codeforces 158A】Next Round
- 【codeforces 514B】Han Solo and Lazer Gun