re:从0开始的CSS之旅 13. 文档流

1. 三种基本机制

CSS盒子三种基本定位机制:普通流normal flow、浮动float、定位position

文档流(标准流、普通流 normal flow):HTML文档中一些皆为盒子,而盒子在HTML文档中默认的显示标准,称为文档流

2. 块元素

常见的块元素
div h1~h6 p ul ol li

特点:

  • 独占一行

  • 宽度和高度等都可以设置

  • 默认宽度是父级宽度的100%

  • 块元素是容器,里面可以放块元素、行内元素、行内块元素

注意:

  • 文字类的块元素不能自由嵌套(尽量不要放块元素)

3. 行内元素

常见的行内元素
span a strong em ins del

特点:

  • 和相邻的行内元素(行内块元素)在一行显示

  • 宽度和高度设置无效

  • 默认宽度是其内容的宽度

  • 行内元素可以设置border、padding、margin,但是垂直方向不会影响页面的布局

  • 行内元素水平外边距不会发生重叠

  • 行内元素只能容纳文本或其他行内元素

注意:

  1. a 链接中不能放链接

  2. 特殊情况下,a 链接中可以放块元素,但是最好将 a 转换为块元素

4. 行内块元素

在行内元素中有几个标签:img input td 他们同时拥有块元素与行内元素的特点

因此我们称为 行内块元素

  1. 特点:
    1. 和相邻的块元素(行内块元素)在一行显示
    2. 默认宽度是其内容的宽度
    3. 宽度和高度等都可以设置

示例如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	span {
		background-color: #c7edcc;
		width: 200px;
		height: 200px;
	
		border: 10px solid red;
		padding: 10px;
		margin: 100px;
	}
	
	.box1 {
		background-color: #fde6e0;
		width: 200px;
		height: 200px;
	}
</head>

<body>
	<h1>我是标题</h1>
	<div>我是div</div>
	<p>我是段落
	<div></div>
	</p>

	<span>我是span</span>
	<span>我是span</span>
	<span>我是span</span>

	<div class="box1"></div>
</body>

</html>
相关推荐
渣哥6 分钟前
从 AOP 到代理:Spring 事务注解是如何生效的?
前端·javascript·面试
toobeloong21 分钟前
Electron 从低版本升级到高版本 - 开始使用@electron/remote的改造教程
前端·javascript·electron
悠哉摸鱼大王24 分钟前
前端获取设备视频流踩坑实录
前端·javascript
铅笔侠_小龙虾33 分钟前
深入理解 Vue.js 原理
前端·javascript·vue.js
西西学代码37 分钟前
Flutter---showCupertinoDialog
java·前端·flutter
你的眼睛會笑39 分钟前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
ZTLJQ1 小时前
植物大战僵尸HTML5游戏完整实现教程
前端·游戏·html5
struggle20251 小时前
AxonHub 开源程序是一个现代 AI 网关系统,提供统一的 OpenAI、Anthropic 和 AI SDK 兼容 API
css·人工智能·typescript·go·shell·powershell
无光末阳1 小时前
vue 环境下多个定时器的创建与暂停的统一封装
前端·vue.js