第十五章

1．简答题

（1）什么是CSS盒模型概念，如何计算其宽度？

盒模型是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个对应值，用空格隔开进行设置。

（3）说明下列border-style属性值的含义：solid、outset、ridge、dotted。 边框样式用border-style属性描述，其值可取的关键字如下。 none：无边框，默认值

hidden：隐藏边框

dashed：点划线构成的虚线边框 dotted：点构成的虚线边框 solid：实线边框 double：双实线边框

groove：根据color值，显示3D凹槽边框 ridge：根据color值，显示3D凸槽边框 inset：根据color值，显示3D凹边边框 outset：根据color值，显示3D凸边边框

（4）简述绝对定位的设置效果。

设置position属性的值为absolute时即为绝对定位，是盒子相对其具有position属性设置的父对象进行定位。如果父对象无position属性设置，盒子以浏览窗口为参照绝对定位。绝对定位的元素浮于页面之上，不占用原页面空间，后续元素不受其影响，填充其原有位置。

（5）简述CSS的定位属性position的值的含义。

使用position属性可以精确控制盒子的位置，其语法格式如下。position: static |relative | absolute | fixed

static：静态定位，默认的定位方式，盒子按照HTML规则定位，定义top、left、bottom、right无意义。

absolute：绝对定位，通过top、left、bottom、right等属性值定位盒子相对其具有position设置的父对象的偏移位置，不占用原页面空间。

relative：相对定位，通过top、left、bottom、right等属性值定位元素相对其原本应显示位置的偏移位置，占用原位置空间。

fixed：固定定位，通过top、left、bottom、right等属性值定位盒子相对浏览器窗口的偏移位置。

2．操作题

（1）设置盒模型，实现图15-30所示效果。

height: 20px; width: 150px;

background-color: #EFEFEF; margin: 10px; } .p1 {

padding: 20px;

margin: 60px;

border-style:outset; border-width:10px; border-color:#0F0 ; }