龙空技术网

一看就会的CSS讲解(五)盒模型的浮动与定位

一只快乐的小码农 317

前言:

目前朋友们对“html浮动盒子”大概比较关注,大家都想要剖析一些“html浮动盒子”的相关知识。那么小编同时在网络上搜集了一些对于“html浮动盒子””的相关文章,希望各位老铁们能喜欢,朋友们快快来了解一下吧!

1:盒子浮动 float-三大属性Float,Clear,Position1-1:Float悬浮 属性默认是 none ,按照标准流自动定位;Left:自定义左悬浮;Right:自定义右悬浮;

2:使用 clear 清除浮动的影响2-2:Clear 属性:(此属性因为Float的存在而存在)默认是 none,允许两边都可以有浮动对象;Left: 不允许左边有浮动对象Right:不允许右边有浮动对象Both:不允许有浮动对象

3:盒子定位 position3-1:Position 定位属性:默认是 static,按照标准流来定位;Relative:相对定位,相对于原本的标准位置偏移指定的距离;Absolute:绝对定位,以它的包含框为基准进行偏移;Fixed:固定定位,以浏览器窗口为基准进行定位;

4:z-index 空间位置4-1:Z-index 空间位置,默认是 0,z-index 值大的页面位于其值小的上方;

5:盒子 display 属性5-1:Display:Inline:把块级元素变成内联元素;Block:把内联元素变成块级元素;

标签: #html浮动盒子 #html盒子左右浮动