<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>盒模型</title>
<style>
/* 样式初始化,设置了整个页面内外边距为0,
设置盒子大小不随内边距和边框的大小而变化,
设置背景裁切到内容区不覆盖内边距和边框 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-clip: content-box;
}
/* 设置第一个盒子的宽高,背景色,边框,下外边距和内边距 */
.box1 {
width: 200px;
height: 200px;
background-color: burlywood;
border: 6px solid black;
margin-bottom: 20px;
padding: 20px;
}
/* 设置盒子的宽高,背景色,边框,内边距,上外边距,添加定位属性并使其向下和向右偏移 */
.box2 {
width: 200px;
height: 200px;
background-color: aquamarine;
border: 2px solid black;
padding: 20px;
margin-top: 10px;
position: relative;
top: 10px;
left: 20px;
}
/* 设置第三个盒子的宽高,背景色,边框,
添加绝对定位属性,通过偏移值充满整个父容器后用margin:auto进行水平垂直居中 */
.box3 {
width: 30px;
height: 30px;
background-color: beige;
border: 2px solid black;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="box3"></div>
</div>
</body>
</html>
总结
1.了解了盒模型的基础知识(内边距,外边距,边框的表达)
2.明白了如何使背景只覆盖内容区而不会覆盖到内边距
3.了解了如何自定义盒子的大小,使其不会因调整内边距和边框而使得盒子的大小发生变化
4.了解块级元素的居中尤其是垂直居中是如何实现的
5.对于图片偏移的js代码多看回放,加深理解。