CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position)

　　普通文档流

就是CSS中默认的文本文档　

普通流中，元素位置由文档顺序和元素性质决定，块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin值计算得到，行内元素在一行中水平布置

浮动

  1. 所有主流浏览器都支持 float 属性，给元素设置 float 样式 ,元素会脱离文档流 ,浮动的元素可以左右移动，直到他的外边框边缘碰到包含自己的框或者另一个浮动框的边缘。
  2. CSS 中，任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素,行内元素和行内块元素会围绕浮动框排列，块元素会被覆盖。
  3. 在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
  4. 他可取三个值:
eft 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

案列：

div{

float: left; /* 左浮动 */

 }

定位

  1. 所有主流浏览器都支持 position 属性，给元素设置position属性可以规定元素的定位类型。
  2. 任何元素都可以定位。除静态定位以外,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  3. 他可取四个值:
absolute

绝对定位，相对于 static 定位以外的第一个父元素进行定位。 (子绝父相 :绝对定位相对于父元素设置了除静态定位以外而定位,如果父级没有设置定位他会一层层向上寻找有定位的祖级 直到body元素)
fixed

绝对定位，相对于浏览器窗口进行定位。
relative

相对定位，相对定位看作普通流的一部分，移动后的元素仍占据原来的位置，移动元素会导致他覆盖其他的框。
static 默认值。没有定位。

子绝父相    案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .father {

            position: relative; /*相对定位*/

            width: 400px;

            height: 400px;

            background: yellow;

            margin: 200px auto;

        }

        .son {

            position: absolute;  /*绝对定位*/

            width: 100px;

            height: 100px;

            left: 50%;

            top: 50%;

            margin-left: -50px;

            margin-top: -50px;

            background: skyblue;

        }

    </style>

</head>

<body>

    <div class="father"> 父盒子

        <div class="son">子盒子</div>

    </div>

</body>

</html>

　

　　　　

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

  1. 1.CSS中的定位机制

    标准文档流(Normal flow) 特点: 从上到下,从左到右,输出文档内容 由块级元素和行级元素组成 块级元素: 从左到右撑满页面,独占一行 触碰到页面边缘时,会自动换行 块级标签: div.ul ...

  2. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  3. 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  4. css中的定位属性position（转）

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  5. 对css中的定位属性postion刨根解牛

    定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常 ...

  6. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  7. CSS三种定位机制

    标准文档流 块级元素撑满整个页面div,ul,li,dl,dt,p 行级元素可以一行显示多个span,strong,img,input大部分 一般不设置盒子的高度,另其自动调整 margin属性的au ...

  8. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  9. css中元素定位

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.relat ...

随机推荐

  1. Trie 树内存消耗问题

    大家都知道,Trie树(又称字典树)是一种树型数据结构,用于保存大量的字符串.它的优点是:利用字符串的公共前缀来节约存储空间. 相对来说,Trie树是一种比较简单的数据结构,比较易于理解.话说上帝是公 ...

  2. BZOJ1798：[AHOI2009]维护序列

    浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.lydsy.com/JudgeOnline/prob ...

  3. TCP/IP 详解卷一之 HTTP协议

    HTTP协议 简介 超文本传输协议(HypertextTransfer Protocol,简称HTTP)是应用层协议.HTTP 是一种请求/响应式的协议,即一个客户端与服务器建立连接后,向服务器发送一 ...

  4. JSP的优势 和劣势 与php的比较

    一 jsp的 优势 与劣势 由于JSP页面的内置脚本语言是基于Java编程语言的,而且所有的JSP页面都被编译成为Java Servlet,JSP页面就具有Java技术的所有好处,包括健壮的存储管理和 ...

  5. MySQL 学习三 关于转义

    DB2 LIKE谓词查询语句中支持 百分号(%).下划线(_)的使用,不支持方括号([])(注:它会把方括号当成实际的值而非通配符),当我们需要在LIKE 查询条件中将百分号(%).下划线(_)作为实 ...

  6. undefined reference to `pthread_create' collect2: ld returned 1 exit status

    问题原因:    pthread 库不是 Linux 系统默认的库,连接时需要使用静态库 libpthread.a,所以在使用pthread_create()创建线程,以及调用 pthread_atf ...

  7. 原生及jq方式使用ajax

    1.原生js实现Ajax方法: // 封装ajax()方法 function ajax(url,fnSucc,fnFaild){ //1.创建Ajax 对象 if(window.XMLHttpRequ ...

  8. VS2005打开VS2008项目的2种方法

    vs2008支持.net3.5,而vs2005支持.net2.0,所以使用vs2005打开vs2008的项目,要确定你的项目是.net2.0的. 下面介绍2种方法: 方法1:用记事本打开.sln文件, ...

  9. Linux命令总结_文件的输入与 输出

    1.echo命令 例子:echo string 解释:echo命令用于显示文本或变量,或者把字符串输入到文件,常用的几个特殊字符有以下几个 \c 不换行 \f 进纸 \t 调格 \n 换行 例子:ec ...

  10. [poj3140]Contestants Division树形dp

    题意:切掉树上的某条边,使分开的两棵树上各点的权值和差值最小. 与hdu2196不同的是,此题是点权,其他无太大差别,注意数据范围. 先求出每个节点的子树权值和,然后自底向上dp即可.取$\min ( ...