元素分类
- 行内元素;
- 块元素;
- 行内块元素;
行内元素(inline)
- 又称内联元素;
- 始终以行内逐个进行显示;
- 宽高:
- 不单独占行,无法设置宽高;
- 宽度、高度均取决于自身内容;
- 比如:a、span;
块元素(block)
- 又称块状元素;
- 宽高:
- 单独占行、可改变宽高;
- 默认状况下:宽度:100%;高度:自身内容高度;
- 比如:div、ol、ul;
行内块元素(inline-block)
- 又称内联块元素;
- 不单独占行;
- 宽高:
- 默认宽高为自身内容宽高,但可以修改;
- 网页布局时易出现对齐问题
- 原因:所有的行内块元素都是以基线对齐的
- 解决基线对齐的问题:
- vertical-align:
- top;
- bottom;
- middle;
- vertical-align:
display属性
- 可借由该属性进行元素类型转换;
- 属性值:
display:block;
- 转化为块元素;
display:inline;
- 转化为行内元素;
display:inline-block;
- 转化为行内块元素;
display:none
- 此元素不会被显示;
补充:
- 大部分块元素display属性值默认为block,其中列表li的默认值为list-item;
- 大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block(行内块元素);