1、盒子模型:display
- 块级元素 特征:独占一行,对宽度、高度、对齐方式等支持
- display:block
- 举例:div ul li h1~h6 p等
- 内联级元素:不独占一行,对宽度、高度、对齐方式等不支持
- display:inline
- 举例:a span等
- 内联块级元素 特征:不独占一行 对宽度、高度、对齐方式等支持
- display:inline
- 举例:img input table等
- 弹性盒子元素 特征: 弹性盒子内子元素默认始终横着布局,子元素高度一致
- 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(内容区+填充区+边框区)