html 布局方式

最新推荐文章于 2023-12-05 14:10:18 发布

llzkkk12

最新推荐文章于 2023-12-05 14:10:18 发布

阅读量305

点赞数

分类专栏： html 布局方式文章标签： html 布局方式

本文链接：https://blog.csdn.net/llzkkk12/article/details/78256144

版权

html 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

布局方式

1 篇文章 0 订阅

订阅专栏

基本布局方式

属性	值	定位参照物	是否仍占据文档流的位置	描述
position	static	由文档流自然形成	是	默认值，，无需显式定义。元素出现在正常的流中（忽略 top, bottom, left, right, z-index 声明）。
	relative	相对自己在文档流中的位置	是，该元素在文档流中占据的空间不会释放	生成相对定位的元素，相对于其文档流位置进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
	absolute	相对第一个定位过的父元素，即position=relative/ absolute/fixed的父元素，（static定位过的父元素不算）	否，已经脱离文档流	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
	fixed	相对浏览器窗口	否，已经脱离文档流	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
	inherit	继承父元素的定位类型	由父元素的定位类型来确定	规定应该从父元素继承 position 属性的值。
float	left、right、none、inherit	相对父元素（不论是否定位过）和前一个浮动框	否，已经脱离文档流	浮动的框只能向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<!-- 浮动定位示例(float) 
			1.相对父元素（不论是否定位过）和前一个浮动框定位；
	-->
	<hr />
	<label style="font-weight: bold;font-size: 20px;">浮动布局模型</label>	
	<div style="height: 100px;width: 100%;">
		<button style="float: left;width: 150px;">Button001</button>
		<button style="float: left;width: 150px;">Button003</button>
		<button style="float: right;width: 150px;">Button002</button>
	</div>
	
	<!-- 固定定位示例(fixed) 
			1.相对浏览器窗口定位；
	-->
	<hr />
	<label style="font-weight: bold;font-size: 20px;color: red;">固定布局模型</label>	
	<div style="height: 100px;">
		<label style="position: fixed;color: red;">AAAAA</label>
		<label style="position: fixed;color: red;right: 10px;">AAAAA</label>
		<label style="position: fixed;color: red;bottom: 10px;">AAAAA</label>
		<label style="position: fixed;color: red;top: 10px;">AAAAA</label>
		<label style="position: fixed;color: red;">AAAAA</label>
	</div>	
	
	<!-- 绝对定位示例(absolute) 
			1.使用容器内的绝对坐标；
	-->
	<hr />
	<label style="font-weight: bold;font-size: 20px;">绝对布局模型</label>	
	<div style="height: 100px;">
		<button style="position:absolute;width: 150px;">Button001</button>
		<button style="position:absolute;width: 150px;padding-left: 50px;
			margin-top: 50px;margin-left: 180px;">Button002</button>
		<button style="position:absolute;width: 150px;margin-top: 30px;">Button003</button>
		<button style="position:absolute;width: 150px;margin-left: 100px;">Button004</button>
		<button style="position:absolute;width: 150px;margin-left: 200px;">Button005</button>
		<button style="position:absolute;width: 150px;margin-top: 60px;">Button006</button>
	</div>
	
	
	<!-- 相对布局示例(relative)
			1.使用lef/top/right/bottom布局定位；
	-->
	<hr />
	<label style="font-weight: bold;font-size: 20px;">相对布局模型</label>	
	<div style="position: relative;height: 80px;">
		<label style="position: relative;">AAAAA</label>
		<label style="position: relative;left: 20px;">AAAAA</label>
		<label style="position: relative;top: 20px;">AAAAA</label>
		<label style="position: relative;top: 40px;">AAAAA</label>
	</div>
	
	<!-- 线性布局示例-默认(static)
			1.忽略lef/top/right/bottom布局属性
	-->
	<hr style="margin-top: 20px;"/>
	<label style="font-weight: bold;font-size: 20px;">线性布局模型</label>
	<div>
		<button style="width: 150px;">Button01</button>
		<button style="width: 150px;">Button02</button>
		<button style="width: 150px;">Button03</button>
		<p>AAA</p>
		<button style="width: 150px;">Button04</button>
		<button style="width: 150px;">Button05</button>
		<button style="width: 150px;">Button06</button>
	</div>
</body>
</html>

参考：

HTML中元素的定位方式

史上最全Html和CSS布局技巧

HTML CSS + DIV实现整体布局