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...
  • she_rryn
  • she_rryn
  • 2015年07月31日 23:47
  • 1384

关于CSS浮动与绝对定位的个人感悟,看完这篇文章能得到很多相关问题的解释

个人经过千辛万苦从网上搜索资料,现总结关于CSS浮动与绝对定位的相关知识,相信一定能解决您在进行网页布局是遇到的一系列问题!!!!!...
  • sinat_28050007
  • sinat_28050007
  • 2015年09月06日 20:47
  • 1595

CSS概念之定位体系(绝对定位position/浮动float/display)

原文摘自: 三种定位体系简介 框( box )布局影响因素之一,便是定位体系。定位体系也是其最为重要的影响因素。 CSS2.1 中,一个框可以根据三种定位体系布局。CSS2.1 中的...
  • ruoyiqing
  • ruoyiqing
  • 2014年08月31日 21:36
  • 1483

CSS中的三种基本的定位机制(普通流、定位、浮动)

一、普通流   普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。   普通流就是html文档中...
  • chelen_jak
  • chelen_jak
  • 2014年12月16日 17:03
  • 8445

CSS清除浮动和定位

1.原来在一行中的两个块,会因为浏览器窗口的大小改变而改变其原来的位置(变成多行),浏览器窗口宽度不够容纳解决方法:加个父div,并且设置宽度.father {width:500px;height:3...
  • jethai
  • jethai
  • 2016年08月28日 14:05
  • 3053

浮动、定位和层级

浮动的概念浮动的代码float:left;//左浮动 float:right;//右浮动浮动的特点 浮动的元素会脱离标准流(标准流就是浏览器默认摆放盒子的标准) 浮动后的元素会覆盖在标准流之上 浮动...
  • qq_33562825
  • qq_33562825
  • 2017年01月26日 13:12
  • 730

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

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

CSS笔记(布局与定位)

CSS布局与定位
  • qq_38801354
  • qq_38801354
  • 2017年07月08日 13:09
  • 218

Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

题目点评 这道题目的提问比较多,连续问了三个问题,正常元素、绝对定位元素、互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要...
  • lxcao
  • lxcao
  • 2016年09月26日 16:34
  • 4564

HTML CSS的兼容性问题、IE6BUG之浮动与定位篇

IE6下内容撑开设置宽高———————————————————-在IE6下,内容会撑开设置好的宽高 例如,给固定宽度的wrap_div下放left_div、right_div两个div并浮动, ...
  • u014420383
  • u014420383
  • 2015年08月08日 16:45
  • 1199
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS ——浮动与定位元素
举报原因:
原因补充:

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