浮动和定位的区别

动 ( float ) 和绝对定位 ( position:absolute )

相同点:(1)都是漂起来( 离开原来的位置 )

(2)并且都不占着原来的位置

(3)另外,如h1包文字的标签,默认只设height的情况下,它的width是铺满父元素的宽度的,而当浮动或绝对定位后,它的宽度就是h1内文字的宽度

不同点:float后,(这里float:left )它后面的对象,会占据它原来的位置,

但是后面对象里的文字和图片等好像知道它在左边,所以他们会自动的在它右边显示,

也就是,后面对象的文字图片等不会被它挡住

position:absolute绝对定位后,它后面的对象,也会占据它原来的位置,

但是后面的对象,完全视它不存在,直接在左上角显示,

也就是,后面对象的文字图片等左上部分会被它挡住

默认情况下(即h3不设浮动、不设绝对定位)

h3设float情况下

h3设绝对定位情况下

时间: 2024-10-13 07:59:02

浮动和定位的区别的相关文章

CSS小随笔(三)浮动与定位

先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置.(浮动盒子,会盖在这个盒子的上方) 但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响.(未浮动盒子中的内容,不会被浮动盒子盖住) 3.由于第二条的原因. 可以给收影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响 clear可选值:left-清除左浮动影响

第3天:CSS浮动、定位、表格、表单总结

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

网页排版中的浮动和定位(学习笔记)

CSS中的浮动和定位 在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 虽然浮动和定位很重要,但是在以后的网页写作中,还是尽量少用,最好别乱用,不然后面问题很大,特别是对初学者.最好要把浮动和定位要搞清楚在使用. 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设置宽.高,宽度为父盒子的100%.例如:div.p.标题元素(h1-h6).列表元素(ul li.dl dt dd) 3.行内元素(in

2.深入理解浮动和定位

浮动和定位 1.关于绝对定位有几点的说明: 1)使用绝对定位是以它的”最近的“的一个”已经定位的“的”祖先元素“为基准进行偏移.如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行偏移: 2)如果父元素没有设置定位,子标记设置了绝对定位,而没有设置left和top,那么子元素会呆在原处,但是这个元素已经脱离了标准流.这一张绝佳让保持不动的元素脱离标准流的方法.

牛腩新闻发布系统——盒子的浮动与定位

浮动和定位的相关知识,是设计精美网页的必要前提之一.在学习浮动与定位之前,我们先了解一下相关知识"标准流". 一.标准流 标准流,是指在不适用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则.在标准流中,块级元素的盒子都是上下排列,行内元素的盒子都是左右排列的.我们把这些元素分为以下两类: 块级元素(block level):占据着整个矩形区域,以块的形式表现出来,并且跟统计的兄弟块依次竖直排列,左右撑满.如<li>.<ul>.<div>

CSS浮动和定位学习笔记

1.首先先看一下浮动 (1)左浮动:元素本身经可能的左移动,知道碰到边框或者是别的浮动元素,把他右边的位置让给别的元素.如果右边的空间不够则自动换行.浮动对于快元素和行内元素都生效. (2)右浮动:与左浮动相反. 2.CSS中的几种定位方式 (1)static:默认的定位方式. (2)relative(相对定位):元素偏离某个距离,元素保持未定位前的形状,他原本占有的空间保留,从这一角度看,好像元素本身仍然在文档刘/标准流中一样.relative的参照点是他原来应该出现的位置. (3)absol

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

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

【前端】浮动和定位

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