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

扶摇|

已于 2024-02-13 21:56:46 修改

阅读量1k

点赞数 14

分类专栏：从0开始的CSS之旅文章标签： css 前端

于 2024-02-13 21:54:43 首次发布

本文链接：https://blog.csdn.net/qq_40394751/article/details/136109875

版权

从0开始的CSS之旅专栏收录该内容

20 篇文章 2 订阅

订阅专栏

本文介绍了CSS盒子模型中的三种基本定位机制，包括普通流、浮动和定位，以及块级元素如div、行内元素如span和行内块元素如img的特点和使用。通过实例演示了如何在HTML中应用这些概念。

摘要由CSDN通过智能技术生成

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. 和相邻的块元素（行内块元素）在一行显示
2. 默认宽度是其内容的宽度
3. 宽度和高度等都可以设置

示例如下：

<!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>

扶摇|

关注

14
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
re:从0开始的CSS之旅 13. 文档流

文档流（标准流、普通流 normal flow）：HTML文档中一些皆为盒子，而盒子在HTML文档中默认的显示标准，称为文档流。- 块元素是容器，里面可以放块元素、行内元素、行内块元素。- 文字类的块元素不能自由嵌套（尽量不要放块元素）- 和相邻的行内元素（行内块元素）在一行显示。他们同时拥有块元素与行内元素的特点。链接中可以放块元素，但是最好将。- 默认宽度是父级宽度的100%- 宽度和高度等都可以设置。- 默认宽度是其内容的宽度。因此我们称为行内块元素。- 宽度和高度设置无效。- 行内元素可以设置。
复制链接

扫一扫