CSS的定位元素position用法
来源:互联网 发布:vmware软件购买 编辑:程序博客网 时间:2024/06/06 01:28
CSS 定位和浮动
CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
CSS 定位机制
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
position——规定元素的定位类型。通常是设置参照物
top,right,bottom,left,z-index——设置位置
top是设置对象 参照 相对物顶边界向下偏移位置。
right是设置对象 参照 相对物右边界向左偏移位置。
bottom是设置对象 参照 相对物底边界向上偏移位置。
left是设置对象 参照 相对物左边界向右偏移位置。
z-index设置对象的层叠顺序。也可以把其理解为z轴的大小,默认值为0,值越大,就越在上面一层。
但是需要注意的是z-index具有栈的概念,即两个z-index进行比较的时候,会先比较两者的参照物(多为父元素)的z-index,再比较元素本身的z-index。
当然如果没有设置z-index,就考虑用文档流来比较,后边的会覆盖前面的。
position:static | relative | absolute | fixed
默认值:static 静态的,不变的。没有定位,也就是按照正常的文档流进行排列。
position: relative 相对定位
1.仍在文档流中;
2.参照物为元素本身。
最重要的使用场景:绝对定位的参照物。
position:absolute 绝对定位
1.默认宽度为内容宽度;
2.脱离了文档流;
3.参照物为第一个定位祖先(即父辈或者祖先元素设置了position:relative/absolute)或根元素(html元素)。
使用场景:轮播头图
position:fixed 固定定位
1.默认宽度为内容宽度;
2.脱离了文档流;
3.参照物为视窗。所以当出现滚动条时,对象不会随着滚动。
使用场景:固定顶栏,遮罩布局,三行自适应布局。
- CSS的定位元素position用法
- CSS元素的定位属性position
- css定位属性position的用法
- CSS background-position 背景定位的用法
- CSS元素之position 定位
- CSS的Position元素定位和Display元素
- CSS元素POSITION的用法一例
- CSS 定位属性position用法
- css 中的元素定位 (position 元素)
- css的position定位
- CSS的position定位
- css的定位position
- CSS:元素定位之position属性
- div+css的position定位
- CSS的定位之position
- CSS定位position的理解
- css关于position属性的用法(绝对定位和相对定位的混淆)
- CSS-- 元素的定位
- css中为什么经常见到img{dispaly:block}?
- 关于HTML标签的总结
- linux以rpm方式安装ftp软件
- CSS中background用法
- text-align:center和margin:0 auto的用法和区别
- CSS的定位元素position用法
- CSS中float布局用法
- Java构造方法的应用
- css中消除浮动有哪些方式?
- flex的用法分析
- OpenACC与OpenHMPP的一点区别
- C++学习笔记:对文件流的写入和读取
- git 基础使用命令
- Lintcode_123 Word Search