所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
box-model.gif
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。.
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
1.什么是盒子模型？盒子模型有两种，标准盒子模型和IE盒子模型。标准盒子模型：width = content + ...
1.什么是盒子模型？ 盒子模型有两种，标准盒子模型和IE盒子模型。 标准盒子模型：width = content ...
标准盒子模型 IE盒子模型 区别 在我看来标准盒子模型也就是： IE盒子模型：
1. 盒子模型，普通盒子模型和怪异盒子模型有什么区别？ 答：普通盒子模型又称标准W3C盒子模型，标准盒子模型的Wi...
介绍css的盒子模型 css的盒子模型有两种：IE盒子模型，W3C盒子模型盒子模型：内容(content),内边距...
盒子模型： 盒子模型,又称框模型 (Box Model) 盒子模型主要的属性：width、height、paddi...
CSS盒子模型 盒子模型边框 CSS盒子模型的宽度和高度 CSS模型的填充 CSS盒子模型的边界 填充和边界的区别
1. 盒子模型 1.1 标准盒子模型 标准盒子模型包括margin、border、padding、content，...
js盒子模型 CSS盒子模型 ,margin - border - padding - content JS盒子...
其实盒子模型有两种，分别是ie 盒子模型和标准 w3c 盒子模型。 W3C 盒子模型： W3C 盒子模型的范围包括...
本文标题：盒子模型
本文链接：https://www.haomeiwen.com/subject/jfaemxtx.html
网友评论