CSS 2种模式下的盒模型互相转化

盒模型简介

一个盒子中主要的属性就5个：width、height、padding、border、margin。

• width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。
• height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度
• padding是“内边距”的意思
• border是“边框”
• margin是“外边距”

真实占有宽度= 左border + 左padding + width + 右padding + 右border

padding

 如果写了4个值：
 padding:30px 20px 40px 100px;
 上、右、下、左

 如果只写3个值：
 padding: 20px 30px 40px;
 上、右、下、??和右一样

 如果只写2个值：
 padding: 30px 40px;


  //用小属性层叠大属性：
  padding: 20px;
  padding-left: 30px;

 //下面的写法错误：
 padding-left: 30px;
 padding: 20px;
 (不能把小属性，写在大属性前面。)

padding影响盒子大小

div {
	width:100px;
	height:100px;
	padding: 0 0 0 40px;
}