盒子模型

最新推荐文章于 2023-04-20 09:28:31 发布

原创最新推荐文章于 2023-04-20 09:28:31 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css盒子模型 #盒模型

本文深入讲解了HTML元素的盒子模型概念，包括内容、边框、内边距和外边距的构成，以及标准盒子模型和IE低版本盒子模型的区别。

盒子模型

概念
所谓的盒子模型，就是把HTML里的元素看做一个矩形的盒子，也就是一个盛装内容的容器，每个盒子都是由元素的内容，边框，内边距，外边距四部分组成。
div{
width:100px;盒子宽100px
height:100px;盒子高100px
border:1px solid red;盒子边框为1px，实线，红色
margin:20px;盒子外边距为20px
padding:20px;盒子内边距为20px
}
标准盒子模型：宽度=内容的宽度+边框+内边距+外边距
box-sizing: content-box;
IE低版本盒子模型：宽度=内容宽度+外边距
box-sizing: border-box;