布局常用的三种:标准流、定位、浮动；

1、文档流-标准流

窗体自上而下分成一行行（元素在 (X)HTML 中的位置），并在一行行中从左到右排放元素；

2、CSS 定位 Position 属性（绝对定位、固定定位、相对定位、静态（默认））

可以设置左右上下偏移；

绝对定位：脱离了文档流，位置是相对与父元素或者浏览器左上角（也可以理解为Body），并且父元素是设置了Position 为固定/绝对/相对，如果父元素中找不到就会以浏览器左上角为位置；

固定定位：脱离了文档流，位置是由浏览器左上角为启始点；

相对定位：没有脱离文档流，位置是相对与本来该在的位置的偏移；

静态：默认值，没有脱离文档流，位置由XHTML从上至下 左到右解析；

实战总结：

定位来说占位置的有 static 静态定位和relative相对定位，没有脱离文档流，不占位置的有 absolute绝对定位和fixed固定定位，脱离了文档流。这个很重要，对我们布局标准流，有很大的影响。

我们一定要记住的口诀就是，子级绝对，父级相对。 这样对我们布局来说，是最合适的布局理念。

亲测代码如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         div{ background-color: lime;  border: solid #ff0000 1px ;width: 600px; height:50px;}

         span{ background-color: cadetblue; }

         #div1{ position:static;left: 20px; top: 100px;}

         #div2{ position:fixed; left:20px; top:10px;}

         #div3{ position: absolute; left:300px; top:20px;}

         #div4{  position: relative; left:50px; top:50px;}

         #div5{ }

     </style>

 </head>

 <body>

 this is css demo1

 this is css demo2

 <div id="div1">默认定位</div>

 <div id="div2">固定定位脱离文档流，位置相对与整个浏览器视窗,原来位置被覆盖</div>

 <div id="div3">绝对定位脱离文档流，位置相对与父元素或者浏览器左上角,原来位置被覆盖</div>

 <div id="div4">相对定位，没有脱离文档流,保留原来的位置</div>

 <div id="div5">嵌套定位分析</div>

 <span> this is span1 </span>

 <span> this is span2 </span>

 <span> this is span3 </span>

 <span> this is span4 </span>

 </body>

 </html>

3、浮动 float

浮动只能左右浮动，即浮动的目点就是可以把多个块级元素放到想要的一行上。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

看到这图应该可以想到浮动跟盒子模型有关，也就是浮动到的位置 ，其次 浮动脱离了文档流；

从基础角度浮动就这么点东西了；

如果父元素包含的都是浮动元素会造成高度塌缩为零，解决办法有几个，这里写一个最简单的吧，

加一个空的容器 如div  设置

clear: both;--清除浮动对该元素的影响，这样空的div 的位置就不会因为浮动元素脱离文档流、而去填补之前的元素的位置,从而造成元素父元素的高度变为0;

clear:

值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。 
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 <style>

     #div1,#div2{

         width: 100px;height: 100px; border: dashed #ff0000 1px;

         float: right;

     }

 #div3:after{

     clear: both;

 }

 </style>

 </head>

 <body>

 <div id="content">

     <div id="div1"></div>

     <div id="div2"></div>

     <div id="div3"></div>

 </div>

 </body>

 </html>
其他实现方式：
tag:after{ content: "";     clear: both;     display:table;

   

CSS(04) 定位的更多相关文章

  1. CSS 的定位方式和含义

    CSS 的定位方式和含义 总结一下 CSS 的定位方式.CSS 的定位 position 是处理页面布局时非常重要的属性. CSS 中有 3 种基本的定位机制:普通流.浮动和绝对定位. 在没有指定的情 ...

  2. CSS中定位机制的想法

    对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制. position:static | relative | absolute | ...

  3. 转：Selenium之CSS Selector定位详解

    CSS selector定位 CSS(Cascading Style Sheets)是一种语言,它被用来描述 HTML 和 XML 文档的样式.  百度输入框: <input name=&quo ...

  4. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  5. css的定位机制

    牛腩新闻发不系统中遇到了CSS(Cascading style sheets),第一次接触,比较陌生还!因为CSS很多关于元素定位的问题,并且很多情况下元素的位置以像素精度计.一个不小心就很头疼,为此 ...

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

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

  7. CSS之定位布局（position，定位布局技巧）

    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...

  8. Selenium自动化-CSS元素定位

    接下来,开始讲解 CSS元素定位. CSS定位速度快,功能多,但是不能向上查找,比 xpath好用,是本人认为最好用的定位方式   大致用法总结: 具体使用仿上篇博客.http://www.cnblo ...

  9. selenium中CSS选择器定位

    selenium元素定位,CSS选择器定位效率会高很多. CSS选择器用于选择你想要的元素的样式的模式.表格摘自“菜鸟教程”,具体用法可去查阅 选择器 示例 示例说明 CSS .class .intr ...

随机推荐

  1. 使用RoboCopy 命令

    经常进行文件管理操作的朋友们,不满意于Windows系统内置的复制功能,因为它太龟速了.于是大家就使用FastCopy.TeraCopy之类的软件来加速复制,但是你是否知道Windows 7已经内置快 ...

  2. [Everyday Mathematics]20150226

    设 $z\in\bbC$ 适合 $|z+1|>2$. 试证: $$\bex |z^3+1|>1. \eex$$

  3. Android圆形图片--ImageView

    [ RoundImageView.java ] package com.dxd.roundimageview; import android.content.Context; import andro ...

  4. [转]linux的du和df命令

    转自:http://blog.csdn.net/kmesg/article/details/6570800 今天也有同学问我Linux下查看目录大小的命令,现在也将前阵子学习到du/df两个命令总结一 ...

  5. c++中实现委托

    成员函数指针与高性能的C++委托(上篇) 撰文:Don Clugston 引子 标准C++中没有真正的面向对象的函数指针.这一点对C++来说是不幸的,因为面向对象的指针(也叫做"闭包(clo ...

  6. win7 共享的问题，"您可能没有权限使用网络资源"的解决办法

    重点来了,如果以上方法都不行的话,下面这个绝对有效,本人屡试不爽.1 打开受访者的guest权限2 开始--运行--gpedit.msc3 windows设置---安全设置--本地策略--用户权利指派 ...

  7. nagios监控远程主机服务可能出现的问题

    1.使用插件NRPE监控命令不存在 在添加服务的时候,命令配置文件中需要传递一个参数,那么在监控服务配置文件中,需要添加一个!表示后面的为参数. 出现未定义的命令,查看被监控主机上的配置文件,添加监控 ...

  8. 黑马程序员——Block数据类型

    Block数据类型,又被称为代码段.因为它可以封装一段代码.苹果官方建议多用block.因为在多线程控制.异步任务,集合遍历.集合排序.动画转场等方面用的很多. Block的特点: 1.Block 用 ...

  9. java 抽象类和接口

    接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 抽象类与接口是java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念 ...

  10. 使用VMware10虚拟机安装Linux系统(能力工场)

    作为IT从业人员,我们经常使用到Linux系统,但是实际开发过程我们通常在Windows平台操作,为了满足工作需要,这个时候我们通常在windows平台安装虚拟机,并在其上建立linux系统,这样就极 ...