前端随心记---------HTML5+CSS系列4.0
盒模型 一、 盒模型的概念和组成 盒子模型是CSS的基石,指定标签如何显示以及元素间相互关系； 页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容（content）、内边距（补白,填充,padding）、边框（border）和外边界（margin）组成； 1） padding内填充 padding区域在border与content之间； 背景色和背景图像会覆盖 padding和content组成的区域； padding的使用方法 padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。也称补白(内填充)。 用法： 1）用来调整内容在容器中的位置关系 2）用来调整子元素在父元素中的位置关系。 注： padding属性可以添加在父元素上。 3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值。 属性值的 4种方式： 四个值： 上 右 下 左 {padding:10px 20px 30px 40px;} 三个值： 上 左右 下 二个值： 上下 左右 一个值： 四个方向 说明：可单独设置一方向填充， margin（外边距/边界）的使用方法 边界：margin,在元素外边的空白区域，被称为边距。 外边距 (margin) 在 border 之外 ,margin 区域不应用背景 ;