<!DOCTYPE html>
<HTML>
<head>
<title>学习css</title>
<meta charset="utf-8">
<style>
/* CSS3 中有三种定位机制 : 普通文档流 (text)| 浮动(float) | 定位(position)
一、普通文档流【CSS中默认的文本文档】
除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。
块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。
二、层定位
对每个图层进行相应的定位（相对定位relative、绝对定位absolute、固定定位fixed、无定位static）
三、浮动
*/
div {
width: 200px;
height: 200px;
}
.box1 {
background: rgb(8, 240, 8);
}
.box2 {
background: rgb(190, 15, 38);
/* 相对定位，相对标签原来在页面文档中的位置进行偏移 */
position: relative;
right: 50px;
top: 50px;
}
.box3 {
background: rgb(202, 235, 14);
/* 固定位置，相对于浏览器窗口进行定位 */
position: fixed;
left: 500px;
top: 100px;
}
.box4 {
background: cyan;
/* 绝对定位，相对已经定位的父级元素进行偏移，如果父级都没有，则相对于左上角偏移 */
position: absolute;
left: 50px;
top: 50px;
}
.box00 {
width: 1000px;
height: 100px;
background: lightsteelblue;
}
.box00 div {
/* 设置浮动，设置box00浮动不会对包含的4个div生效，只会对本标签生效 */
float: left;
}
.box11 {
background: blue;
}
.box22 {
background: rgb(0, 255, 13);
}
.box33 {
background: rgb(200, 25, 216);
}
.box44 {
background: rgb(235, 10, 179);
}
</style>
</head>
<body>
<div class="box1">有闲的节奏，挑拨的琴弦，在微风吹过斑驳光影的树下，倾听弦的声音，揣测着风的方向，越来越快乐，越来越幸福…… </div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box" style="height: 500px;width: 500px;background: darkolivegreen;position: relative;">
<div class="box4"></div>
<!-- 如果box4没有绝对定位，页面则是从上到下的顺序排列
如果有绝对定位，下面的box1则会顶到原来box4的位置（固定位置也有此效果，但相对定位没有此现象） -->
<div class="box1"></div>
<div class="box1"></div>
</div>
<hr>
<div class="box00">
<div class="box11"></div>
<div class="box22"></div>
<div class="box33"></div>
<div class="box44"></div>
</div>
</body>
</HTML>
发表于 2021-10-23 22:58:00
