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组合使用才能真正达到目的

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_31231955/article/details/62218938

绝对定位元素、浮动元素会生成一个块级框

浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,...
  • kbx8916
  • kbx8916
  • 2016-07-05 19:56:01
  • 735

盒模型+float浮动元素+position定位

盒子模型盒子模型:组成网页的每一个元素,主页面上的表现形式都是一个矩形(所占的位置是一个矩形),这一个个的矩形都叫做盒子(因为每一个矩形都会装有内容) 盒子模型是用来描述每一个元素之间的位置关系,和...
  • qq_38103462
  • qq_38103462
  • 2017-10-25 16:03:54
  • 162

[2017-03-04]行内元素和块级元素使用浮动后的变化

今天做前端笔试题get到一个知识点,如下所示代码 hello ...
  • Cathy731946
  • Cathy731946
  • 2017-03-04 14:20:42
  • 656

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

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

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

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

嵌套div(块级元素)的静态定位

div1      div2      div3      div4
  • alucardxpmusic
  • alucardxpmusic
  • 2014-10-11 13:05:50
  • 255

CSS学习8(浮动和定位)

浮动 CSS允许浮动任何元素。 浮动元素 首先,会以某种方式将浮动元素从文档的正常流中删除,不过它还是会影响布局。一个元素浮动时,其他内容会“环绕”该元素。 浮动元素的外边距不会与其他元素...
  • exialym
  • exialym
  • 2016-06-18 14:08:58
  • 7295

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

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

HTML/CSS 块、内嵌、浮动、定位元素的特点对比

内联,内嵌,行内属性标签——————————————– 1、默认同行可以继续跟同类型标签; 2、内容撑开宽度 3、不支持宽高 4、不支持上下的margin和padding...
  • u014420383
  • u014420383
  • 2015-08-08 17:22:27
  • 1206

CSS 优先级和定位

css优先级 !Importang 10000 行内       1000 . Id选择器  100 类选择器(:hover伪类)10 P  标签 属性选择器 1 继承  0.1 默认值...
  • baidu_36097530
  • baidu_36097530
  • 2016-10-19 20:26:42
  • 412
收藏助手
不良信息举报
您举报文章:CSS ——浮动与定位元素
举报原因:
原因补充:

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