盒子模型,也叫框模型,在CSS里是很重要的概念。
每个元素都可以看做一个盒子。盒子包含四个部分:外边距(margin)、边框(border)、内边距(padding)、元素内容(element content)。
我们知道html元素可以嵌套,所以,元素内容还可以包含其它元素。
盒子模型如下图所示:
注意:
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