盒子模型的相关css属性及概念
盒子的box-sizing属性
box-sizing取值 | 称呼 | 特点 |
---|---|---|
content-box(默认) | 标准盒模型 | width = content |
border-box | IE盒模型(怪异盒模型) | width = border + padding + content |
盒子的display属性
盒子类型 | display属性值取值 | 称呼 | 对应标签 | 特点 |
---|---|---|---|---|
块级 | block | 块级 | div、p、h、li、ul、表单form等 | 1.独占一行 2.具有流体特性,默认和父元素一样宽3.设置宽高有效 |
行级 | inline-block | 内联块级(行块) | img、表单元素(label、input、textarea、select、button等) | 1.非独占一行2.具有包裹性,默认紧紧包住内容3.设置宽高有效4.行级元素默认是放在基线base-line上的,行级和行级之间默认是基线base-line对齐的 |
行级 | inline | 内联 | span、a等 | 1.非独占一行2.具有包裹性,默认紧紧包住内容3.设置宽高无效 |
flex | ||||
none |