什么是盒模型

什么是盒模型

  盒子模型的概念

一个网页中是被分解为许多区块去控制页面的框架，这些区块是为了放置网页的不同元素所存在的。我们可以把“盒子模型”当成是一个网页的区块，也可当成是一个大区块里面的一个“区块元素”。如下图所示，一个盒子模型是由内容（content）、边框（border）、内边距（padding）、外边距（margin）所构成的，这就称为盒子模型。

                                                                                                  图1

 

内容（content）

内容是包括文本和其他网页元素，例如段落、图片、标题、列表等等。网页里面的元素可见宽度是指内容、填充以及边框的宽度之和。

填充（padding）

填充是内容和边框中间的区域，它的默认填充值为零。配置元素的背景时，会同时运用填充和内容的区域。

  边框（border）

padding和margin之间的区域称为边框，也可以说是盒子边缘的厚度。它的默认边框值为零，不显示边框。

属性名称	说明及常用值
border	padding和margin之间的区域称为边框 ▪复合式写法（border：10px  solid  #ff0; ）    ▪三个数值。第一个配置边框的粗细（即border-width），第二个配置边框的线型（即border-style），第三个配置边框的颜色（即border-color）。 ▪代表四个边框样式是统一的，最复合式的写法；
border-top-width	上边框的宽度
border-right-width	右边框的宽度
border-bottom-width	下边框的宽度
border-left-width	左边框的宽度
border-top-style	上边框的线型
border-right-style	右边框的线型
border-bottom-style	下边框的线型
border-left-style	左边框的线型
border-top-color	上边框的颜色
border-right-color	右边框的颜色
border-bottom-color	下边框的颜色
border-left-color	左边框的颜色

 

边距（margin）

边距是一个元素和其他相邻元素之间的空白间距。这个区域显示的是网页上或者是容器内元素的背景色。在图1中，边距的区域是不显示的。

盒子边距与填充的概念

margin属性

   边距是一个元素和其他相邻元素之间的空白间距，边距总是透明的，在该区域看到的是网页或父元素的背景色。

属性名称	说明及常用值
margin	配置围绕元素的边距： ▪一个数值（px或em）或百分比。例如：margin：10px；。设为0时不用写单位。值为“auto”告诉浏览器自动计算元素的边距。 ▪两个数值（px或em）或百分比。第一个配置上下边距，第二个配置左右边距。例如margin：20px 10px； ▪三个数值（px或em）或百分比。第一个配置上边距，第二个配置左右边距，第三个配置下边距。 ▪四个数值（px或em）或百分比。按以下顺序配置边距：margin-top,margin-right,margin-bottom,margin-left
margin-top	顶部边距
margin-right	右侧边距
margin-bottom	底部边距
margin-left	左侧边距

 

padding属性

  padding属性是html元素内容例如文本与边框之间的空白，它默认为零。如为元素添加了background-color或者是背景图片，该背景会同时应用于填充区域和内容区域。

属性名称	说明及常用值
paddiing	配置元素内容和边框之间的空白： ▪一个数值（px或em）或百分比。例如：padding：10px；。设为0时不用写单位。 ▪两个数值（px或em）或百分比。第一个配置上下填充，第二个配置左右填充。例如padding：20px 10px； ▪三个数值（px或em）或百分比。第一个配置上填充，第二个配置左右填充，第三个配置下填充。 ▪四个数值（px或em）或百分比。按以下顺序配置边距：paddiing-top,paddiing-right,paddiing-bottom,paddiing-left
paddiing-top	内容和上边框之间的空白
paddiing-right	内容和右边框之间的空白
paddiing-bottom	内容和下边框之间的空白
paddiing-left	内容和左边框之间的空白