盒子模型 css

盒子模型是CSS控制页面时一个很重要的概念.只有很好地掌握了盒子模型以及其中每个元素的用法,才能真正地控制好页面中的各个元素.以下就介绍盒子模型的基本概念.(1).所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间,一般来说这些被占据的空间往往都是比单纯的内容大,换句话说,可以通过调整盒子的边距和距离等参数,来调节盒子的位置和大小.(2).一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解.一是理解一个孤立的盒子的内部结构,二是理解多个盒子之间的互相关系.1.在学习盒子模型之前,先来看一个例子,假设在墙上有4幅画,整齐地排列着,对于每幅画来说,都有一个"边框",在英文中称为"border“ 每个画框中,画和边框通常都会有一定的距离,这个距离称为"内边距",英文称为"padding",各个画之间通常也不会紧贴着,它们之间的距离称为"外边距",英文中称为"margin"所以称padding-border-margin模型也可以统称为"盒子",英文为"Box";在css中,一个独立的盒子模型由content,border,padding和margin4个部分组成,一个盒子实际所占与的宽度(或高度)是由"content+padding+border+margin"组成.在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小,2.注意一条重要原则:盒子模型中,都是从顶部开始顺时针旋转的,即 上 ,右,下,左的顺序