文章目录
- 一、盒子模型位置摆放三大机制 - 普通流、浮动、定位
- 二、行内块元素的摆放缺陷
一、盒子模型位置摆放三大机制 - 普通流、浮动、定位
盒子模型位置摆放三大机制 :
- 普通流 : 默认的摆放样式 ;
- 块级元素 摆放 : 每个 块级元素 独占一行 , 排列顺序 从上到下 ; 如 : div , p , h1 等 ;
- 行内元素 摆放 : 多个 行内元素 在同一行显示 , 排列顺序 从左到右
- 浮动 : 盒子模型 在 普通流 基础上 覆盖显示
- 定位 : 盒子模型 在 浏览器 指定位置 显示 ;
普通流 相当于 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>效果展示 :
