浅谈CSS中的定位知识
2024-08-30 18:45:39
1,静态定位(static)
表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化;
2,相对定位(relative)
将移动元素盒,但是它在文档流中的原始空间会保留下来;
相对定位元素有如下几个基本特征:
1,、使用CSS样式规则{position: relative;}声明;
2、使用一个到多个偏移属性(top、right、bottom、left)相对于它们在正常文档流中的初始位置定位。没有
设置偏移属性的,默认被设置为auto;
3、在文档流中所占据的原始空间被保留;
4、可能会覆盖其它的元素。
3,绝对定位(absolute)
是指元素盒彻底从文档流中脱离出来,并相对于其容器块进行定位。因为这些元素从文档流中脱离出来,
所以它们不再影响周边的元素的布局,并且它们占据的空间不被保留。
绝对定位元素有如下几个基本特征:
1、使用CSS样式规则{position:absolute;}声明;
2、使用一到多个偏移属性(top、right、bottom、left)相对于其容器块的边缘进行定位。没有设置偏移属性的,默认被设置为auto。
偏移值应用于元素盒的外边缘(如果有margin值的话,就包括margin值)。
3、绝对定位的元素完全从文档流中脱离出来。该元素在正常文档流中所占据的空间不保留,并且它不再影响其它元素
(例如,文本不会围绕着它)
4,固定定位(fixed)
与绝对定位类似,元素从文档流中脱离,但是它们不是相对于容器块定位,而是相对于视口(viewpoint)定位(大多数情况下,
这个视口就是指浏览器窗口)。如果position属性没有设置,那么就是静态定位,固定定位目前有些浏览器不支持。
最新文章
- J2EE学习路线图
- Caused by: java.lang.NoClassDefFoundError:
- Post方式的Http流请求调用
- php disk_free_space与disk_total_space实例介绍
- html注意
- **IOS:xib文件解析(xib和storyboard的比较,一个轻量级一个重量级)
- 现代的新语言--Swift初探
- 打开较大存储量的.sql文件时,出现SQL Server 阻止了对组件 'xp_cmdshell' 的 过程'sys.xp_cmdshell' 的访问
- Xcode中如何集成Unity
- (10)集合之双列集合Map,HashMap,TreeMap
- linux 一键安装lnmp环境
- Python3.7 Scrapy crawl 运行出错解决方法
- Compiling U-Boot
- Linux LB--负载均衡和高可靠
- HDU 4918 Query on the subtree(动态点分治+树状数组)
- Tomcat如何开启SSL配置(https)
- 遛老虎网 http://6laohu.com/
- iOS开源项目周报0330
- Codeforces Round #275 (Div. 1)A. Diverse Permutation 构造
- [leetcode]Convert Sorted List to Binary Search Tree @ Python