《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 14.盒子模型.pptx

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍

01盒模型的组成02盒子边框03内边距04外边距目录contents05盒子阴影

PART1盒模型的组成

牛奶是怎样运输，让消费者购买的呢？网页布局的本质：把网页元素（文字图片等等），放入盒子里面，然后利用CSS摆放盒子的过程。行内元素类似牛奶，如果要摆放出造型，需要用一个盒子装起来。前面学过的双标签可以看作为一个盒子。有了盒子，用户就可以装载内容并随意运送摆放位置了。

盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外