CSS2.1规定了3种定位方案

1.Normal flow：普通流(相对定位 position relative、静态定位 position static)

　　普通流（normal flow，国内有人翻译为文档流）：普通流默认是静态定位，将窗体自上而下分成一行一行,块级元素从上至下、 行内元素在每行中按从左至右的挨次排放元素,即为文档流。

2.Float:浮动流

　　浮动流：元素的浮动，即可以让一个元素脱离原来的文档流，漂到另一个地方，漂到左边或右边等等。

3.Absolute position：绝对定位

　　绝对定位：就是直接将元素的位置写清楚，距离它的外层元素的左边、右边等多少距离。

第一部分、普通流Normal Flow演示：

代码：

CSS_Position.html

  1. <!doctype html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="descripition" conent="this is an example">
  6.         <meta name="keywords" conent="html,css">
  7.  
  8.         <link rel="stylesheet" style="text/css" href="CSS_Position.css">
  9.  
  10.         <title> CSS的定位和浮动</title>
  11.  
  12.      </head>
  13.      <body>
  14.          <div class="div1">
  15.          </div>
  16.  
  17.          <div class="div2">
  18.          </div>
  19.  
  20.          <div class="div3">
  21.          </div>
  22.      </body>
  23. </html>

CSS_Position.css：静态定位  <position static 从上到下>

  1. .div1{
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: green;
  5.     display: block;/*默认块换行模式,可以不用写*/
  6. }
  7.  
  8. .div2{
  9.     width: 200px;
  10.     height: 200px;
  11.     background-color: red;
  12.     display: block;/*默认块换行模式,可以不用写*/
  13. }
  14.  
  15. .div3{
  16.     width: 200px;
  17.     height: 200px;
  18.     background-color: blue;
  19.     display: block;/*默认块换行模式,可以不用写*/
  20. }

效果图：

CSS_Position.css：静态定位  <position static 从左到右>

  1. .div1{
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: green;
  5.     display: inline-block;/*先不换行,从左往右排列*/
  6. }
  7.  
  8. .div2{
  9.     width: 200px;
  10.     height: 200px;
  11.     background-color: red;
  12.     display: inline-block;/*先不换行,从左往右排列*/
  13. }
  14.  
  15. .div3{
  16.     width: 200px;
  17.     height: 200px;
  18.     background-color: blue;
  19.     position: relative;
  20.     display: inline-block;/*先不换行,从左往右排列*/
  21. }

效果图：

CSS_Position.css:相对定位　<position relative>

  1. .div1{
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: green;
  5. }
  6.  
  7. .div2{
  8.     width: 200px;
  9.     height: 200px;
  10.     background-color: red;
  11.     top: -10px;/*距离顶部上移动10像素*/
  12.     left: 20px;/*距离左边移动20像素*/
  13.     position: relative;/*此时是相对定位，如果换成静态定位static，那么设置的top,left等是没有任何作用的*/
  14. }
  15.  
  16. .div3{
  17.     width: 200px;
  18.     height: 200px;
  19.     background-color: blue;
  20. }

效果图：

第二部分、Float 浮动流演示：　　

CSS_Position.css：浮动一个元素

  1. .div1{
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: green;
  5. }
  6.  
  7. .div2{
  8.     width: 200px;
  9.     height: 200px;
  10.     background-color: red;
  11.     float: right;  /*div2块浮动到网页的右边*/
  12. }
  13.  
  14. .div3{
  15.     width: 200px;
  16.     height: 200px;
  17.     background-color: blue;
  18. }

效果图：

CSS_Position.css：三个元素全部浮动

  1. .div1{
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: green;
  5.     float: left;/*div1块浮动到网页的左边*/
  6. }
  7.  
  8. .div2{
  9.     width: 200px;
  10.     height: 200px;
  11.     background-color: red;
  12.     float: left;/*div2块浮动到网页的左边*/
  13. }
  14.  
  15. .div3{
  16.     width: 200px;
  17.     height: 200px;
  18.     background-color: blue;
  19.     float: left;/*div3块浮动到网页的左边*/
  20. }

效果图：

CSS_Position.css：清除浮动元素

  1. .div1{
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: green;
  5. }
  6.  
  7. .div2{
  8.     width: 200px;
  9.     height: 200px;
  10.     background-color: red;
  11.     float: right;/*div2块浮动到右边*/
  12. }
  13.  
  14. .div3{
  15.     width: 200px;
  16.     height: 200px;
  17.     background-color: blue;
  18.     clear: right;/*清除div3右边的浮动，当然也可以左边left、两边both*/
  19. }

