CSS权重、盒子与常用单位基础学习
目录：
- 实例演示css选择器权重的计算方式
- 实例演示盒模型常用属性与盒大小计算方式
- 实例演示css常用单位(em,rem,vw/vh)
1.实例演示css选择器权重的计算方式
- 原子: id,class,tag共三类
- 权重: id->100,class->10, tag->1
ID相当于百位数、class相当于十位数、tag相当于个位数，数值越大权重越大，故id的权重最大，但是在实际应用中不建议使用id，因为他的权重太大，使用class的比较多。
实例截图
示例代码
h1{color: red; /*最低权重 */}#content1{color: black; /* ID同！important最大权重*/}.content{color: white; /* 中等权重*/}h1 {color: green ;}h1 {color: blue !important; /*顶级权重*/}
2. 实例演示盒模型常用属性与盒大小计算方式
盒子的常用属性包含
宽：width、高：heidht、
内边距:padding、边框：border、
外边框：margin边框宽度可以用四值、三值、二值、单值表示
实例截图
示例代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>盒模型</title></head><body><div class="box">box</div><style>.box {width: 150px; /*宽度*/height: 100px;/*高度*/border: solid 2px;/*边框*/padding: 25px 10px 15px 20px;/*四值方式，从上方顺时针排序*//*三值方式为 25px 23px 28px 其中第一为上方宽度、第二为宽度、第三为下方高度*//*双值方式为 25px 36px 其中第一为上下宽度、第二位左右宽度*//*单值为 25px 表示上下左右四值相等，均为25px*//*无论是三值还是二值方式，第二组数值均为左右宽度background-color: rgb(53, 34, 255);background-clip: content-box;box-sizing: content-box;/* 通过收缩内容区大小来实现的 */box-sizing: border-box;}</style></body></html>
3. 实例演示css常用单位(em,rem,vw/vh)
3.1em和rem
em、rem均为字号单位，16px等于1em/1rem
实例截图
示例代码
<div style="font-size: 1em"><!-- font-size:可继承属性 --><div>Hello</div><div>World</div></div>
3.2 vm和vh
vw和vh为视口（可视窗口）单位
示例截图
示例代码
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>视口单位:vh/vw</title></head><body><header>header</header><main>main</main><footer>footer</footer><style>* {margin: 0;padding: 0;box-sizing: border-box;}body > * {outline: 1px solid;background-color: lightblue;}header,footer {width: 100vw;height: 5vh;}main {background-color: violet;width: 100vw;margin: 1vh 0;min-height: 100vh;/* 要减去页眉页脚的5vh */min-height: calc(100vh - 5vh - 5vh);/* 再减去上下1vh margin *//* calc() 运算符二边要加空格, "/, * 可以不加, +,-要加 " */min-height: calc(100vh - 5vh - 5vh - 1vh - 1vh);}</style></body></html>