CSS框模型入门

作者:课课家教育更新于： 2016-09-26 09:13:00

      对于css的初学者来说，对一些概念可能比较陌生，如框模型、选择器等等。你了解CSS框模型吗？框模型包含哪些内容？下面小编为你介绍一下相关知识。

　　一、什么是框模型

　　在CSS中，所有的元素其实都是一个框。html页面其实就是一个个框的堆叠与嵌套。而框模型，则是浏览器和阅读器对于框的处理方式。

　　CSS框模型(BoxModel)规定了元素框处理元素内容、内边距、边框和外边距的方式。

　　一、认知CSS框模型

      我们先来认知一下框模型，如下图

　　元素框包括元素内容、内边距、边框和外边距四部分。

　　元素内容位于元素框最内部分，直接包围内容的是内边距，内边距的边缘是边框，外边距就是边框以外的部分。

　　提示：1.背景应用于内容和内边距、边框三个区域。

　　　　　2.外边距默认是透明的，因此不会遮挡其后的任何元素。

　　一般情况下内边距、边框和外边距都是可选的，默认值是零。但因为很多元素的外边距和内边距是根据用户代理样式表设置的。为了解决这个问题，我们可以通过将元素的内外边距设置为零来覆盖这些浏览器样式。为了简便，我们使用通用选择器对所有元素进行设置：

　　在CSS中，width和height指的是内容区域的宽度和高度。

　　假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素，请看下图：

　　代码如下

　　提示：1.增加内边距、边框和外边距会影响整个元素框的尺寸，但不会影响内容区域的尺寸。

　　　　　2.外边距可以是负值，而且在很多情况下都要使用负值的外边距。

　　　　　3.内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

　　二、注意浏览器兼容性

　　一旦为页面设置了恰当的DTD，大多数浏览器都会按照上面的图示来呈现内容，但IE5和6是个例外。

　　例如：根据W3C的规范，元素内容占据的空间是由width属性设置的，而内容周围的padding和border值是另外计算的。在IE5.X和6中浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

　　虽然有方法解决这个问题，但这个不是本文章的重点，所以这里不作详细介绍。

　　这里只提供一个最简单的解决方案：就是回避这个问题，不给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

　　三、术语翻译

　　element:元素

　　padding:内边距，也有资料将其翻译为填充

　　border:边框

　　margin:外边距，也有资料将其翻译为空白或空白边

　　为了方便区分内边距与外边距，这里教大家一个小窍门：

　　边框内的空白是内边距，边框外的空白是外边距。

　　如果把房子比作框模型，那两座房子之间的路就是外边距，而房子的墙壁就是内边距，它们都会占掉框模型的一部分空间。多年以来，大家在生活中都习惯了这种布局，所以框模型也引入了这一人性化的元素。我们在设计页面的时候，也应该合理设置内外边距，尽可能地符合人类的审美习惯，让整个页面看起来更加大气。