0206作业

1. 实例演示css选择器权重的计算方式

<h1>狂飙1</h1>
<h1 class="title">狂飙2</h1>
<h1 id="title">狂飙3</h1>
<!-- 第一个h1的权重是 0 0 1 -->
<!-- 第二个h1的权重是 0 1 0 -->
<!-- 第三个h1的权重是 1 0 0 -->
如果第一个h1的标签加上body权重就会变成 0 0 2
第二个标签写法改成h1.title 就会变成   0 1 1
第三个标签ID因为权重过大，基本不适用。
!important只用于调试，生产环境基本不使用。

2. 实例演示盒模型常用属性与盒大小计算方式

<div class="box"></div>
<style>
.box {
width:100px;
height:150px;
padding:10px 15px;
border:1px solid #ddd;
}
</style>
此盒子页面中的大小
标准计算：宽度：100+15+15+1+1
         高度: 150+10+10+1+1
想要显示的大小和CSS大小一致
需要设置：box-sizing:border-box
默认是以内容计算盒子的大小，改成以边界来计算盒子的大小

3. 实例演示css常用单位(em,rem,vw/vh)

不管开发中使用什么单位，游览器都会转成px
<div>你好</div>
<h1>helloworld</h1>
你好，游览器默认的文字是16px
1em = 16px
em是一个变量，根据位置来变化，在不同的位置来变化，由内向外逐级降低
要解决这个问题，就是em静态化，让em与位置无关，只和一个固定的元素相关
rem root em，用rem来代替em
1vw =1%视口
1vh =1%视口