CSS3新增哪些与盒相关的属性？简述其各自功能。

Question

CSS3新增哪些与盒相关的属性？简述其各自功能。

Answer 1

盒模型是CSS控制页面布局的一个非常重要的概念，页面上的所有元素，包括文本、图像、超级链接、div块等，都可以被看作盒子。由盒子将页面中的元素包含在一个矩形区域内，这个矩形区域则称为“盒模型”。

盒模型由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分，如图15-1所示。盒子的实际大小为这几部分之和，盒子宽度为：左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

（2）CSS3新增哪些与盒相关的属性？简述其各自功能。

①宽度和高度，定义内容的大小属性；如果盒子里信息过多，超出width和height属性限定的大小，盒子的高度将自动放大。这时需要使用overflow属性设置处理方式。定义盒模型语法格式如下：

width: auto | length;

height: auto | length;

overflow: auto | visible | hidden | scroll;

②边界（margin）是盒模型与其他盒模型之间的距离，使用margin属性定义，其语法格式如下。

margin: auto | length;

③填充（padding）用来设置内容和盒子边框之间的距离，可用padding属性设置，其语法格式如下。

padding: length;

④边框（border）是盒模型中介于填充（padding）和边界（margin）之间的分界线，可用border-width、border-style、border-color属性定义边框的宽度、样式、颜色，也可以直接使用border属性后加3个对应值，用空格隔开进行设置