CSS position属性

position属性

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。3

JavaScript语法：object.style.position=“absolute"

值

描述
absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

将窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素，即为文档流。
使元素脱离文档流的情况：浮动 绝对定位

注意
1、relative和static方式在最外层时是以<body>标签为定位远点的，
而absolute方式在无父级是position非static定位时是以<html>作为原点的。
<html>和<body>元素相差8px左右。

2、如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，
否则left/right/top/bottom属性会使用它们的默认值 auto ，
这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，
简单讲就是都变成relative，会占用文档空间

3、使用static定位或无position定位的元素z-index属性是无效的。
当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。
此属性参数值越大，则被层叠在最上面

4、脱离正常文档流:position：absolute 和 position：fixed
正常文档流：position：relative 和 position：static

5、定位布局技巧：position：relative 与 position：absolute 结合使用:
如果对元素设置了absolute后，其父级元素都没有设置position：relative，
其会以body为父级。这样的话我们该元素定位到我们的目标位置将很困难，量像素麻烦。

当子代设置了position：absolute后，其父级那个设置了position：relative，
这个子代就会从该父级元素最左上方作为起点移动，并且遵循就近原则，即子代向上找父级，
当找到第一个有父级设置了relative就以它最左上方作为起点。
relative 与 absolute 结合的方式，对定位布局起到了便利，
需要移动的距离也得到缩小，不用从body开始整个页面来量取像素，同时也方便管理，结构清晰。


参考：
CSS之使用display:inline-block来布局

行内元素间距问题

两个inline元素span或者两个inline-block元素div写成一行，无间隙。分开写成两行，则会有间隙

去除间隙方法：

对父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙

现在这种方法已经可以兼容各种浏览器，以前chrome浏览器是不兼容的

CSS元素分类
参考：CSS元素分类

常用的块状元素有：

<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
1
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
1
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

常用的内联块状元素有：

<img>、<input>
1
inline-block 元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

posted on 2018-12-19 21:46  IndigoChao  阅读(158)  评论(0)  编辑  收藏  举报

导航