【CSS定位机制之浮动定位float】的更多相关文章

CSS定位机制之浮动定位float

一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果   (一).块元素(div)在文档流中默认垂直排列,如果希望块元素在页面中水平排列,可以使块元素脱离文档流(使用float使元素浮动) 元素浮动脱离文档流之后,原有的位置不会保留,会被其他文档流元素占据. (二). 当设置了浮动定位后(float属性非none的值),元素会立即左上或右上浮动,而浮动元素会盖住文档流元素.如图一所示,框1设置浮动之后脱离文…

CSS彻底研究(3) - 浮动,定位

Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父元素的左侧靠紧,脱离标准流,同时宽度不再伸展至充满父容器,而是根据自身内容来确定. II . 演示规则 准备代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="…

CSS定位机制：浮动 float及清除浮动的常用方法

CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ul ol li dl dt d 行内元素的特征: 与其他元素同行显示 不可以设置宽和高 宽和高就是文字或图片的宽高 常见的行内元素:span a b i u em 2.浮动 浮动基础 会使元素向左或向右移动,只能左右,不能上下 浮动元素碰到包含框或另一个浮动框,浮动停止 浮动元素之后的元素将围绕…

CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通流定位 文档流是页面元素默认的定位方式 块级:从上到下排列(独占一行) 行级:从左到右排列(不独占一行) 2.浮动定位 如果将元素的定位方式设置了浮动定位那么具有以下几个特点 1.浮动元素会脱离文档流,其他未浮动的元素要上前补位 2.浮动元素会停靠在父元素的左边或者右边,或者停靠在其他浮动元素的边缘…

CSS浮动（Float）

定义 浮动会使元素向左或向右移动,其周围的元素也会重新排列: 浮动直到它的外边缘碰到包含框或者另一个浮动框才停止: 浮动之后的元素将围绕它,浮动之前的元素不变: 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: 再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘.因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,…

【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距组成. 2.如果在元素上添加背景,则背景是边框, 内边距和内容组成的区域. 3.在css中width和height指的是内容区域的宽度和高度.增加内边距,边框和外边距不会影响内容区域的尺寸,但会增加元素框的总尺寸.即width=element 注意:ie的盒模型中,width指的是内容,内边距,和边…

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

一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块级元素.行内元素依据他们的显示属性按照在文档中的先后次序依次显示.是块级元素就占一行或多行,是行内元素就和其他元素共处一行,没什么好说的,该咋显示咋显示,一个萝卜一个坑. 二.定位 1.相对定位 (position:relative) 被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的…

web前端css定位position和浮动float

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

CSS有三种基本的定位机制

CSS有三种基本的定位机制:普通流,浮动和绝对定位. 普通流:在普通流中元素框的位置由元素在html中的位置决定, 1.元素position属性为static或继承来的static时就会按照普通流定位 2.position属性的relative(相对定位)值时,它将出现在他所在的位置上,然后可以通过设置垂直或水平位置,让这个元素相对于它自己移动,  在使用相对定位时(top.left),无论元素是否移动,元素在文档流中占据原来空间,只是表现会改变. <div style="border:…

CSS中的三种基本的定位机制

CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 二.定位 1.相对定位 被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动.使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置.移动元素会导致它覆盖其他的框. <html>…