position几个属性的作用

1.static:默认位置

2.relative:相对的

配合top,left,right,bottom来使用

a.相对盒子原本的位置发生偏移

b.如果没有trbl会以标准流显示

c.在原来的位置占了位置

 

3.absolute:绝对的

配合 trbl使用

a.如果没有父元素,那么trbl是相对body来定位

b.如果有父元素,但父元素没有定位,那么还是相对body定位

c.如果有父元素且父元素有定位,那以父元素为基础

d.绝对定位之后的元素在页面不会占据位置

 

子绝父相

 

如果一个小盒子在大盒子中药定位且水平居中

1.先left:50%,(将小盒子在大盒子平移大盒子的一半)

2.再设置margin-left(小盒子宽度的一半),一定是负数

4.fixed:固定

配合trbl使用

a.不管页面有多大,trbl永远是相对于浏览器的边框来的

时间: 2024-12-14 20:12:22

position几个属性的作用的相关文章

position 几个属性的作用

//定位一般都会配合left 和 top 一起使用; //静态定位 : 元素默认位置; 不脱标 不常用position:static; //相对定位 : 相对于元素本身之前的位置进行定位;不脱标position:relative; //绝对定位 : 相对于有定位的父级元素的位置进行定位,如果父级元素均为定位,会相当于浏览器圆点进行定位;脱标,不占位置position:absolute; //固定定位 : 相当于浏览器原点进行定位;脱标,不占位置 原文地址:https://www.cnblogs.

(转)实例详解CSS中position的fixed属性使用

关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left". "top". "right". "bottom" 属性进行定位. 那么,我们了解了fixed属性的说明后,就可以知道它的作用了.当我们需要使一个层相对于浏览器来自动调整该层的位置的时候,如果你使用position的absolute属性来定位

link标签的rel等属性属性的作用简单介绍

link标签的rel等属性属性的作用简单介绍:大家知道通过<link>标签可以引入外部样式表,例如: <link rel="stylesheet" type="text/css" href="style.css" /> 属性解析:1.href:规定引入文件的路径.2.type:规定被链接文件的格式类型.3.rel:用来规定当前文档与被连接文档的关系.如果rel的值是stylesheet,也就是说引入的文件可以作为当前文件的

小甲鱼PE详解之IMAGE_OPTIONAL_HEADER32 结构定义即各个属性的作用(PE详解03)

咱接着往下讲解IMAGE_OPTIONAL_HEADER32 结构定义即各个属性的作用! (视频教程:http://fishc.com/a/shipin/jiemixilie/) 接着我们来谈谈 IMAGE_OPTIONAL_HEADER 结构,正如名字的意思,这是一个可选映像头,是一个可选的结构,但是呢,实际上上节课我们讲解的 IMAGE_FILE_HEADER 结构远远不足以来定义 PE 文件的属性.因此,这些属性在 IMAGE_OPTIONAL_HEADER 结构中进行定义. 因此这两个结

PE详解之IMAGE_OPTIONAL_HEADER32 结构定义即各个属性的作用(PE详解03)

咱接着往下讲解IMAGE_OPTIONAL_HEADER32 结构定义即各个属性的作用! (视频教程:http://fishc.com/a/shipin/jiemixilie/) 接着我们来谈谈 IMAGE_OPTIONAL_HEADER 结构,正如名字的意思,这是一个可选映像头,是一个可选的结构,但是呢,实际上上节课我们讲解的 IMAGE_FILE_HEADER 结构远远不足以来定义 PE 文件的属性.因此,这些属性在 IMAGE_OPTIONAL_HEADER 结构中进行定义. 因此这两个结

javascript的outerHTML属性的作用

javascript的outerHTML属性的作用:此属性可以设置或者获取指定元素内所有的文本内容.html和元素本身.可以结合innerHTML属性一起学习,从名称上就要就能够很容的分辨他们的用法,innerHTML属性可以获取一个元素内部的html内容和文本,那么outerHTML属性获取的更要宽泛一些,不但可以获取html内容和文本吗,而且可以获取元素本身.代码如下: <!DOCTYPE html> <html> <head> <meta charset=&

CSS入门:CSS中Position、Float属性深入探讨

文章来源:http://www.zretc.com/technologyDetail/430.html Position.Float是平时使用频率非常高的两个CSS属性,对于这两个属性的使用,可能大多数人存在一些模糊与不清晰的地方.今天小卓为大家分享的文章主要是对这两个属性使用上的介绍,以及两个属性交叉使用上的一些探讨. 1.HTML布局的基本要点 如果要掌握.运用好Position.Float属性必须要对HTML的两个基本点有清晰的了解. 盒子模型(box model) HTML的普通流(no

对CSS中的Position、Float属性的一些深入探讨

非常好的一篇文章,特此转载出来,文章转自:http://www.cnblogs.com/coffeedeveloper/p/3145790.html 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方.本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨. 本文主要探讨点: Position.Float属性的基本使用方法 Position.Float属性对元素所造成的影响 Posi

兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素

IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 200px; height: 200px; bord