一、css定位

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

      1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通流中定位。

      2.绝对定位:position:absolute/fixed;元素框脱离普通文档流。  

      3.浮动:float:left/right;元素脱离普通文档流。

  二、对元素同时使用position和float的情况

    经过实践发现,无论position和float谁写在前面或后面,都是position先起作用。

      1.当position为absolute/fixed时,元素已脱离文档流,再对元素应用float失效(即不起作用)。

      2.当position为static/relative时,元素依旧处于普通流中,再对元素应用float起作用。

  

  三、css定位机制之绝对定位机制与浮动定位机制的区别

    1.用position使元素脱离普通流后,该元素不占据空间,用top/bottom/left/right决定位置。

    2.用float使元素脱离普通流后,该元素占据空间,用margin,padding等决定和周围内容的距离等。

  (该文供学习交流,欢迎大家共同探讨~)

css定位、position与float同时使用的情况的更多相关文章

  1. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  2. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  3. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  4. Css中position、float和clear整理

    Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", ...

  5. css定位position认识

    1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...

  6. Div+CSS 定位 Position

    position 属性规定应用于元素的定位方法的类型(static.relative.fixed.absolute 或 sticky). position: static;HTML 元素默认情况下的定 ...

  7. 【前段开发】10步掌握CSS定位: position static relative absolute float

    希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...

  8. CSS中position 和float的使用说明(清晰)

    当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法. 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版.或者,如果需要 ...

  9. CSS定位position

    position选项来定义元素的定位属性,选项有5个可选值:static.relative.absolute.fixed.inherit 属性值为relative.absolute.fixed时top ...

随机推荐

  1. THREE.js代码备份——webgl - geometry - dynamic(模拟海浪,通过时间(毫秒)来控制平面点的运动模拟海浪,鼠标控制写在另外的js中)

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...

  2. C# Winform 获得下拉框 选中的值

    string PrintName = cmbPrinter.SelectedIndex.ToString(); PrintName = cmbPrinter.SelectedItem.ToString ...

  3. acedinitget

    // 提示用户选择选择方式 acedInitGet(0, _T("W CP")); int nRs = acedGetKword(_T("\n请输入关键字确定选择方式[窗 ...

  4. IE低版本和高级浏览器对文本输入事件兼容

    1 一般 使用oninput 事件可以监控文本输入事实触发 2 兼容需要使用onpropertychange . 3 兼容写法   var evenInput=DOM元素.oninput || DOM ...

  5. P2746 [USACO5.3]校园网Network of Schools// POJ1236: Network of Schools

    P2746 [USACO5.3]校园网Network of Schools// POJ1236: Network of Schools 题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学 ...

  6. CF51F Caterpillar (边双+树形DP)

    题目传送门 题目大意:给你一张n个点m条边的图.每次操作可以把两个点合并成一个(与之相连的边也都要连到新点上).求把图中每个联通块都变成“毛毛虫”的最小操作次数.“毛毛虫”必须是一棵树(可以存在自环) ...

  7. 【转载】xShell5 利用 sftp 在本地和服务器之间传输文件

    sftp是Secure File TransferProtocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.sftp与 ftp有着几乎一样的语法和功能.SFTP为 SSH的一部分 ...

  8. 我理解的数据结构(一)—— 数组(Array)

    我理解的数据结构(一)-- 数组(Array) 首先,我是一个phper,但是毕竟php是一个脚本语言,如果使用脚本语言去理解数据结构具有一定的局限性.因为脚本语言是不需要编译的,如果你的语法写的不错 ...

  9. Django——12 中间件 上下文处理器 admin后台

    Django 中间件 中间件介绍 中间件的第一个例子 中间件的第二个例子 上下文处理器 admin后台管理   中间件 Django中间件(Middleware)是一个轻量级.底层的“插件”系统,可以 ...

  10. 【Codeforces 385C】Bear and Prime Numbers

    [链接] 我是链接,点我呀:) [题意] f[i]表示在x[]中有多少个数字是i的倍数 让你求出sum(f[i]) li<=i<=ri 且i是质数 [题解] 做筛法求素数的时候顺便把素数i ...