快速理解盒模型

时间:2022-11-11 08:14:00

盒模型是web界面的一个重要概念,理解盒模型后将会对web前端有更加深刻的理解。

1.盒模型包括:content、padding、border、margin四部分。

(1)content:本身元素,即元素真实内容所占的区域;with,height,min-width,max-with等就是控制content的大小。将盒模型比作人,那么content就是人的身体

(2)padding:内边距,包括有padding-left,padding-right,padding-top和padding-bottom。padding的大小就是人的肥胖程度,top和bottom是纵向高度,left和right是横向肥胖程度。

(3)border:边框。border相当于在人身体外面包裹一层内容,内容的厚度可以控制。

(4)margin:外边框,包括margin-top,margin-bottom,margin-left,margin-right。margin的大小就是人外面的衣服,margin越大衣服越多。

2.应用:

(1)content :with,height,min-with,min-height,max-with,max-height可以控制元素大小,通常单位是PX,也可以设置为百分比(%);编写页面自适应的时候,常用的一种方法就是with和height设置为百分比,同时利用min-with,min-height,max-with,max-height进行页面控制。

(2)padding:可以控制包在同一个box的两个元素间的距离,在同一个box中,属于内部,所以用padding内边距。

(3)border:给内容设置边框。

(4)margin:常用来设置外部元素间的距离,两个不在同一个box的元素的距离。

快速理解盒模型