1,CSS 有三种基本的定位机制:普通流、浮动和绝对定位。除非专门指定,否则所有框都在普通流中定位。
2,普通流定位:块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间       距。
3,CSS position 属性
(1),static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
(2),relative:元素框相对于它原来位置偏移某个距离。它原本所占的空间仍保留。
(3),absolute:元素框从文档流完全删除,并相对于其包含块定位(离他最近的relative)。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占             的空间会关闭,就好像元素原来不存在一样。绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
(4),fixed:元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

4,css浮动:动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

CSS定位机制总结的更多相关文章

  1. CSS定位机制

    CSS中,存在3种定位机制:标准文档流(Normal flow) * 特点:从上到下,从左导游,输出文档内容 * 由块级元素和行级元素组成 浮动(Floats) * 能够实现横向多列布局 * 设置了浮 ...

  2. CSS定位机制:浮动 float及清除浮动的常用方法

    CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...

  3. CSS定位机制之浮动定位float

    一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果   (一).块元素(div)在文档流中默认垂直排列,如果 ...

  4. CSS 定位机制 position

    position属性W3School有详细介绍 1.(position:relative;)相对定位会按照元素的原始位置对该元素进行移动.relative 2.(position:absolute;) ...

  5. CSS中的三种基本的定位机制

    CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...

  6. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  7. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

  8. CSS 定位 (Positioning) 实例

    CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...

  9. CSS学习总结3:CSS定位

    CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...

随机推荐

  1. Oracle的权限管理

    --授予系统权限语法 grant system_privilege | all privileges --可以设置select any dictionary权限之外的索引系统权限 to {user i ...

  2. Oracle数据库操作语言(DML)

    --insert添加语句 insert into table_name(column_name,column_name,...) values (data1,data2,...); --通过表添加数据 ...

  3. GitHub基本使用

    什么是GitHub? GitHub是用于版本控制和协作的代码托管平台.它可以让您和其他人在任何地方一起工作 本教程教你如GitHub必需资源,如仓库,分支,提交和拉请求.您将创建自己的Hello Wo ...

  4. linux命令学习笔记(16):which命令

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. locate 配合数据库查看文件位置. f ...

  5. ACM学习历程—广东工业大学2016校赛决赛-网络赛E 积木积水(最值问题 || 动态规划)

    题目链接:http://gdutcode.sinaapp.com/problem.php?cid=1031&pid=4 这个题目自然会考虑到去讨论最长或者最短的板子. 笔上大概模拟一下的话,就 ...

  6. bzoj 4260: REBXOR Trie+乱搞

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=4260 题解: 啊啊啊. 被这种SB题坑了半天. 求出异或前缀和后 从n到1枚举\(r_1 ...

  7. webpack打包APP的后端地址处理

    PC端我们用webpack打包,只需要写相对路径,发布的时候和后端接口在同一目录下即可. 但是做过APP或者混合开发的同学都知道,APP不需要发布的,如果后端地址还是用相对路径的话,可想而知,调用后端 ...

  8. bzoj 2535 & bzoj 2109 航空管制 —— 贪心+拓扑序

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2535 https://www.lydsy.com/JudgeOnline/problem.p ...

  9. 开启现有android项目

    开启工程 在屏幕上方的选单列上,选择「File->New->Project」, 会弹出「New Project」对话视窗.Eclipse 是通用的编辑环境,可根据你所安装的不同扩充套件而支 ...

  10. JUST第二界算法设计大赛题解

    1.问题描述: 悠悠假期同叔叔一起去书店,他选中了六本书,每本书的单价(单位:元)分别为:3.1,1.7,2,5.3,0.9 和7.2.不巧的是,叔叔只带了十几块钱,为了让悠悠高兴,叔叔同意买书,但提 ...