div塊級元素

div是一個特別重要的標簽
是塊級元素
上代碼，看圖！手冊

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 600px;height: 600px;background-color: black;">
			<div style="width: 500px;height: 500px;background-color: red;">
				<div style="width: 400px;height: 400px;background-color: green;"></div>
			</div>
		</div>
	</body>
</html>

在這里插入圖片描述可以看到我們定義的樣式是三個正方形的塊style(css)后面會細講
style="width: 600px;height: 600px;background-color: black;
分別對應寬高和背景色

那么分塊有什么用呢
切割成不同的塊互不干擾方便定位和布局

<div style="width: 100px;height: 100px;background-color: black;"></div>
		<div style="width: 100px;height: 100px;background-color: red;"></div>
		<div style="width: 100px;height: 100px;background-color: green;"></div>

效果如下
在這里插入圖片描述可以看出div其實自帶了換行效果

但是如果我們需要第一行有兩個塊怎么半呢

浮動和定位

浮動常見為左右浮動
float: left/right 大家看出來英語很重要了吧
用法如下

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 100px;height: 100px;background-color: black;float:right;"></div>
		<div style="width: 100px;height: 100px;background-color: red;"></div>
		<div style="width: 100px;height: 100px;background-color: green;float: left;"></div>
		<div style="width: 100px;height: 100px;background-color: yellow;float: right;"></div>
		</script>
	</body>
</html>

在這里插入圖片描述

style="width: 100px;height: 100px;background-color: black;position: absolute;
width:寬 height:高 background-color:背景色

position 規定元素的定位型別手冊
元素的定位通過 left,top,right,bottom 屬性來定位，
這里介紹兩個
absolute：相對于 static 定位以外的第一個父元素進行定位

relative：相對于其正常位置進行定位

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 100px;height: 100px;background-color: black;position: absolute;left: 300px;top: 0px;"></div>
		<div style="width: 100px;height: 100px;background-color: red;position: relative;left: 100px;top: 0px;"></div>
		<div style="width: 100px;height: 100px;background-color: green;position: relative;left: 100px;top: 100px;"></div>
		<div style="width: 100px;height: 100px;background-color: yellow;position: relative;"></div>
		<div style="width: 100px;height: 100px;background-color: palevioletred;position: relative;left: 100px;"></div>
	</body>
</html>

在這里插入圖片描述
可以對比下

實作一個簡單布局

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="width: 1000px;height: 30px;background-color: black;color: white;text-align: center;">TOP</div>
		<div style="width: 1000px;height: 300px;position: relative;top: 5px;">
			<div style="width: 280px;height: 300px;background-color: red;position: absolute;">LEFT</div>
			<div style="width: 700px;height: 300px;background-color: green;float: right;">RIGHT</div>
		</div>
		
		<div style="width: 1000px;height: 30px;background-color: yellow;position: relative;top: 10px;text-align: center;">BOTTOM</div>
		
	</body>
</html>

在這里插入圖片描述
如果我們講這些背景填充色去掉
找一些圖片填充

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="height: 50px;">
			<img src="1.png"/>
		</div>
		<div style="width: 1200px;height: 300px;position: relative;top: 5px;">
			<div style="position: absolute;">
				<img src="2.png" />
			</div>
			<div style="width: 700px;height: 300px;float: right;">
				<img src="3.png" />
			</div>
		</div>
		
		<div style="width: 1200px;height: 30px;position: relative;top: 70px;">
			<img src="4.png" />
		</div>
		
	</body>
</html>
這里的1/2/3/4.png是我截的csdn主頁的圖

檔案目錄
在這里插入圖片描述

<img src="3.png" />此處解釋:img圖片鏈接為 同檔案夾下的3.png圖片

看到這里是不是有點意思了
在這里插入圖片描述
一個好看的網站往往都會有好看的布局，所以學會div的使用以及浮動和定位是很重要的

有興趣的小伙伴可以試著截你喜歡的網站的圖拼裝一個去裝逼哦，但是要注意不要侵權哦

特別提醒

要勤加練習，切忌眼高手低，加油

后續會推出

前端：js入門 vue入門 vue開發小程式等
后端： java入門 springboot入門等
服務器：mysql入門服務器簡單指令云服務器運行專案
python：推薦不溫卜火一定要看哦
一些插件的使用等

大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910
有問題可以下方留言，看到了會恢回復哦

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/206496.html

標籤：其他

上一篇：JavaScript入門基礎

下一篇：ES 6新特性（Day07）

初識HTML(三)---div塊級元素以及浮動和定位(超詳細帶演示)

div塊級元素

浮動和定位

特別提醒