什么是盒模型
什么是盒模型
盒子模型的概念
一个网页中是被分解为许多区块去控制页面的框架,这些区块是为了放置网页的不同元素所存在的。我们可以把“盒子模型”当成是一个网页的区块,也可当成是一个大区块里面的一个“区块元素”。如下图所示,一个盒子模型是由内容(content)、边框(border)、内边距(padding)、外边距(margin)所构成的,这就称为盒子模型。
图1
内容(content)
内容是包括文本和其他网页元素,例如段落、图片、标题、列表等等。网页里面的元素可见宽度是指内容、填充以及边框的宽度之和。
填充(padding)
填充是内容和边框中间的区域,它的默认填充值为零。配置元素的背景时,会同时运用填充和内容的区域。
边框(border)
padding和margin之间的区域称为边框,也可以说是盒子边缘的厚度。它的默认边框值为零,不显示边框。
属性名称 |
说明及常用值 |
border |
padding和margin之间的区域称为边框 |
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 |
配置围绕元素的边距: |
|
margin-top |
顶部边距 |
|
margin-right |
右侧边距 |
|
margin-bottom |
底部边距 |
|
margin-left |
左侧边距 |
padding属性
padding属性是html元素内容例如文本与边框之间的空白,它默认为零。如为元素添加了background-color或者是背景图片,该背景会同时应用于填充区域和内容区域。
属性名称 |
说明及常用值 |
|
paddiing |
配置元素内容和边框之间的空白: |
|
paddiing-top |
内容和上边框之间的空白 |
|
paddiing-right |
内容和右边框之间的空白 |
|
paddiing-bottom |
内容和下边框之间的空白 |
|
paddiing-left |
内容和左边框之间的空白 |