今天主要学习了盒子模型与相对定位、绝对定位的知识。开始讲了css的基本语法，选择器{样式声明：属性与属性值组成}。盒子模型包括四块：内容content、内边距padding、外边距margin、边框border 。盒子可以分为块级盒子与行内盒子，但是只有块级盒子才可以作为容器。文档流是元素的排列方式，但是浮动和绝对定位会改变脱离文档流。 外边距在垂直方向会发生塌陷，以数值最大的为准，向大数值方向走。
绝对定位定位父级必须设置定位属性，通常设置成相对定位。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型以及元素对齐的四种场景</title>
<style>
.hezi {
width: 300px;
height: 300px;
background-color: aquamarine;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
/*可以缩写遵循上下左右原则padding:20px 10px; 无论内边距外边距第二个都是左右*/
border-top:20px solid red;
border-right: 10px solid darkgreen;
border-bottom:30px blue dashed;
border-left: 20px yellowgreen solid;
margin-top: 30px;
margin-left: 80px;
}
.tu {
background-color: aqua;
width: 300px;
height: 300px;
padding:150px;
}
</style>
</head>
<body>
<div class="hezi"></div>
<br>
<br>
<div class="tu"><img src="https://img.php.cn/upload/avatar/000/001/120/5ad4492ab6d99770.jpg" width="300px"></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
绝对定位写的盒子模型
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五色十字架</title>
<style>
.box {
width: 600px;
height: 600px;
position: relative;
margin: 0 auto;
}
.box1 {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
left: 200px;
}
.box2 {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 200px;
left: 0;
}
.box3 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 200px;
left: 200px;
}
.box4 {
width: 200px;
height: 200px;
background-color: gold;
position: absolute;
top: 200px;
left: 400px;
}
.box5 {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 400px;
left: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例