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>
