border-box 改变盒子的布局方式

在这里插入图片描述

今天来聊一个我们在前端开发中很常见的属性box-sizing: border-box
如果声明了一个元素且该元素是盒子模型,那么该元素默认的盒子模型是以border(边框)为边界,border里面是content(内容)。外边的是padding(填充),再外边的是margin(边距)
在这里插入图片描述

一旦声明了box-sizing: border-box则盒子内容区就包含content和padding
。盒子外边只有margin。

在这里插入图片描述

如果不太清楚,自己可以写几个盒子模型在开发者工具里好好琢磨琢磨。

!!!默认的盒子模型在创建的时候就已经存在了margin,padding,border。所以可以在body里面先去掉这些默认值。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 鲸 设计师:meimeiellie 返回首页