css的三种定位机制

标准文档流(Normal flow)

特点: 从上到下，从左到右，输出文档内容，由块级元素和行级元素组成。

块级元素
- 特点: 从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行。
- 常见块级标签: div, ul, li, dl, dt, p ….
行级元素
- 特点: 能在同一行内显示，不会改变HTML文档结构。
- 常见行级标签: span, strong, img, input ….

块级元素和行级元素都是盒子模型

盒子模型

盒子模型由四部分组成

边框(boder)
外边距(margin)
内边距(padding)

盒子中的内容(content)

                            top
                            |
                            |(margin)
               _____________|______________
       (border)|       (padding)|         |
               |     ___________|____     |
               |    |                |    |
               |    |                |    |
               |____|                |    |
               |    |                |    |
      left_____|    |     content    |    |______right
               |    |                |    |
               |    |                |    |
               |    |                |____|
               |    |                |    |
               |    |________________|    |
               |         |                |
               |_________|________________|
                            |
                            |
                            |
                            bottom

盒子3D模型

border
content+padding
background-image
background-color
margin

padding/margin

padding 属性是以自己为父容器，声明自己的内容的内边距

/*
 * 上内边距是 10px
 * 右内边距是 5px
 * 下内边距是 15px
 * 左内边距是 20px
 */
.example1 {
    padding:10px 5px 15px 20px;
}

/*
 * 上内边距是 10px
 * 右内边距和左内边距是 5px
 * 下内边距是 15px
 */
.example2 {
    padding:10px 5px 15px;
}

/*
 * 上内边距和下内边距是 10px
 * 右内边距和左内边距是 5px
 */
.example3 {
    padding:10px 5px;
}

/*
 * 所有 4 个内边距都是 10px
 */
.example4 {
    padding:10px;
}

margin 属性设置一个元素所有外边距的宽度(与父容器)，或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。

/*
 * 上外边距是 10px
 * 右外边距是 5px
 * 下外边距是 15px
 * 左外边距是 20px
 */
.example1 {
    margin:10px 5px 15px 20px;
}

/*
 * 上外边距是 10px
 * 右外边距和左外边距是 5px
 * 下外边距是 15px
 */
.example2 {
    margin:10px 5px 15px;
}

/*
 * 上外边距和下外边距是 10px
 * 右外边距和左外边距是 5px
 */
.example3 {
   margin:10px 5px;

}

/*
 * 所有 4 个外边距都是 10px
 */
.example4 {
    margin:10px;
}

auto 会根据浏览器的宽度自动的设置两边的外边距，外边距 = (浏览器的宽度 - 外包含层的宽度)/2。如果想让页面自动居中，当设置margin属性为auto时，不能再设置浮动或绝对定位属性。

/*
 * 自动居中
 */
.wrap{
  width: 770px;
  margin: 0 auto;
}

浮动(Floats)

可通过设置float属性实现块级元素的横向排列。属性值:

left
right
none

块级元素会左右移动，直至触碰到父容器为止，设置了浮动的元素，仍然处于标准文档流中，即仍然占据内容。

当元素没有设置宽度，而设置了浮动属性，元素的宽度随内容的变化而变化。

当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素，父容器发生塌陷。

清除浮动影响的常用方法:

clear 属性 — clear: both; ( clear: left; 或 clear: right )
同时设置 width: 100%; (或固定宽度)，overflow: hidden;

当父容器塌陷时，用 clear: both 方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动。

横向两列布局:

float — 使纵向排列的块级元素横向排列。 margin — 设置两列之间的间距。

定位(position)

通过设置 position 属性实现，能够实现横向多列布局及较为复杂的定位。

定位形式:

静态定位(static)
相对定位(relative)：相对有自身原有位置进行偏移; 仍处于标准文档流中; 随即拥有偏移属性和z-index属性。
绝对定位
- absolute
- fixed 固定定位，同属绝对定位

绝对定位

建立了以包含块为基准的定位; 完全脱离标准文档流(兄弟元素不再受其影响); 随即拥有偏移属性和z-index属性。

未设置偏移量时，无论是否存在已定位的祖先元素，都保持在元素的初始位置，脱离了标准文档流(当设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节)。

设置偏移量时，如无已定位祖先元素，以 <html> 为偏移参照基准，有已定位祖先元素时，以距其最近的已定位祖先元素为偏移参照基准。

用绝对定位实现横向布局:

用absolute实现横向两列布局，常用于一列固定宽度，另一列宽度自适应的情况。

实现:

relative —– 父元素相对定位

absolute —– 自适应宽度元素绝对定位

固定宽带列的高度 > 自适应宽度的列

absolute与fixed的相同点

完全脱离标准文档流
未设置偏移量时，都定位在父元素的左上角

absolute与fixed的不同点

偏移基准:
- absolute未设置偏移量时，无论是否存在已定位的祖先元素，都保持在元素的初始位置，脱离了标准文档流(当设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节)；设置偏移量时，如无已定位祖先元素，以<html>为偏移参照基准，有已定位祖先元素时，以距其最近的已定位祖先元素为偏移参照基准。
- fixed未设置偏移量时，有已定位祖先元素，以祖先元素为基准定位，无已定位祖先元素，以浏览器窗口为基准定位；设置偏移量时，无论有无已定位祖先元素，都以浏览器可视窗口为偏移基准。
表现形式(产生滚动条时)
- absolute位置会随滚动条变化；fixed位置固定，不会随滚动条变化，被它遮盖的元素可以从其穿过。

older
Newer