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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章