Web前端——盒子模型

1、盒子模型：display

1. 块级元素 特征：独占一行，对宽度、高度、对齐方式等支持

• display:block
• 举例：div ul li h1~h6 p等

2. 内联级元素：不独占一行，对宽度、高度、对齐方式等不支持

• display:inline
• 举例：a span等

3. 内联块级元素 特征：不独占一行 对宽度、高度、对齐方式等支持

• display:inline
• 举例：img input table等

4. 弹性盒子元素 特征: 弹性盒子内子元素默认始终横着布局，子元素高度一致

• display:flex

2、盒子内部结构

由内到外分别是内容区、填充区、边框区、外边距区

    1、内容区：width、height默认是对内容区起作用
    2、填充区：padding 用法：以上为开始，顺时针旋转，不够对称
    3、边框区：border 复合属性 border-style边框的样式 border-width边框的宽度 border-color边框颜色
    4、外边距区：margin 用法：以上为开始，顺时针旋转，不够对称

auto：可以横向居中，非纵向居中

margin:0 auto; //横向居中

配套属性：box-sizing:content-box(内容区) border-box(内容区+填充区+边框区)