H5CSS3笔记-三大布局方式

最新推荐文章于 2024-03-08 15:37:52 发布

tamakisakura

最新推荐文章于 2024-03-08 15:37:52 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5CSS3

本文链接：https://blog.youkuaiyun.com/c87171399/article/details/80032872

HTML5CSS3 专栏收录该内容

3 篇文章

订阅专栏

本文主要介绍了HTML中的三种布局方式：标准流、浮动和定位。标准流是默认的顺序布局；浮动常用于创建多列布局；定位通过position属性实现元素精确定位。此外，还提到了HTML中的两大元素类型——块级元素和内联元素，块级元素独占一行，内联元素则可以同处一行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.HTML中的三种布局方式

1.标准流：默认的布局方式，即顺序布局

2.浮动:

3.定位:position属性决定了元素将如何定位

二.HTML有两大元素

1.块级元素

div, h1~h6, 有序无序列表(ol,ul,li), table表格 p段落等--总是独占一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标准流网页布局</title>
		<style>
			.test{
			width: 100px;
			height: 100px;
			background: red;
			border: 1px solid #FFFFFF;/*边框1像素实线白色*/
			}
		</style>
	</head>
	<body>
		<div class="test"></div>
		<div class="test"></div>
		<div class="test"></div>
		<span>文字1</span>
		<span>文字3</span>
		<span>文字2</span>  <!--div垂直排列，span横向排列---即块元素和内联元素的区别-->
	</body
</html>

2.内联元素

a, span, img ,input--和相邻的内联元素同一行，宽度不够才会被挤到下一行。