初识HTML(三)---div块级元素以及浮动和定位(超详细带演示)

代码哈士奇

发布于 2021-01-26 15:44:56

8820

发布于 2021-01-26 15:44:56

文章被收录于专栏：dmhsq_csdn_blog

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>
	</body>
</html>

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

额外说明:盒模型浏览器查看元素时会显示这样一个图

定义一个元素的宽高时可以通过 padding：填充 border:边框 margin:边距总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距例如

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="background-color: black;padding: 0px;width: 100px;height: 100px;"></div><br />
		<div style="background-color: black;padding: 20px;width: 100px;height: 100px;"></div><br />
		<div style="background-color: black;border: #FF0000 solid 10px;padding: 20px;width: 100px;height: 100px;"></div>
		<div style="background-color: black;margin: 20px;border: #FF0000 solid 10px;padding: 20px;width: 100px;height: 100px;"></div>
	</body>
</html>

position 规定元素的定位类型手册元素的定位通过 left,top,right,bottom 属性来定位。这里介绍两个 absolute：相对于 static 定位以外的第一个父元素进行定位(一般元素不说明都是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="background-color: black;width: 500px;height: 500px;position: absolute;top: 0px;left: 0;"></div>
		<div style="background-color: red;width: 300px;height: 300px;position: absolute;top: 0px;"></div>
		<div style="background-color:green;width: 300px;height: 300px;position: relative;top: 0px;left: 50px;"></div>
	</body>
</html>

第一个div是黑色背景看下面两个就行

对比（二）

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="background-color: black;width: 800px;height: 800px;position: absolute;top: 0px;left: 0;"></div>
		<div style="background-color: red;width: 300px;height: 300px;position: absolute;top: 0px;"></div>
		<div style="background-color:green;width: 300px;height: 300px;position: relative;top: 0px;left: 50px;"></div>
		<div style="background-color:blue;width: 300px;height: 300px;position:absolute;top: 0px;left: 50px;"></div>
		<div style="background-color:blue;width: 300px;height: 300px;position:relative;top: 0px;left: 50px;"></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：推荐不温卜火一定要看哦一些插件的使用等

大学之道亦在自身，努力学习，热血青春

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/11/06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

c++

网站

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

vue.js

c++

网站

登录后参与评论

0 条评论

热度