定位、浮动、叠放

浮动,可以让页面并排显示,制作干净整洁的布局。有时候需要用到定位的技术。

position属性值有static、fixed、relative、absolute、inherit

float属性值有left、right、none、inherit

设计页面布局时候,常需要用到浮动,它是页面定位的一种基本功能。浮动可以创建一个自然流布局,同时允许元素设置自身尺寸和父元素容器的尺寸大小。

一个元素浮动时候,其位置依赖于其周边元素,其周边元素及其摆放位置取决于围绕他的元素的文档对象模型(DOM)。

浮动也会给其父元素带来影响。如页面的内容设置了一个宽度,子元素的浮动确定了他们的位置,但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷,从而使父元素的高度为“0”,以及忽略其他的属性。嵌套的元素也可能出现样式错误。针对这样的问题,我们可以采用在父元素中设置清除浮动来解决。关于清除浮动有几种方式:

1.clear:left;

clear:right;

clear:both;

这种方式有一定效果,但不太适合语义化。

2.overflow:auto;

overflow:hidden;

备注:使用“overflow:auto;”,在IE浏览器中会给元素添加滚动条,这样一来,最好是直接使用“overflow:hidden;”来清除浮动。缺点:可能会影响样式的效果,比如盒子阴影效果

3.clearfix

“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类,我们可以在浮动元素的父容器前面和后面创建隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷,使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距塌陷,以及用来清除元素的浮动。

定位属性值:

static:默认值,不接受位置属性值设置

relative:相对定位元素的位移是相对于元素自身的边缘进行位移。可以给元素设置位移(offset)“top、right、bottom和left”属性。它们原先的位置仍保留,仍属于自然流。

absolute:脱离文档流。相对于div的父元素进行绝对定位,使用绝对定位的元素可以指定垂直和水平的位移属性,使绝对定位元素相对于设置了相对定们的祖先元素边缘进行移位。

fixed:相对于浏览器窗口,不会随滚动条滚动。

元素叠放顺序:

z-index属性用来设置元素的层叠顺序。值越大越在上面。给元素设置“z-index”属性及使用盒子位移属性,都要先在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者“fixed”之一。

时间: 2024-10-25 16:02:51

定位、浮动、叠放的相关文章

认识CSS中布局之文档流、浮动、定位以及叠放次序

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &l

定位浮动拾遗

---恢复内容开始--- 浮动元素处在正常文档流上的浮动流上,浮动元素的渲染方式很特殊,首先按照正常文档流进行布局,然后将该元素从 文档流中取出并对该元素尽量向左或者向右移动,周围的内容将会环绕该元素.所以,浮动会对兄弟元素的布局造成 影响,而且其效率较低,代价较高. 绝对定位则是完全脱离文档流,直接相对于包含块进行定位,对兄弟元素的布局没有影响. 绝对定位是根据定位元素的包含外边距的框(外边框)到包含块内边界(边框内部)的偏移进行定位. display,float,position之间的爱恨纠

css定位浮动总结

定位:定位在中间,放大缩小时也不会跑偏. position:absolute; top: 50%; left: 50%; margin: -270px 0 0 -455px; 解释:定位后,设百分比的位置,再设置外边距. 浮动:span等行内元素不能设置宽高,但在浮动后可以设置宽高. 1 <style> 2 span { 3 width: 200px; 4 height: 200px; 5 background: red; 6 float: left; 7 } 8 </style>

CSS 显示 定位 浮动 对齐元素

CSS 显示 img.normal { height:auto; } img.big { height:120px; } p.ex { height:100px; width:100px; } <body> <img class="normal" src="logocss.gif" width="95" height="84" /><br> <img class="big&q

HTML学习笔记 css定位浮动及瀑布流案例 第十三节 (原创) 参考使用表

#fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; height: 100px; background-color: coral; float: left; } #td { width: 100px; height: 100px; background-color: chartreuse; float: left; } #container { w

HTML学习笔记 css定位浮动及瀑布流 第十三节 (原创)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动</title> <link rel="stylesheet" href="tzy.css"type="text/css"></head><body> <d

209.4.4 盒模型&amp;定位&amp;浮动

盒模型 盒模型 除了图片表单元素之外,基本所有标签都可以看做一个盒子 盒模型的要素 width和height 标签内容的宽高,不是盒子的宽高 padding 内边距 内边距是标签内容和边框的距离 padding的颜色和标签内容一致 margin 外边距 外边距是标签相对于父标签和兄弟标签的距离 兄弟标签之间margin会相互重叠,以大的margin为准 border 边框 浮动 如果某个标签A是浮动的 假如A标签的上一个标签也是浮动的 那么A就会跟在上一个标签后面 如果一行放不下两个标签 A就会

3 CSS 定位&amp;浮动

CSS Position(定位): static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影响 Fixed定位: 元素的位置相对于浏览器窗口固定 即便串口滚动元素也不滚动 注: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持 Fixed定位使元素的位置与文档流无关,因此不占据空间 Fixed定位的元素和其他元素重叠. p.pos_fixed { position:fixed; t

【前端】浮动和定位

浮动和定位 浮动 什么是浮动? ? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程.它可以让任何盒子可以在一行排列,用浮动来布局. ? 在css中,通过float属性来定义浮动,其基本语法格式如下: 选择器{float:属性值;} 属性值 描述 left 元素向左浮动 right 元素向右浮动 none 元素不浮动(默认值) 浮动的特性 脱离标准流,不占位置,浮动只有左右浮动 一般只要一浮动就创建一个包含块级的概念,一般要在外边添加一个父盒子,然后对齐,

Css3之基础-8 Css 浮动(定位,浮动定位)

一.CSS 定位概述 定位概述 - 定位: 定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置 - 普通流定位 - 浮动定位 - 相对定位 - 绝对定位 普通流定位 - 页面中的块级元素框从上到下一个接一个地排列 - 每一个块级元素都会出现在一个新行中(比如<p>元素.<div>元素) - 元素框之间的垂直距离是由框的垂直外边距计算出来的 - 内联元素将在一行中从左到右排列水平布置 - 不需要从新行开始 - 可以使用水平内边距.边框和外边