CSS布局之浮动(float)和定位(position)属性的区别


Posted in HTML / CSS onSeptember 25, 2021

CSS 布局 - position 属性

position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)。

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值:

static
relative
fixed
absolute
sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是,除非首先设置了 position 属性,否则这些属性将不起作用。根据不同的 position 值,它们的工作方式也不同。

CSS 布局 - 浮动和清除

float 属性
float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一:

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。
inherit - 元素继承其父级的 float 值
最简单的用法是,float 属性可实现(报纸上)文字包围图片的效果。

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果.

position: absolute|relative; 要配合top,left等定位;

使用:

position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index。PS的图层效果就是position: absolute。
float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行。图片的文字环绕布局效果就是float。
display的inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果。

CSS布局浮动和定位属性的区别

CSS有三种基本的定位机制:普通流、浮动和绝对定位一、普通流 普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。 普通流就是html文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档

postion:relative是子块级元素面向父级元素的相对定位,定位关键字使用left/right/top/bottom。兄弟块元素之间相对进行定位,但是position移动后,原位置依然保留。而且随后的兄弟块元素定位基于被移走前的位置。

float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。

二者之中最大的差别就是位置保留。

人们也就利用这种差异,可以做出CSS代码的滑动门菜单。

三水点靠木小编补充

一般页面布局都是用float,但需要注意清除浮动,而一些特别的效果一般用positon,使用positon的元素可以在页面的任何位置出现,方便一些提示框,特效等。

具体的大家可以根据看到的页面F12,慢慢研究,就会发现有很多的乐趣、

 
HTML / CSS 相关文章推荐
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
Canvas绘制像素风图片的示例代码
Canvas如何做个雪花屏版404的实现
使用canvas对video视频某一刻截图功能
Sep 25 #HTML / CSS
使用CSS实现一个搜索引擎的原理解析
sass 常用备忘案例详解
Sep 15 #HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 #HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 #HTML / CSS
You might like
当海贼王变成JOJO风
2020/03/02 日漫
php中设置index.php文件为只读的方法
2013/02/06 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python实现爬山算法的思路详解
2019/04/09 Python
python做接口测试的必要性
2019/11/20 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
广告艺术设计专业自荐书
2014/07/08 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
兵马俑导游词
2015/02/02 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
python实现自定义日志的具体方法
2021/05/28 Python