盒子模型

盒子模型

1.盒子模型由四部分组成，内容（content）（内容就是宽高的大小），内边距（padding），边框（content）外边框（margin）。

2.盒子大小由三部分组成，内容（content），内边距（padding），边框（border）。

3.什么是盒子模型？

盒子模型是css中重要的指导思想

盒子模型是网页布局的基石（标签）

它认为页面中所有的元素都可以看作为一个盒子。

它认为可以通过盒子的属性，而改变原素（盒子）在页面中的表现效果

它认为盒子间是相互影响的

margin：设置盒子间的距离，属性值为像素值

margin-top：上外边距

margin-bottom：下外边距

margin-left：左外边距

 

margin-right：右外边距

复合形式：margin

margin：值（上下左右相同的边距相同）

margin：值1（上下）值2（左右）

margin：值1（上） 值2（左右） 值3（下）

margin：值1（上）值2（下）值3（左）值4（右）

上下两个盒子外边距，取最大值

padding:设置的内容距离边框的距离，属性值为像素值

padding-top：上内边距(内容距离上边框距离)

padding-bottom：下内边距

padding-left：左内边距

padding-right：右内边距

复合形式：padding

padding：值（上下左右相同的边距相同）

padding：值1（上下）值2（左右）

padding：值1（上） 值2（左右） 值3（下）

padding：值1（上）值2（下）值3（左）值4（右）