CSS 定位和浮动

CSS 定位和浮动提供了一些特性,使用这些属性,你可以建立栏布局,的重叠布局的一部分,并有一些。也可多年来完成通常需要使用的多个表格能力完成的任务。

定位的基本思路是非常easy。对于其正常位置应该出现的位置,或者相对于父元素、还有一个元素甚至浏览器窗体本身的位置。显然。这个功能非常强大,也非常让人惊讶。要知道,用户代理对 CSS2 中定位的支持远胜于对其他方面的支持,对此不应感到奇怪。

一切皆为框

div、h1 或 p 元素经常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是由于它们的内容显示在行中,即“行内框”。

您能够使用 display 属性改变生成的框的类型。这意味着。通过将 display 属性设置为 block,能够让行内元素(比方 <a> 元素)表现得像块级元素一样。还能够通过把 display 设置为 none,让生成的元素根本没有框。这种话,该框及其全部内容就不再显示,不占用文档中的空间。

可是在一种情况下。即使没有进行显式定义,也会创建块级元素。这样的情况发生在把一些文本加入到一个块级元素(比方 div)的开头。即使没有把这些文本定义为段落。它也会被当作段落对待。

CSS 定位机制

CSS 有三种主要的定位机制:普通流、浮动和绝对定位。

除非专门指定,否则全部框都在普通流中定位。也就是说。普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列。框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。能够使用水平内边距、边框和外边距调整它们的间距。

可是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包括的全部行内框。只是,设置行高能够添加这个框的高度。

以上文字都来自W3CSCHOOL的描写叙述,非常多人看了之后还只不过知道所以然,不知其所以然。

以下我用实际的样例演示给大家看。

首先介绍下定位的重要属性position

这里我们仅仅对经常使用的默认值static以及相对定位用到的relative和绝对定位absolute做一个具体的介绍

在我们定义的不论什么一个块级元素中,假设没有给其定义positon样式属性,那么它将都是默认static,块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。假设是行内元素那么将横向排列直到占满当前行。

很多其它的时候我们在div+css布局中是使用相对、绝对定位。而且绝大部分时候是混合使用。

同一时候使用position:absolute

    <div style="position:absolute;left:50px;top:50px;border:1px solid red;width:100px;height:100px;"></div>
<div style="position:absolute;left:100px;top:100px;border:1px solid #000;width:100px;height:100px;"></div>

能够看出它们都是相对于浏览器定位的。互不影响。

同一时候使用position:relative

    <div style="position:relative;left:50px;top:50px;border:1px solid red;width:100px;height:100px;"></div>
<div style="position:relative;left:100px;top:100px;border:1px solid #000;width:100px;height:100px;"></div>

能够看出第一个div还是相对于浏览器定位,第二个div的left还是100px。而top已经变为200px。这就是由于相对定位的原因由于上方已经有一个元素,第二个div的top以第一个div在占用的height为准。

先使用position:absolute,后使用position:relative

    <div style="position:absolute;left:50px;top:50px;border:1px solid red;width:100px;height:100px;"></div>
<div style="position:relative;left:100px;top:100px;border:1px solid #000;width:100px;height:100px;"></div>



能够看出第一个div还是以浏览器为绝对定位,第二个div尽管为relative但并没有受第一个div的影响,还是以浏览器定位。

先使用position:relative,后使用position:absolute

    <div style="position:relative;left:50px;top:50px;border:1px solid red;width:100px;height:100px;"></div>
<div style="position:absolute;left:100px;top:100px;border:1px solid #000;width:100px;height:100px;"></div>



这和上面一个一模一样。我们应该能够总结出一点,假设有且仅仅使用了一个相对定位,无论使用了多少个绝对定位,那个使用了相对定位的元素都不会受绝对定位元素的影响

先使用默认值static,后使用relative

    <div style="border:1px solid red;width:100px;height:100px;"></div>
<div style="position:relative;left:100px;top:100px;border:1px solid #000;width:100px;height:100px;"></div>

第二个div的top值在这里已经变为200px

先使用默认值static,后使用absolute

    <div style="border:1px solid red;width:100px;height:100px;"></div>
<div style="position:absolute;left:100px;top:100px;border:1px solid #000;width:100px;height:100px;"></div>

第二个div还是无视不论什么其他定位的元素。始终以浏览器为准

ps:假设我们不想以浏览器为绝对定位点,而是以某个我们自定义的块级元素为起始点呢,这仅仅要把这个元素的设为一个相对定位。然后它的子元素使用不论什么定位都将以它为准,而不再是浏览器。

比方:

这里全部的草绿色大框都设置了position:relative,里面的小盒子给它的所有发言为准的定位。

版权声明:本文博主原创文章。博客,未经同意不得转载。

CSS找到 (div+css请讲)的更多相关文章

  1. CSS技巧----DIV+CSS规范命名大全集合

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  2. 2天驾驭DIV+CSS (基础篇)(转)

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  3. 标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华

    以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“< ...

  4. 引人瞩目的 CSS 变量(CSS Variable)

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  5. 2天驾驭DIV+CSS (实战篇)(转)

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  6. div+css网页标准布局实例教程(二)

    五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...

  7. div+css网页标准布局实例教程(一)

    今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...

  8. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  9. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

随机推荐

  1. GUI练习——列出指定目录内容

    需求: 一个窗体里.在文本框输入路径后,摁回车键或者点击"转到"按钮后: 若路径合法,程序会自动在文本域里显示该路径下的文件目录:若路径非法,则弹出对话框,告之你路径非法.点击&q ...

  2. CSS中的特殊性、继承、层叠

    前言 最近在看<CSS权威指南>,书中第三章“结构和层叠”对特殊性的解释十分到位,今天就来整理下思路,记录如下. 初来乍到,有何不妥请多多指点,有时间的话顺便评论下,讨论讨论~ 引入问题

  3. GridView分页功能的实现

    当GridView中显示的记录很多的时候,可以通过GridView的分页功能来分页显示这些记录.如果GridView是直接绑定数据库,则很简单:将"启动分页"打勾即可. 如果是用代 ...

  4. SVN权限配置

    初始化SVN仓库后,里面有以下文件. 其中conf是对授权.认证进行管理的,conf目录里的内容有: passwd设立账户密码: authz权限管理: 假设pwd里有user1,user2两个账户 @ ...

  5. start stack

    Start OpenStack Services After launching your stack by Devstack, you maybe stop some services or reb ...

  6. Java图形化界面设计——布局管理器之BorderLayout(边界布局)

  7. What Is Your Grade?(水,排序)

    What Is Your Grade? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  8. 超级密码(bfs)

    超级密码 Time Limit : 20000/10000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submis ...

  9. Android 标签控件

    版本号:1.0 日期:2014.7.24 版权:© 2014 kince 转载注明出处      在有的应用中可能须要设置一些标签来方便用去去查询某些信息,比方手机助手或者购物软件之类都会有一些标签. ...

  10. 关于css的默认宽度

    <div class="boxa"> <div class="boxb">我是div</div> </div> ...