盒子模型
-
块级元素
display: block
独占一行 ,对宽度、高度、对齐方式等支持
例如: div ul li h1-h6 p 等
-
内联级元素
display: inline
不独占一行,对宽度、高度、对齐方式等不支持,跟(块级相反)
例如: a span 等
-
内联块级元素
display: inline-block
不独占一行,对宽度、高度、对齐方式等支持,可以看成是块级元素和内联级元素的结合体
例如: img input table
以上是基本的盒子模型,通过以上模型延伸出弹性盒子模型(display: flex)
盒子内部结构
-
内容区
属性:width height
-
填充区
属性: padding
-
边框区
属性:border(符合属性)
border-style 边框样式
border-width 边框宽度
border-color 边框颜色
-
外边距区
属性: margin
可以在横向上使用auto可以达到居中的效果,但是纵向上不能使用使用auto,因为纵向上不确定高度