【轻松前端之旅】CSS盒子模型

时间:2022-12-13 21:49:18

盒子模型,也叫框模型,在CSS里是很重要的概念。

每个元素都可以看做一个盒子。盒子包含四个部分:外边距(margin)、边框(border)、内边距(padding)、元素内容(element content)。

我们知道html元素可以嵌套,所以,元素内容还可以包含其它元素。

盒子模型如下图所示:

【轻松前端之旅】CSS盒子模型

注意:

1、height和width属性,指的是元素内容的宽度和高度!元素的总宽度=width+padding+border+margin!

2、background背景属性,应用到元素内容、内边距和边框,不应用到外边距!

 

微信公众号链接:

https://mp.weixin.qq.com/s?__biz=MzAxNTg0MDg5OA==&mid=2649676340&idx=1&sn=a7bdcfc62619e9b2233520969607193a&chksm=83e799d9b49010cfaacc4be3be6e0d57240a86b78cf64dd2096df673f2a53352fd0da0bcc0f7&mpshare=1&scene=23&srcid=1010bxXxiHlhORzvb4UYuxv0#rd