网页设计与制作（HTML5+CSS3+JavaScript） 第7章：CSS3渲染.pptxVIP

第7章CSS3渲染;所有HTML元素可以看作盒子，在CSS中，box model这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充内容等。 ;7.1.1 盒子模型描述 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)： ;【例7.1】 盒子模型简单案例：元素的宽度为300px，计算总宽度。 style div { background-color: lightgrey; width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } /style /head body h2盒子模型演示/h2 pCSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。/p div这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。/div /body ;【程序执行效果】 让我们算算：总宽度=300px（宽度）+ 50px（左+右填充）+50px（左+右边框）+50px（左+右边距）=450px ;【例7.2】 反过来，已知总宽度，例如只有250像素的空间，如何设置总宽度为250像素的元素： styl