CSS ——浮动与定位元素

原创 2017年03月15日 18:05:29

     元素分为正常流和非正常流,非正常流中包含浮动与定位

     先说定位,定位包含相对定位(relative)、绝对定位(absolute)以及固定定位(fixed)

     position属性:static(默认)| relative | absolute | fixed       无继承性

     相对定位:

      position:relative 

     相对定位元素被看做正常流文档的一部分,元素之前的位置保留,可以完全覆盖文档中其他元素

     相对定位的位置变化是相对于元素之前的原始位置来说的

     其包含块同正常流

     他的偏移属性有:top bottom left right  设置的数值是相对于原始位置的边偏移

       

     绝对定位:

     position:absolute

     绝对定位元素会从文档流中删除,不会流入其他元素,元素之前的位置不保留

     绝对定位的包含块是最近的position值不为static(默认)的祖先元素

          1.如果这个祖先元素为块级元素,包含块为该元素内边距边界

          2.如果这个祖先元素是行内元素,包含块为该元素内容区边界

          3.如果没有已定位祖先元素,其包含块为初始包含块

     元素绝对定位时会为其后代建立一个包含块。

     元素相对于包含块边偏移,除了bottom的任意边设置为auto时,定位元素会与改元素原始该边位置相对齐


    固定定位

    position:fixed

    固定定位类似于绝对定位,其包含块为初始包含块。


    再说浮动

    float属性:left | right | none(默认)

    浮动元素脱离正常流,其包含块为最近的块级祖先元素

    浮动元素会生成一个块级框,元素外边距不会被合并

    浮动元素规则:

1.浮动元素尽量高的放置,但浮动元素的左右边界不能超过其包含块的左右内边界

2.浮动元素不会重叠,一个浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高

3.浮动元素不能超过包含块的的内顶端,但是可以超过下边,若浮动元素与正常流元素冲突:

     a.与行内框冲突,其行框、背景、文字都在浮动元素之上

     b.与块框冲突,其边框和背景在浮动元素之下,而内容在之上

4.如果源文档中一个浮动元素之前出现另一个元素,浮动元素的顶端不能比包含该元素的生成框的任何行框更高


    clear 属性: left | right | both

    clear属性用来避免该元素左右出现浮动元素,根据练习发现,如果想让一个行内元素的左右没有浮动元素,必须将该元素先转化为块级元素,即将clear与display:block组合使用才能真正达到目的

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS布局——元素浮动与定位篇

一、元素浮动(float) 定义:浮动是基于CSS现代Web设计用到的主要功能之一,它可以用来创建多列的网页布局。 1、属性值:none(不浮动)、left(向左)、right(向右) 注:fi...

CSS元素定位--浮动(float)与清楚(clear)

CSS中定位的基本思想: 定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素,又或者是相对于另一个元素,甚至相对于浏览器窗口本身的位置。 浮动 ( float ): CSS中允许对所有元...

CSS教程——元素定位

  • 2011年06月09日 21:52
  • 36KB
  • 下载

说说标准——CSS核心可视化格式模型(visual formatting model)之八:float 特性以及浮动(Float)定位细则一

浮动特性非常有用,3大布局核心之一。虽然如此,它涉及内容过多,浏览器兼容性问题也很多。它的定位不仅涉及 包含块,还涉及到了行框,块框,还有行内框等内容;并且,各浏览器对其的支持还有不少兼容性问题。因此...

CSS学习(五)——区块、浮动、定位、溢出、滚动条

区块 占据一整行的标记叫做区块。例如: ... ... 只要是区块,可以使用如下属性名称: 属性名称 设定值 说明 width 像素/百分比 区块的宽度 height 像素/百分比 区...

说说标准——CSS核心可视化格式模型(visual formatting model)之九:浮动(Float)定位细则二

本帖接 【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之八:float 特性以及浮动(Float)定位细则一 6. 浮动框的顶边不可以高于源文...

CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

一、BFC与IFC 1.1、BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行...

CSS页面布局基础3——元素浮动

1.浮动(float)是基于CSS的现代Web设计用到的主要功能之一,可以用它来创建多累的网页布局,从无序列表创建导航工具条,不是用table而创建类似表格的对其方式等。 为使元素浮动到左边或者右边...
  • whh4122
  • whh4122
  • 2014年10月14日 22:48
  • 538

CSS学习笔记——CSS中定位的浮动float

昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 2.浮动主要用来干什...

CSS定位机制——普通流、浮动、定位

static/relative 保留正常文档流 float/absolute/fixed 完全脱离文档流 不占空间 relative 参照父级的原始点为原始点 相对本身的原本位置发生位移 abs...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS ——浮动与定位元素
举报原因:
原因补充:

(最多只允许输入30个字)