css.html语义化,html语义化、css的盒子模型

内容转载自：https://juejin.im/post/5b44a485e51d4519945fb6b7

对HTML语义化标签的理解

HTML5语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav表示导航条，类似的还有article、header、footer等等标签。

css盒模型

盒模型是页面中组装元素的矩形区域。

CSS中的盒模型包括标准的W3C盒模型和IE盒模型。

标准盒子模型(图片来源自网络)：

IE盒子模型(图片来源自网络)：

通过对比以上两个图，这两种盒子模型最主要的区别就是width的包含范围。

在标准的盒子模型中，width = content部分的宽度

在IE盒子模型中，width = content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异：

标准盒子模型的盒子宽度 = 左右border+左右padding+width

IE盒子模型的盒子宽度 = width

在CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型

最后，前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右padding+width

也很好理解性记忆，包含什么，width就从什么开始算起。