CSS 定位与浮动

CSS 定位  

Static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

  相对定位(relative):与最近的一个元素进行定位。相对于原始的位置进行移动

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

  绝对定位(absolute):设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。(是以html的边框为参照的)

注意:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

在下面这个例子中,与上面一个元素出现了层叠:

设置top:20px;导致了间距不够,就进行覆盖。

 

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 h2.pos_abs
 5 {
 6 position:absolute;
 7 left:100px;
 8 top:20px
 9 }
10 </style>
11 </head>
12
13 <body>
14 <h2 class="pos_abs">这是带有绝对定位的标题</h2>
15 <p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。</p>
16 </body>
17
18 </html>

  固定定位(fixed):在页面滚动时,具有固定定位的位置不会改变。固定定位只在特定的情况下才会使用,一般不会使用。

浮动

  浮动(float):浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。有(left,right,none,inherit)四个属性。

浮动是自动脱离了文档流

 

清除浮动:

在使用浮动之后,会导致一些问题,浮动的内容不能很好的进行定位,在定位时由于脱离了文档流,宽度和高度会受到影响,不能设置成理想的效果,所以有时可以通过清除浮动解决。

  清除浮动可以使用:

  一个对象里面有两个子对象都设置为了浮动,前面的浮动就要清除

Overflow:hidden;可以清除浮动,同时也可以,将元素溢出的部分隐藏起来,在写轮播时也会使用到。

overflow:auto;

Clear:both(left,right,none,inherit)

同时也带来了一些多余的元素。

使用伪after元素:

    一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;

    二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,

在写html+css时,我习惯使用无序列表,然后使用float来将li进行排列,也出现了很多的问题,使用浮动导致不能达到想要的定位效果,同时在将屏幕大小进行调整时,定位也会受到影响,导致结构被破坏。(所以要清除浮动,或者避免使用浮动的方法),尽可能的少使用float属性。

display:inline-block;将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内.可以解决浮动的脱离文档流,对高度和宽度都可以进行定义.

可以解决浮动在进行定位时的问题。

 

时间: 2024-08-01 14:02:14

CSS 定位与浮动的相关文章

CSS定位和浮动

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.显然,这个功能非常强大,也很让人吃惊. div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 您可以使用display属性改变生成的框的类型.这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a>

css定位与浮动

1,定位 普通流 浮动 绝对布局 position : static :偏移量和z-index没有效果 relative absolute---不再占有位置 fixed     ---位置固定,不再占有位置,但是不管页面的滚动,都固定在这个位置 overflow clip vertical-align z-index :100; 数值越大,越覆盖在上面 left-top-right-buttom:20px 四个方向的偏移 2, 浮动 float :left right none inherit(

css定位之浮动定位

浮动定位可以是原本垂直排列的块级元素,变成水平排列 1浮动元素 float:left 或者float:right  这些浮动会直接碰到父容器的边界为止. 2设置了浮动的元素,元素会脱离标准文档流中,但是元素内容会仍然占据文档流中的空间 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float定位</title

CSS的定位和浮动

#CSS定位.浮动##1.标准文档流:指的是在不使用定位或者其他排版或者CSS,各个元素排列的规则实际上就是CSS规定网页默认的排列方式.负边距:会使文档流发生偏移,但是不会脱离文档流,不会占据原来的空间.##2.相对定位:    position:relative    1.设置了相对定位后不会影响这个元素本身    2.不会脱离文档流    3.它原本所占的空间仍被保留    4.如果没有设置相对定位偏移量,不会影响这个元素本身.    div{    position:relative;设

CSS 定位 (Positioning) CSS 外边距合并 CSS 相对定位

CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.显然,这个功能非常强大,也很让人吃惊.要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪. 另一方面

CSS 定位(待续...)

一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位,当然也不是正常的流布局. 二.一切都是框 display 属性设置元素是什么框类型.其属性为 block.inline.none 时,分别表示块级元素.行内元素和不显示(也不占用文档的空间). 三.定位机制 有三种基本的:普通流.绝对定位和浮动. 在下面的小节里,会给你详细讲解相对定位.绝对定位和浮动. 四.定

CSS 定位 (Positioning)

CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.显然,这个功能非常强大,也很让人吃惊.要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪. 另一方面

web前端css定位position和浮动float

最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span和h3等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. 在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联. 块级元素的文本行也会发生类似的情况.假设有一个包含三行文本的段落.每行文本形成一个无名框.无法直接对无名块或行框应用样式,因为没有可以

CSS定位(CSS定位概述、相对定位、绝对定位、浮动)

CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移. right 定义了定位元素右外边距边界与其包含块右边界之间的偏移. bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移. left 定义了定位元素左外边距边界与其包含块左边界之间的偏移. overflow 设置当元素的内容溢出其区域时发生的事情. clip 设置元素的