盒模型的认识

一、 盒模型的组成

盒模型组成部分由：content(内容区、元素)+padding(填充区、内边距)+border(边框区)+margin(外边界区、外边距)

二、了解

content：元素

border：盒子的边距(边宽)

padding：边框到元素之间的距离(内边距)

margin：元素的边到另一个元素边的距离(外边距)

三、边距属性

padding：

1、添加padding值后，padding值会把元素原有的大小撑大。

解决方法：①可以在元素的宽高上减去所加元素的padding值，②给元素添加padding值时使用box-sizing: border-box(怪异盒模型)属性使其值被包含。

2、padding属性对背景图片是不起作用的，也可以说是背景图片位置不受padding值的影响

margin：

1、margin的值可以用负数值，padding不能用负数值

2、margin不影响元素的实际宽高，但是会增加它所占的区域

四、使用方法

padding使用方法：

方法一：

padding-top:50px; 上内边距填充50的像素

padding-right:50px; 右内边距填充50的像素

padding-bottom:50px; 下内边距填充50的像素

padding-left:50px; 左内边距填充50的像素

方法二:

padding: 5px;上、右、下、左内边距统一增加5像素

padding: 5px 3px; 上和下内边距统一增加5像素，左和右内边距统一增加3像素

padding: 2px 3px 4px；上内边距增加2像素，左和右内边距统一增加3像素，下内边距加4像素

padding: 2px 3px 4px 5px; 上内边距增加2像素，右内边距增加3像素，下内边距增加4像素，左内边距增加5像素

margin使用方法：

方法一：

margin-top:50px; 上外边距填充50的像素

margin-right:50px; 右外边距填充50的像素

margin-bottom:50px; 下外边距填充50的像素

margin-left:50px; 左外边距填充50的像素

方法二:

margin: 5px;上、右、下、左外边距统一增加5像素

margin: 5px 3px; 上和下外边距统一增加5像素，左和右外边距统一增加3像素

margin: 2px 3px 4px；上外边距增加2像素，左和右外边距统一增加3像素，下外边距加4像素

margin: 2px 3px 4px 5px; 上外边距增加2像素，右外边距增加3像素，下外边距增加4像素，左外边距增加5像素

实现元素水平居中的方法：margin: 0 auto;

五、标准盒模型的占位组成：

元素宽度占位：margin-left + border-left + padding-left + content的宽 + padding-right + border-right + margin-right

元素高度占位：margin-top + border-top + padding-top + content的高 + padding-bottom + border-bottom + margin-bottom