【CSS】浮动 ① ( 浮动引入 | 盒子模型位置摆放三大机制 - 普通流、浮动、定位 | 行内块元素的摆放缺陷 )

韩曙亮

发布于 2023-03-25 11:40:13

77800

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

文章目录

一、盒子模型位置摆放三大机制 - 普通流、浮动、定位

盒子模型位置摆放三大机制 :

普通流 : 默认的摆放样式 ;
- 块级元素摆放 : 每个块级元素独占一行 , 排列顺序从上到下 ; 如 : div , p , h1 等 ;
- 行内元素摆放 : 多个行内元素在同一行显示 , 排列顺序从左到右 , 显示到边缘自动换行 ; 如 : span , strong , a 等 ;
浮动 : 盒子模型在普通流基础上覆盖显示 , 多个块级元素可以在同一行相互覆盖显示 ;
定位 : 盒子模型在浏览器指定位置显示 ;

普通流相当于 Android 中的线性布局 ; 浮动相当于 Android 中的帧布局或相对布局或约束布局 ; 定位相当于 Android 中的绝对布局 ;

二、行内块元素的摆放缺陷

行内块元素的摆放缺陷 :

缝隙无法控制 : 行内块元素之间有缝隙 , 该缝隙大小无法控制 ;
排列顺序无法控制 : 行内块元素只能从左到右进行排列 , 不能左右对齐或右对齐排列 ;

下面的示例中 , 行内块元素之间始终有一条无法控制的缝隙 ;

行内元素代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>浮动引入</title>
	<style type="text/css">
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		div {
			display: inline-block;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

效果展示 :