掌握这些CSS知识点，Coding飞扬！

*{padding:0;margin:0;border:0;}body{background-color:green;/*height:100%;*/border:5pxsolidgreenyellow;}.block{width:100%;height:100%;background-color:red;}块类div的高度并不是按照我们的预期，全屏的高度被填充到100%，屏幕的高度没有被覆盖。代码&效果：https://codepen.io/DYBOY/embed/RwoJKRPblock类的parent（包含block）是body，没有设置body。当height值为auto时，body实际计算的高度为内容的高度，为0（可以取消上面代码的borderstyle的注释，可以看到body的高度），那么height子元素块类的等于0body{background-color:azure;height:auto;}.block{width:100%;height:0*100%;//0background-color:red;}所以高度block类所在的div框的高度此时是无效的，高度为0，即浏览器上没有渲染高度。浏览器的渲染规则可以理解和记忆为：深度优先遍历计算子元素的相对单位。计算值基于parent/ancestor元素对应的属性值，auto基于内容。计算面积分布。浏览器渲染HTML文档流，背景色默认为白色。如果在文档中为html和body标签设置了背景色，那么这两个标签的背景色实际上是设置为浏览器视口的背景色。2.padding（内边距）&border（边框）&magin（外边距）盒模型可以看作是四个“同心矩形”的组合。下图中这三个属性的表现其实并没有特别的解释。看上图就知道意思了。元素分为行级元素和块级元素。行级元素的margin和padding上下值无效。2.1百分比单位的计算之前一直有个误区，认为padding和margin的百分比单位的计算基数是当前元素矩形区域的宽高，但是根据包含块的规则，它们的计算base应该是包含块的宽度值。上一期组长洪岩提问：“如何实现一张高度为自适应宽度3倍的图片？”实现方式一：使用Chrome浏览器新支持的aspect-ratio属性。问题是C端浏览器不兼容。ok.box{aspect-ratio:1/3;//width/height纵横比}纵横比效果实现方法二：巧妙利用containingblock规则（padding和width属性的百分比值的计算基数是width包含块）+背景图像实现利用包含块规则实现代码和演示：https://codepen.io/DYBOY/pen/JjbZgeE2.2border-radius百分比和像素border-radius属性用于描述半径border圆角的，根据数据如果是百分比单位是以**盒模型**的矩形宽高（包括border和padding）为计算基数，border-radius的值描述边界角所在的椭圆的半长轴和半短轴长度。border-*-radius属性的两个长度或百分比值定义了四分之一椭圆的半径，它定义了外边框角的形状（见下图）。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，则从第一个值复制。如果任一长度为零，则角是方形的，而不是圆形的。水平半径的百分比是指边框的宽度，垂直半径的百分比是指边框的高度。考虑这个例子：1