盒子模型: margin,padding,border三大知识点
p
{
margin:2cm 4cm 3cm 4cm;
}
margin写4个:上右下左
margin 写2个:上下,左右
margin: 0 auto // 水平居中.
在浏览器中:
我们可以这样理解:
页面上所有的东西都是大大小小的盒子。
margin 会影响盒子的位置。
border和padding还有width/height会影响盒子的大小。
可以这样理解:
在桌子上面放一个礼品盒,移动礼品盒位置,就是变换margin。
礼品盒的外壳的厚度就是border。
礼品盒里面的泡沫保护礼物的就是padidng。
礼品就是width+height。
盒子计算公式:
1)盒子大小 = border + padding + width/height
2)盒子宽度 = 左border+左padding+width + 右padding + 右border
3)盒子高度 = 上border+上padding+height + 下padding + 下border
结构样式:
width:宽度
height:高度
background:背景
border:边框
padding:内边距
margin:外边距
复合属性:
一个属性多个属性值的命令,叫作复合属性。
margin: 90px auto; /* 上下 左右 */
这样是让盒子的border以及里面
的内容(礼物盒)居中,border以及里面
的内容margin上90px。