CSS学习总结3:CSS定位
CSS 定位机制
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
一、普通流
除非专门指定,否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。
二、定位
在讲解定位之前先说明相对定位和绝对定位到底是“以何为依据进行定位”:相对定位是“相对于”元素在文档中的初始位置;而绝对定位是“相对于”最近的已定位祖先元素(关于祖元素的概念在下面有实例说明),如果不存在祖先元素,那么“相对于”最初的包含块。如果想学会相对定位和绝对定位,那么必须了解这两点的区别。
2.1、相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
#box_relative {/*图中的框 2*/position: relative;left: 30px;top: 20px; }
相对定位的工作原理图如下:
2.2、绝对定位
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样:
#box_relative {/*图中的框 2*/position: absolute;left: 30px;top: 20px; }
绝对定位的原理图:
这里用实例说明一下祖元素的概念
<div><p><span></span></p> </div> /* div 相对于span来讲,就是祖辈(爷爷) */ /* span相对于p来讲,就是儿子 */ /* p相对于span来讲,就是爸爸*//* ~.~ */
2.3、浮动
CSS浮动部分请参考下一篇博客:经验分享:CSS浮动(float,clear)通俗讲解
附录:
CSS position 属性总结:
所有主流浏览器都支持 position 属性。position属性规定元素的定位类型,影响元素框生成的方式。
可能的值
值 | 描述 |
---|---|
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,如果不存在这样的父元素,则依据最初的包含快。根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定,也可以通过z-index进行层次分级。 (元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。) |
fixed |
生成固定/绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 (元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。) |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 (相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。元素框偏移某个距离。元素仍保持其未定位前的形状,仍保留原本所占的空间。 ) |
static |
默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明,即上述声明无效)。 (元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。) |
inherit | 规定应该从父元素继承 position 属性的值。(任何版本的IE浏览器均不支持此属性值) |
CSS 定位属性
CSS 定位属性允许你对元素进行定位。
属性 | 描述 |
---|---|
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
overflow | 设置当元素的内容溢出其区域时发生的事情。 |
clip | 设置元素的形状。元素被剪入这个形状之中,然后显示出来。 |
vertical-align | 设置元素的垂直对齐方式。 |
z-index | 设置元素的堆叠顺序。 |
转载于:https://www.cnblogs.com/1925yiyi/p/7920119.html
CSS学习总结3:CSS定位相关推荐
- 超细的CSS学习笔记(CSS详解)
复习CSS时记录的笔记. 从最基本的 CSS 概念开始,复习如何使用 CSS 同时控制多重网页的样式和布局.同时涉及最新版本 CSS3 的内容,掌握新的标准化组件. 文章目录 一.CSS介绍 1.CS ...
- CSS学习笔记(一) CSS基础+CSS3新特性
思维导图 文章目录 思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
- 自学html和css,学习HTML和CSS的5大理由
描述 人们学习HTML和CSS最常见的原因是开始从事web开发.但并不是只有web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面有5个你无法拒绝学习H ...
- CSS学习221~249(定位+元素的显示隐藏)
1 定位 1.1 为什么需要定位 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 1.2 ...
- html和css学习,HTML与CSS学习小结
Headfirst系列书,照相留念,用了很多便签记录知识点 Headfirst系列编程书有个特点是节奏很慢,每章包含的知识点不多就那么几个,但是比较全面,把篇幅多用在多种实际情况的演练和讲解原因上了( ...
- CSS学习笔记11 CSS背景
background-color:背景色 前面我们经常用background-color这个属性来设置元素的背景色,例如下面这条css可将段落的背景色设置为灰色 p {background-color ...
- CSS学习02之css导入方式
回顾 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作.它可以同时 ...
- HTML及CSS学习笔记 06 - CSS简介和常见的选择器
本文是HTML及CSS课程的第六课.W3C提倡网页的内容与表现分离,层叠样式表(Cascading Style Sheet)即是网页中的"表现"部分,它描述HTML标签将会显示成什 ...
- CSS学习笔记--Div+Css布局(div+span以及盒模型)
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素 内联元 ...
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
最新文章
- 2020年,那些「引爆」了机器学习社区的热门论文、库和基准
- sql 无法删除当前数据库,因为当前数据库正在使用
- 怎么在mysql创建数据库怎么加入学号_数据库怎么创建学生信息表
- RN 47 中的 JS 线程及 RunLoop
- 三面,字节跳动电商Java面经(已过)
- 机器人潘森护盾_新版潘森无伤抗塔 还能抵消死歌大招?E技能护盾机制全解析...
- 用matlab道路交通信息化,tiaffic 基于matlab十字路口交通流模拟仿真,多种集合 263万源代码下载- www.pudn.com...
- 项目经理的工具箱---走出软件作坊:三五个人十来条枪 如何成为开发正规军(三)...
- android lt;webview,Android WebView使用基础 – 圣骑士wind – 博客园
- 整屏滚动效果插件 fullpage详解
- 上微信怎么同时用计算机,怎么在电脑上同时登陆两个微信
- 约翰霍普金斯大学计算机专业,约翰霍普金斯大学计算机科学专业介绍_计算机科学专业排名及就业方向和前景-小站留学...
- CF-GYM 103119 L. Random Permutation
- js-url转换blob以及blob与base64的相互转换
- systeminfo命令
- 智能创意拼图,汇集精彩瞬间
- linux端oracle设置缓冲区大小,oracleORA-20000: ORU-10027: buffer overflow, limit of 2000 bytes
- 2014年最佳演讲Dream演讲稿(接近原稿)
- [Delphi]将一个窗体Form1嵌入另一个窗体Form2
- (CSP2019模拟)DTOJ 4624. 树