盒子的基本属性

• 盒子属性是盒子模型的关键

宽度与高度

• 详见盒子模型的实现
• 注：为了保证盒子的运行效果在各大浏览器中是一致的，只要盒子中内容的总高度不确定，就不要将height设置为固定值

内填充属性

• 设置 p 元素的 4 个内边距：

p{
   padding:2cm 4cm 3cm 4cm;
}

• 可能的值：

length 	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
% 	规定基于父元素的宽度的百分比的填充 

• 可以使用综合的样式属性padding同时设置四个方向的填充，具体用法如下：

**padding:四个方向统一值;	
**padding:上下值 左右值;	
**padding:上 左右 下;	值1设置上填充，值2设置左右填充，值3设置下填充。
**padding:上 右 下 左;	四个值分别设置上、右、下、左四个方向的填充。

• 想一想：以下分别在哪个方向设置填充值？

**padding:10px 5px 15px 20px;
**padding:10px 5px 15px;
**padding:10px 5px;
**padding:10px;

• 试一试：W3C实例
• 终极大杀器：如果忘了padding几个方向的排放次序，可以用下面的几个属性：
  • padding-top: 上填充;
  • padding-bottom:下填充;
• padding-left: 左填充;
  • padding-right: 右填充;

外边距属性

• 思考：
  • 如何让网页页面随着浏览器窗口的缩小而缩小？
  • 如何让网页页面在页面窗口居中？

阴影和背景属性

返回 网页设计与开发