CSS盒模型 元素占用的页面空间 根据W3C的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的 设置内边距和外边距可以放大缩小元素 CSS 内边距 padding 元素内容与元素边框之间的空白区域 单位 h1 {padding: 10px;} h1 {padding: 10px 0.25em 2ex 20%;} 内边距的百分比数值 可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的。 所以,如果父元素的 width 改变,它们也会改变。 CSS 外边距 元素边框外的空白区域 设置外边距会在元素外创建额外的“空白” h1 {margin : 0.25in;} p {margin : 10%;} 百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10% margin 简写属性。在一个声明中设置所有外边距属性。 * 盒模型 盒模型 width ----- 内容的宽度 而不是盒子的总宽度 height ------ 内容的高度 padding ------ 内边距 border ------ 边框 margin ------ 外边距 因为浏览器有默认样式所以我们需要重置样式