width宽度
height高度
border边框 1px（边框线条宽度） solid（实线） red（红色）
border-radius: 100px 边框圆角
background-color：red（背景颜色为红色）
margin（可以理解成空气墙不能加样式）
border（边框宽度）
padding（填充）
最里面964*4364是高宽
cursor: pointer;（悬停鼠标变小手）
hover（碰到变颜色）
display: inline-block;（行转块）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 练习圆角边框 -->
<div class="borderRadio"></div>
<div class="borderRadio2"></div>
<div class="borderRadio3"></div>
<div class="borderRadio4" style="height: 100px; width: 100px; border: 5px solid red;border-radius: 100px;"></div>
</body>
<!--练习margin -->
<div class="bigBox" style="height: 100px; width: 100px; border:1px solid orange;">
<div class="minBox"></div>
</div>
<div class="bigBox2" style="height: 100px; width: 100px; border:1px solid orange;">
<div class="minBox2"></div>
</div>
<!-- 练习vw与vh -->
<div class="viewBox"></div>
<!-- 练习hover -->
<div class="hoverBox"></div>
<script>
</script>
<style>
.borderRadio {
height: 30px;
width: 30px;
border: 1px solid orange;
border-radius: 5px;
border-radius: ;
/* 练习盒子的圆角 可以通过 border-radio*/
}
.borderRadio2 {
height: 30px;
width: 30px;
border: 1px solid orange;
border-radius: 5px 5px 0px 5px;
/* 练习盒子的圆角 可以通过 border-radio*/
}
.borderRadio3 {
height: 30px;
width: 30px;
border: 1px solid orange;
border-radius: 15px;
/* 练习盒子的圆角 画一个圆形*/
}
.minBox {
width: 50px;
height: 50px;
border: 1px solid red;
margin: 10px auto;
/*如果在magin中给2个参数，则第一个指上下，第二个指左右 使用auto可以自动让左右居中*/
}
.minBox2 {
width: 50px;
height: 50px;
border: 1px solid red;
margin: calc(50% - 25px) auto;
/*使用calu(50% - 高度的一半)可以让我们在上下也居中 */
}
.viewBox {
margin: 10px;
width: 50vw;
/* vw 顾名思义就是视口的宽度 这里50vw指的是视口宽度的50%*/
height: 40vh;
/*vh 则指的是视口的高度 这里指视口高度的40% */
/* 视口指的是当前浏览器我们眼睛能看到的大小（可以通过窗口化浏览器或者任意调整一下浏览器长宽试试） */
/* 通过这个可以达到页面动态布局 */
background-color: orangered;
cursor: pointer;
/* 这个小技巧可以让鼠标指向盒子时变为小手 */
}
.hoverBox {
margin-top: 10px;
width: 100px;
height: 100px;
background-color: red;
/*默认颜色为红色*/
}
.hoverBox:hover {
/*注意这个:hover 意思是当鼠标悬浮在这个盒子上 （下面定义了颜色变为橙色）*/
background-color: orange;
}
</style>
</html>