效果图：

第三部分、Absolute position绝对定位演示：

CSS_Position.html

  1. <!doctype html>
  2. <html lang="zh-CN">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="descripition" conent="this is an example">
  6.         <meta name="keywords" conent="html,css">
  7.  
  8.         <link rel="stylesheet" style="text/css" href="CSS_Position.css">
  9.  
  10.         <title> CSS的定位和浮动</title>
  11.  
  12.      </head>
  13.      <body>
  14.          <div class="div1">
  15.          </div>
  16.  
  17.          <div class="div2">
  18.          </div>
  19.  
  20.          <div class="div3">
  21.               <div class="mylabel">
  22.               </div>
  23.          </div>
  24.      </body>
  25. </html>

CSS_Position.css: mylabel的默认位置

  1. .div1{
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: green;
  5. }
  6.  
  7. .div2{
  8.     width: 200px;
  9.     height: 200px;
  10.     background-color: red;
  11. }
  12.  
  13. .div3{
  14.     width: 200px;
  15.     height: 200px;
  16.     background-color: blue;
  17.      position: relative;
  18. }
  19.  
  20. .mylabel{
  21.     width: 40px;
  22.     height: 40px;
  23.     background-color: yellow;
  24. }

效果图：

CSS_Position.css：绝对定位、使用绝对定位改变mylabel的位置，使mylabel距离外层顶部-10px，距离外层右边10px：

  1. .div1{
  2.     width: 200px;
  3.     height: 200px;
  4.     background-color: green;
  5. }
  6.  
  7. .div2{
  8.     width: 200px;
  9.     height: 200px;
  10.     background-color: red;
  11. }
  12.  
  13. .div3{
  14.     width: 200px;
  15.     height: 200px;
  16.     background-color: blue;
  17.     position: relative;
  18. }
  19.  
  20. .mylabel{
  21.     width: 40px;
  22.     height: 40px;
  23.     background-color: yellow;
  24.     position: absolute;
  25.     top: -10px;
  26.     right: 10px;
  27. }

效果图：

CSS：CSS定位和浮动的更多相关文章

  1. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

  2. css的定位和浮动

    定位 浮动 float代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

    一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...

  4. CSS中定位和浮动对行内元素的宽高的影响

    行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...

  5. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  6. CSS彻底研究(3) - 浮动,定位

    Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...

  7. CSS中的定位与浮动

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

  8. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  9. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

随机推荐

  1. Js操作Select大全

    判断select选项中 是否存在Value="paraValue"的Item 向select选项中 加入一个Item 从select选项中 删除一个Item 删除select中选中 ...

  2. 【C语言】14-返回指针的函数与指向函数的指针

    前言 前面我们花了接近3个章节学习指针,应该都感受到指针的强大了吧.指针可以根据地址直接操作内存中的数据,使用得当的话,不仅能使代码量变少,还能优化内存管理.提升程序性能.关于指针的内容还非常多,比如 ...

  3. git实用攻略

    Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. 下面是实用教程,免基础. 一.安装git https://git-scm.com/downloads 二.git创建 ...

  4. Oracle创建自增字段方法-ORACLE SEQUENCE的简单介绍

    引用自 :http://www.2cto.com/database/201307/224836.html   Oracle创建自增字段方法-ORACLE SEQUENCE的简单介绍 先假设有这么一个表 ...

  5. Spring3.1 Cache注解

    依赖jar包: <!-- redis --> <dependency> <groupId>org.springframework.data</groupId& ...

  6. Apache Spark技术实战之2 -- PackratParsers实例

    欢迎转载,转载请注明出处,徽沪一郎 概要 通过一个简明的Demo程序来说明如何使用scala中的PackratParsers DemoApp import scala.util.parsing.com ...

  7. 39. 求分数序列前N项和

    求分数序列前N项和 #include <stdio.h> int main() { int i, n; double numerator, denominator, item, sum, ...

  8. jQuery 复合选择器的几个例子

    <!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js Author:博客园小dee --> 一. 复合选择器对checkbox的相关操作 1 <inp ...

  9. apache的prefork的详解

    apache的prefork的参数详解:ServerLimit 2000 这是最大进程数的阀值StartServers 25  启动时建立的子进程MinSpareServers 25 最小空闲进程Ma ...

  10. nginx高并发优化

    一、一般来说nginx 配置文件中对优化比较有作用的为以下几项： 1.  worker_processes 8; nginx 进程数，建议按照cpu 数目来指定，一般为它的倍数 (如,2个四核的cpu ...