前端复习Day4 盒子模型及边框
盒模型 一、 盒模型的概念和组成 盒子模型是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;} 三个值：上 左右 下 {padding:10px 20px 30px ;} 二个值：上下 左右 {padding:10px 20px ;} 一个值：四个方向 padding:2px; / 定义元素四周填充为2px / 说明：可单独设置一方向填充， 如：上方向 padding