"盒子"是对某些网页元素的一个形象化的比喻.这些元素显示的时候是长方形的,有一定的宽度,高度,看起来象是现实世界中的"盒子"
哪些元素是“盒子元素”?
display值为block(块状元素),inline-block(行内块元素),table的元素,例如:div,p,ul,image,table
哪些元素不是“盒子元素”?
display值为inline的元素,例如:span,a,em
“盒子元素”与“非盒子元素”的区别是什么
“盒子元素”具有:内间距(padding)、外间距(margin),可以设定“宽度”和“高度”
“非盒子元素”不具有:内间距(padding)、外间距(margin),不可以设定“宽度”和“高度”
“盒子元素”几个重要的属性
内容,内间距,边框,外间距
下面来解释一下这些属性。
- 内容
- 盒子里装的“子元素”,通常是文字、图片等元素,但是也可以是小盒子(“盒子”嵌套) 内间距
- 盒子的"边框"与“内容”间隔的距离 边框
- 有宽度和颜色之分 外间距
- 盒子的"边框"与“外部元素”间隔的距离
“盒子元素”的外观