1. 程式人生 > >H5CSS3筆記-三大布局方式

H5CSS3筆記-三大布局方式

一.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--和相鄰的內聯元素同一行,寬度不夠才會被擠到下一行。