当前位置：首页 > news >正文

JAVAweb-标签选择器,盒模型,定位,浮动

news 来源：原创 2025/5/6 22:38:36

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>标签</title>
	<style type="text/css">
		div{
			color: red;
		}
	</style>
</head>
<body>
	<h1>大头</h1>
	<div>我是一个盒子</div>
</body>
</html>

标签选择器,ID选择器,Class类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>标签</title>
	<style type="text/css">
			#box{
				color: red;
			}
			.bob{
				color: green;
			}
	</style>
</head>
<body>
	<a href="http://www.baidu.com" id="box">百度</a>
	<div class="bob">hahahahah</div>
	<div>lallalala</div>
</body>
</html>

盒模型

margin:标签与标签之间的距离

padding内边距

border:外边距 solid

定位

固定定位:固定定位元素不占用起始位置

position:fixed;

固定定位是以网页为参照,固定在某一个位置(哪怕页面滑动,也是在这个位置)

相对定位:

相对定位元素:相对于自己的起始位置.

相对元素起始位置是占用的

position:relative;

绝对定位;

如果没有父元素,参照页面进行偏移

如果有父元素,参照定位父元素进行偏移.

position:absoulte;

浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			float: right;
			width: 100px;
			height: 100px;
			background: cyan;

		}
	</style>
</head>
<body>
	<div>最近唐山气温升高</div>
	<div>最近唐山气温升高</div>
	<div>最近唐山气温升高</div>
	<div>最近唐山气温升高</div>
	<div>最近唐山气温升高</div>
	<div>最近唐山气温升高</div>

</body>
</html>