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

<!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>