网页设计三剑客PSFLDW案例教程全套配套课件教学资源10.2 盒子模型.pptx

《网页设计三剑客PSFLDW案例教程全套配套课件教学资源10.2 盒子模型.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、PhotoshopCC2015FlashCC2015DreamweaverCC2015中文版案例教程PhotoshopCC2015/FlashCC2015/DreamweaverCC2015ZhongwenbanAnliJiaochengDreamweave篇10.2盒子模型什么是盒子模型border（边框）10.2.110.2.210.2.3margin（边界）10.2盒子模型10.2.410.2.5padding（填充）content（内容）10.2.1什么是盒子模型什么是CSS盒子模式呢

2、？为什么叫它是盒子？首先说说在网页设计中常听到的属性名：内容（Content）、填充（Padding）、边框（Border）、边界（Margin）。CSS盒子模式具备这些属性，如图10-2所示。10.2.2margin（边界）margin（边界）用来设置页面中元素和元素之间的距离，即定义元素周围的空间范围，是页面排版中一个比较重要的概念。margin属性包含4个子属性，分别是margin-top、margin-right、margin-bottom和margin-left，分别用于控制元素4周的边距

3、。10.2.3border（边框）border（边框）是内边距和外边距的分界线，可以分离不同的HTML元素，border属性设置的是元素的最外围。在网页设计中，如果计算元素的宽和高，则需要把border计算在内。Border属性有3个子属性，分别是边框样式（border-style）、边框宽度（border-width)和边框颜色（bordercolor）。10.2.4padding（填充）在CSS中，可以通过设置padding属性定义内容与边框之间的距离，即内边距。padding属性值可以是一个具

4、体的长度，也可以是一个相对于上级元素的百分比，但不可以使用负值。padding属性可以为盒子定义上、右、下、左各边填充的值，分别是padding-top（上填充）、Padding-right（右填充）、Padding-bottom（下填充）和Padding-left（左填充）。10.2.5content（内容）从盒模型中可以看出中间部分是content（内容）,它主要用来显示内容，这部分也是整个盒模型的主要部分，其他如margin、border、Padding所做的操作都是对content部分所做的

5、修饰。对于内容部分的操作，也就是对文、图像等页面元素的操作。