盒模型:
width :
height :
padding : 内填充/内边距/内补白
border : 边框
margin : 外边距 ; 元素与元素之间的距离
盒模型计算:
1. 计算元素真实的大小
元素真实的宽度 = width(你设置的) + padding(左右的) + border(左右的)
元素真实的高度 = height(你设置的) + padding(上下的) + border(上下的)
2. 计算元素在页面中真实占有的空间 (页面布局)
元素真实的宽度 = width(你设置的) + padding(左右的) + border(左右的) + margin(左右的)
元素真实的高度 = height(你设置的) + padding(上下的) + border(上下的) + margin(上下的)
margin: 外边距 综合属性
取值:
margin: 50px; // 一个值代表四个方向: 上下左右 一致
margin:20px 50px; // 两个值; 第一个值代表上下 第二个 左右
margin:20px 50px 100px; // 三个值: 第一个值上 第二个值左右 第三个下
margin:20px 50px 80px 120px; // 四个值 依次代表上右下左
margin拆分属性:
拆分为四个方向: left top right bottom
marign-top:100px; // 针对单一方向设置margin值
margin-left:10px;
margin-bottom:10px;
margin-right:20px;