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

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. Mybatis学习——传递Map型参数

    Spring整合Mybatis调用 public boolean editItemSales(int i_id, int i_sales) { Map<String, Object> ma ...

  2. RAC 之 RMAN 恢复

    RAC 下的RMAN 讲究的是备份和还原的策略要一致.备份策略的不同,会导致备份结果的分步不同,进而影响恢复的策略和步骤.一般情况下,恢复策略和备份策略必须是对应的.如果备份策略进行了修改,那么恢复也 ...

  3. android学习视频（实战项目演练）

    1.基于Android平台实战无线点餐系统(客户端(Client)和服务端(Server))①http://kuai.xunlei.com/d/xmBrDwI8CAAyXVFRa3d②http://k ...

  4. Checked Exception与Runtime Exception 的区别

    Java里有个很重要的特色是Exception ,也就是说允许程序产生例外状况.而在学Java 的时候,我们也只知道Exception 的写法,却未必真能了解不同种类的Exception 的区别. 首 ...

  5. PHP开发常见问题解决列表

    1. 学习Zend Framework tutorial过程中的问题 (1)执行"zf create project zf-tutorial"出现如下错误: '"php. ...

  6. (转载)高速ADC的关键指标：量化误差、offset/gain error、DNL、INL、ENOB、分辨率、RMS、SFDR、THD、SINAD、dBFS、TWO-TONE IMD

    (一)一个基本概念 分贝(dB):按照对数定义的一个幅度单位.对于电压值,dB以20log(VA/VB)给出:对于功率值,以10log(PA/PB)给出.dBc是相对于一个载波信号的dB值:dBm是相 ...

  7. linux下expect使用教程

    一.expect介绍 Expect是Unix系统中用来进行自动化控制和测试的软件工具,由DonLibes制作,作为Tcl脚本语言的一个扩展,应用在交互式软件中如telnet,ftp,Passwd,fs ...

  8. iOS优秀博客收录（持续更新）

    唐巧 王巍 破船之家 NSHipster Limboy 无网不剩 念茜的博客 Xcode Dev Ted’s Homepage txx’s blog KEVIN BLOG 阿毛的蛋疼地 亚庆的 Blo ...

  9. 【转】17种常用的JS正则表达式 非负浮点数 非负正数.

    <input type='text' id='SYS_PAGE_JumpPage' name='SYS_PAGE_JumpPage' size='3' maxlength='5' onkeyup ...

  10. 转】Mahout推荐算法API详解

    原博文出自于: http://blog.fens.me/mahout-recommendation-api/ 感谢! Posted: Oct 21, 2013 Tags: itemCFknnMahou ...