盒子模型原理.pptVIP

电子商务网页设计与制作 Design?and?making?of?E-commerce?web pages 盒子模型原理 T H I S I S 盒子模型概述 盒的尺寸 边框（border） Content 填充（padding） 边界（margin） 盒的高度与文本溢出 一、盒子模型概述 盒子模型的概念 CSS 将所有的网页元素都看做是一个矩形框，这个框由元素的内容、填充（padding）、边框（border）和边界（margin）组成。 margin border padding content 填充（padding） 是元素的内容与边框之间的空间。 边界（margin） 是一个元素和另一个元素之间的间隔。 margin border padding content 盒子模型的概念 1.由“盒子”堆出来的网页版面 网页中的所有元素都形成某种矩形框 html body h1 h2 p q a 块框 行框 网页中的矩形框 二、盒子模型的尺寸 元素的宽度计算分两种情况： 当元素未设置width 时，border、padding 和 margin 挤占内容区域的空间。 当元素设置了width 时， border、padding 和 margin 附加在 width 之外。 （1）宽度计算 padding