CSS定位机制

CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。

相对定位

相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

如果将box2的框 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 20 像素，那么会在元素左边创建 20 像素的空间，也就是将元素向右移动。

只要box2设置了position为relative ，box1和box3始终不会因为box2的改变而改变。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>相对定位</title>
  6.     <style type="text/css">
  7.       .box
  8.         {
  9.           width: 200px;
  10.           height:100px;
  11.           border: 1px solid #F00;
  12.           float: left;
  13.           margin:0 0 0 30px;
  14.         }
  15.         .box2
  16.         {
  17.           position: relative;
  18.           left: 20px;
  19.           top: 50px;
  20.         }
  21.     </style>
  22.   </head>
  23.  
  24.   <body>
  25.     <div id="main">
  26.       <div class="box">box1</div>
  27.       <div class="box box2">box2</div>
  28.       <div class="box">box3</div>
  29.     </div>
  30.   </body>
  31. </html>

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

1.当都不设置浮动时：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>浮动</title>
  6.     <style type="text/css">
  7.       #main
  8.       {
  9.         border: 1px solid #000;
  10.         padding:10px;
  11.       }
  12.       .box
  13.         {
  14.           width: 200px;
  15.           height:100px;
  16.           border: 1px solid #F00;
  17.           margin:10px 0 0 30px;
  18.         }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div id="main">
  23.       <div class="box">box1</div>
  24.       <div class="box">box2</div>
  25.       <div class="box">box3</div>
  26.     </div>
  27.   </body>
  28. </html>

2.当设置box1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了box1 2，使box12 从视图中消失。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>不设置浮动</title>
  6.     <style type="text/css">
  7.       #main
  8.       {
  9.         border: 1px solid #000;
  10.         padding:10px;
  11.       }
  12.       .box
  13.         {
  14.           width: 200px;
  15.           height:100px;
  16.           border: 1px solid #F00;
  17.           margin:10px 0 0 30px;
  18.         }
  19.         .box1
  20.         {
  21.           float:left;
  22.         }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <div id="main">
  27.       <div class="box box1">box1</div>
  28.       <div class="box box2">box2</div>
  29.       <div class="box box3">box3</div>
  30.     </div>
  31.   </body>
  32. </html>

3.当都设置为浮动时，box1 向左浮动直到碰到包含框，另外两个box向左浮动直到碰到前一个浮动框。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>不设置浮动</title>
  6.     <style type="text/css">
  7.       #main
  8.       {
  9.         border: 1px solid #000;
  10.         padding:10px;
  11.         overflow: hidden;
  12.       }
  13.       .box
  14.         {
  15.           width: 200px;
  16.           height:100px;
  17.           border: 1px solid #F00;
  18.           margin:10px 0 0 30px;
  19.           float: left;
  20.         }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div id="main">
  25.       <div class="box box1">box1</div>
  26.       <div class="box box2">box2</div>
  27.       <div class="box box3">box3</div>
  28.     </div>
  29.   </body>
  30. </html>

4.清除浮动，要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

更多请参考

绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

当设置box2的position为absolute时，它就会脱离文档，相当于不存在。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>绝对定位</title>
  6.     <style type="text/css">
  7.       .box
  8.         {
  9.           width: 200px;
  10.           height:100px;
  11.           border: 1px solid #F00;
  12.           float: left;
  13.           margin:0 0 0 30px;
  14.         }
  15.         .box2
  16.         {
  17.           position: absolute;
  18.           left: 20px;
  19.           top: 50px;
  20.         }
  21.     </style>
  22.   </head>
  23.  
  24.   <body>
  25.     <div id="main">
  26.       <div class="box">box1</div>
  27.       <div class="box box2">box2</div>
  28.       <div class="box">box3</div>
  29.     </div>
  30.   </body>
  31. </html>

作者： ForEvErNoME
出处： http://www.cnblogs.com/ForEvErNoME/
欢迎转载或分享，但请务必声明文章出处。如果文章对您有帮助，希望你能 推荐 或 关注

 
 
 
 
 

CSS基础（五）：定位的更多相关文章

  1. CSS 基础：定位元素(3)<思维导图>

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  2. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  3. CSS基础-4 定位

    CSS定位和浮动 css定位:改变页面的位置 定位机制有以下三种 普通流 浮动 绝对布局 定位的属性: position:把元素放在一个静态的.相对的.绝对的.或固定的位置中 top          ...

  4. css基础回顾-定位：position

    w3school 对position定义和说明是: 定义和用法: position 属性规定元素的定位类型. 说明: 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生 ...

  5. 第五模块：WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  6. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  7. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  8. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  9. css 基础 - 3

    css 基础 - 3 20161128   一. 元素的距离计算 1,两个水平方向的容器s1,s2之间的距离计算为s: s = s1的margin-right + s2的margin-left(+默认 ...

  10. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

随机推荐

  1. Nginx学习笔记（四） 源码分析&socket/UDP/shmem

    源码分析 在茫茫的源码中,看到了几个好像挺熟悉的名字(socket/UDP/shmem).那就来看看这个文件吧!从简单的开始~~~ src/os/unix/Ngx_socket.h&Ngx_s ...

  2. JSON相关（一）：JSON.parse()和JSON.stringify()

    parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":&qu ...

  3. LRU缓存实现(Java)

    LRU Cache的LinkedHashMap实现 LRU Cache的链表+HashMap实现 LinkedHashMap的FIFO实现 调用示例 LRU是Least Recently Used 的 ...

  4. C#与数据库访问技术总结（十一）之数据阅读器（DataReader）1

    数据阅读器 当执行返回结果集的命令时,需要一个方法从结果集中提取数据. 处理结果集的方法有两个: 第一,使用数据阅读器(DataReader): 第二,同时使用数据适配器(Data Adapter)和 ...

  5. 访问IIS元数据库失败解决方法

    问题:访问元数据失败 详细信息 访问 IIS 元数据库失败. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信 ...

  6. java 解析xml

    http://developer.51cto.com/art/200903/117512.htm

  7. H5图片裁剪升级版（手机版）

    前段时间做了个跟裁剪相关的活动<用H5中的Canvas等技术制作海报>,这次公司要做个与奥运相关的活动,扫车牌赢奖. 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更 ...

  8. centos安装firefox flash插件

    centos下的firefox flash插件默认不是最新版的,安装过程如下: 将安装地址添加到repolist中 sudo yum -y install http://linuxdownload.a ...

  9. iOS-项目打包为ipa文件

    最近自己做的一个项目,由于app store发布流程比较复杂,且审核周期较长,客户希望提前能看到产品,所以我先给自己的项目打包成一个ipa文件(类似Android的apk安装包),然后发布在" ...

  10. Python之线程池

    版本一: #!/usr/bin/env python # -*- coding:utf-8 -*- import Queue import threading class ThreadPool(obj ...