CSS3盒模型规定了网页元素的显示方式,包括大小、边框、边界和补白等概念。2015年4月,W3C的CSS工作组发布了CSS3基本用户接口模块,该模块负责控制与用户接口界面相关效果的呈现方式。
1、盒模型基础
在网页设计中,经常会听到内容(content)、补白(padding)、边框(border)、边界(margin)等术语,在日常生活中盒子装东西与此类似,所以统称为盒模型。
盒模型具有如下特点,其结构示意图如下图所示:
- 盒子都有4个区域:边界、边框、补白、内容。
- 每个区域都包括4个部分:上、右、下、左。
- 每个区域可以统一设置,也可以分别设置。
- 边界和补白只能定义大小,而边框可以定义样式、大小和颜色。
- 内容可以定义宽度、高度、前景色和背景色。
在默认状态下,所有元素的初始状态(margin、border、padding、width和height)都为0,背景色为透明。当元素包含内容后,width和height会自动调整为内容的宽度和高度。调整补白、边框和边界的大小,不会影响内容的大小,但会增加元素在网页内显示的总尺寸。
2、大小
使用width(宽)和height(高)属性可以定义内容区域的大小。