首页技术文章正文

css盒子是什么，在网页中起到什么作用？

更新时间:2020年11月11日15时58分来源:传智播客浏览次数:

　　在浏览网站时，我们会发现页面的内容都是按照区域划分的。在页面中，每一块区域分别承载不同的内容，使得网页的内容虽然零散，但是在版式排列上依然清晰有条理。例如图1所示的设计类网站。

　　图1 设计类网站

　　在图1所示的网站页面中，这些承载内容的区域被称为盒子模型。盒子模型就是把HTML页面中的元素看作是一个方形的盒子，也就是一个盛装内容的容器。每个方形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

　　为了更形象地认识CSS盒子模型，首先我们从生活中常见的手机盒子的构成说起。一个完整的手机盒子通常包含手机、填充泡沫和盛装手机的纸盒。如果把手机想象成HTML元素，那么手机盒子就是一个CSS盒子模型，其中手机为CSS盒子模型的内容，填充泡沫的厚度为CSS盒子模型的内边距，纸盒的厚度为CSS盒子模型的边框，如图2所示。当多个手机盒子放在一起时，它们之间的距离就是CSS盒子模型的外边距。

　　图2 手机盒子的构成

　　网页中所有的元素和对象都是由图2所示的基本结构组成，并呈现出矩形的盒子效果。在浏览器看来，网页就是多个盒子嵌套排列的结果。其中，内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中，外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。

　　需要注意的是，虽然盒子模型拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。

猜你喜欢：

如何使用选择器获取元素？常用的jQuery选择器列举

网页制作中初学者该如何使用DW？

BFC是什么？10 分钟讲透BFC 原理

zookeeper命名服务详细介绍

上一篇：表格标签的特点，如何在HTML网页中创建表格？ 下一篇：【前端】盒子模型不同边框样式属性和应用技巧讲解