标准文档流

块级元素撑满整个页面div，ul，li，dl，dt，p

行级元素可以一行显示多个span，strong，img，input大部分

一般不设置盒子的高度，另其自动调整

margin属性的auto值适用于盒子相对于浏览器的自动居中

浮动

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

设置浮动的盒子会覆盖在正常的标准文档布局盒子之上。

元素设置浮动属性后，会对后面的元素产生影响（紧邻其后面的元素）。后面元素的文字不会被覆盖。文字总是想方设法地显示出来

若设置float=left，则该元素会在其父元素中左移，若紧接着的元素还设置float：left，则其紧挨着左边的元素，不覆盖它。

清除浮动元素对它后面元素的影响（设置对象是受到浮动影响的元素）：

若受影响的元素是后面的元素：clear：both，left，right选一个。或者设置width：100%+overflow（充满，溢出）：hidden

父级元素也会受到浮动元素的影响，也要清除浮动设置width：100%+overflow（充满，溢出）：hidden  用这种方法清除浮动时不要再设置浮动元素的具体高度，因为如果内容超出，会被隐藏。

清除浮动：

绝对定位（ absolute positioning）

实现横向多列布局及较为复杂的定位。

position的属性值：static（静态定位，仍处在标准文档流），relative（相对定位），absolute（绝对定位），fixed（固定定位）

relative：相对于自身原有位置进行偏移（用上下左右四个属性设置），仍处于标准文档流（如果空间不够，会撑开外面的盒子），随机拥有偏移属性和z-index属性

absolute：已包含块为基准的定位，完全脱离标准文档流（对兄弟元素不产生影响），随机拥有偏移属性和z-index属性

{

如果没有设置偏移量：

无论是否存在已定位祖先元素（设置了相对，绝对，固定定位的一种，一般设置为相对定位简单些），都保持在元素初始位置；脱离标准文档流；设置好的宽度失效，实际宽度随着内容的变化而变化

如果设置了偏移量：

如果没有已定位祖先元素：以<html>为偏移参照基准

如果有已定位祖先元素：以离它最近的祖先元素为参照基准。

}

使用absolute实现横向两列布局（用于一列固定宽度，另一列宽度自适应）

1.为其父元素设置relative相对定位，2.设置自适应宽度元素绝对定位。3.确保满足固定宽度元素的列高度>自适应元素宽度的列（设置absolute的元素脱离了标准文档流，无法撑开父元素）  此时再用margin属性设置间距指的是对父元素的间距。

1、盒子的浮动

* CSS 中有一个 float 属性，默认为 none，即标准流。通过设置 float 属性的值为 left 或 right，元素会向其父元素的左侧或右侧靠近，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来确定。

* clear 属性：作用是为了消失由于使用 float 后，浮动的盒子对其他盒子的影响。clear 的值有 left、right 和 both，分别表示消除左边的影响、消除右边的影响和消除左右两边的影响。

ps：

* 通过使用 CSS 布局，可以实现在 HTML 不做任何改动的情况下，调换盒子的显示位置。实际应用中，确定内容的逻辑位置，可以把内容最重要的放在前面，次要的放在后面，再通过 CSS 来确定内容的显示位置。

* 对 clear 属性的设置要放到设置 float 后面的盒子中，才能有效消除影响。

2、盒子的定位

* 广义的“定位”：泛指一个网页排版中的定位操作，使用任何 CSS 规则来实现。

* 狭义的“定位”：通过设置 CSS 中的属性 position 来进行定位。

* position 的取值包括：

（1）static：默认的属性值，按照标准流（包括浮动方式）进行布局。

（2）relative：称为相对定位，使用相对的盒子的位置常以标准量的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。

相对定位仍在标准流中，它对父块和兄弟块盒子没有任何影响。

（3）absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。

绝对定位从标准流中脱离，并且以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。没有已经定位的祖先元素，则以浏览器窗口为基准进行定位。

（4）fixed：固定定位，与绝对定位类似，以浏览器窗口为基准进行定位，拖动浏览器窗口的滚动条时，位置保持不变。

ps：

