Well,任务没领取,而且确实第一次日报写的很水,最近闲下来了重写一遍，顺便把任务做了

HTML部分

选择器和继承:

虽然为每一个方块都添加class属性也可以获得同样的效果,但这种方法实在不够效率,可以

使用元素选择器、后代或者子元素选择器来设定大量重复元素的样式

继承也可以传递一部分css属性,但是个别诸如float,width的等属性无法被继承,关于属性的

继承参考下述链接.

https://www.w3.org/TR/CSS21/propidx.html

CSS部分

float属性和自适应:

当元素被应用该属性时,该属性会从普通文档流中脱离,并按照值向左或向右偏移

当多个元素被应用float的时,第二个框按照属性移动直到接触到前一个浮动框的边框

当容器太窄无法完整容纳一个元素的时候,浮动的元素会自动换行,直到有足够的空间,浮

动元素的高度会影响这个过程,出现诸如卡住等奇怪的现象

Width:

width属性影响元素的宽度,该属性可以被赋予三种值:单位,百分比和继承父元素

当设定为百分比时该元素会将父元素的宽度按照百分比设定宽度.

将width属性设定为30%时,div块的宽度会自动变成父元素宽度的30%,float属性的特性

会使第四个div方块自动换行,效果上达成了设计图的设计,同时width属性非固定值,达成了

使元素能够适应屏幕尺寸缩放而不出现滑动条的需求

方块的内补属性是问题点,当顶部内补没有被设定的时候方块会因为没有"支撑"整个消失

        图片来源w3cschool

       代码展示使用了codepen.io,不租服务器