* 当 position 属性设置为 relative、absolute 和 fixed 时，通过设置 left、right、top 和 bottom 来指定偏移量。这 4 个属性除了可以设置绝对的像素数外还可以设置百分数。

* “已经定位”元素的含义是：position 属性被设置，并且不是 static。

* 绝对定位的特殊性质：如何设置了绝对定位，而没有设置偏移属性，那它将保持原来的位置。可用于需要使某个元素脱离标准流，而需要保持在原来位置的情况。

3、z-index 空间位置

* z-index 属性用于调整定位时重叠块的上下位置。默认值为 0，可以设置为正数或负数，当两个块的 z-index 值相同时，保持原来的高低覆盖关系。

4、盒子的 display 属性

* 可以通过设置 display 属性来确定盒子的类型。inline 表示行内元素，block 表示块级元素，none 表示无用于隐藏元素。

CSS三种定位机制的更多相关文章

  1. 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

    html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...

  2. Oracle数据库的三种验证机制

    关于超级管理员登陆不需要密码因为: 数据库的三种验证机制: 操作系统验证(具有sysdba和sysopera的用户) 密码文件验证(具有sysdba和sysopera的用户) 数据库验证(普通用户) ...

  3. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  4. CSS三种样式

    CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...

  5. gtest 三种事件机制

    前言: 1.首先说明gtest中事件的结构层次: 测试程序:一个测试程序只有一个main函数,也可以说是一个可执行程序是一个测试程序.该级别的事件机制会在程序的开始和结束执行. 测试套件:代表一个测试 ...

  6. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  7. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  8. Oracle基础学习2--Oracle登录与三种验证机制

    首先,Oracle安装完毕有三个默认用户 Ø  Sys:数据库对象的拥有者.权限最高.password在安装的时候(口令管理)能够改变 Ø  System:数据库管理员,password为manage ...

  9. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

随机推荐

  1. JAVA基础知识之数据类型

    JAVA的数据类型知识点主要包括基本数据类型,包装类,字符串类(String,StringBuffer, StringBuilder区别和用法),数组,数据类型转换等等,暂时只想到这么多,后面会再补充 ...

  2. InheritableThreadLocal原理

    转载:https://github.com/pzxwhc/MineKnowContainer/issues/20 介绍 InheritableThreadLocal 之前,假设对 ThreadLoca ...

  3. winform中利用反射实现泛型数据访问对象基类(3)

    继续完善了几点代码 满足没有主键的情况下使用 并且完善实体字段反射设置value时的类型转换 /// <summary> /// DAO基类 实体名必须要与数据表字段名一致 /// < ...

  4. Windows手动添加开机启动项

    @方法1. 添加程序完整路径到注册表HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run下 或者添加到HKEY_CURREN ...

  5. [Django_1_0]初次见面

    Django 初次见面 文章将写安装和第一次使用时候的操作.文章是照着文档做的,但是以后的内容会有不一样. 安装 pip install django 我这里是使用python3的,也可以使用 pip ...

  6. promise理解

    每个操作都返回一样的promise对象,保证链式操作 每个链式都通过then方法 每个操作内部允许犯错,出了错误,统一由catch error处理 操作内部,也可以是一个操作链,通过reject或re ...

  7. Codeforces Round #368 (Div. 2) A

    Description Small, but very brave, mouse Brain was not accepted to summer school of young villains. ...

  8. Data

    [pdf你真可爱] [题目分析] 上午考试想到用二分答案做,写残了... 设两个数列,a和b,a表示磁头,看作指针,b就是要扫描的那个序列. 假设一个答案mid,就是a中的数字走mid步能否到达b中的 ...

  9. BZOJ 3226: [Sdoi2008]校门外的区间

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3226 题意:初始集合S为空.模拟四种集合操作:集合并.交.差.补集并. 思路:区间 ...

  10. DirectX 3d 取景变换

    在世界坐标系中,几何体和摄像机都是相对于世界坐标系定义的.但是当摄像机的位置和朝向任意时,投影变换及其它类型的变的就略显困难或效率不高.为了简化运算,我们将摄像机变的至世界坐标系原点,并将其旋转,使摄 ...