注:新的HTML标准中已经没有明确的内联元素和块元素区分,元素性质可以通过继承来转换(dispaly:block/inline-block/inline)
内联元素(span等)
- span标签
- 多个内联元素排列,填充一行。
特殊:一行过于拥挤,最后一个没有空间,一部分挤到下一行内,是残缺的不完整的。 - 自身的宽度,由内部的元素宽高总合决定,** 不要在inline元素内写block元素 **
- 宽高不能设置,比较变态
- 高度由行高间接决定,字体不同也会有差异,涉及到行盒,(查找相关文章)
- div标签(典型的块元素)
- 默认占满一行, 宽度不是100%永远不要写
- 宽高由里面的文档流元素总和决定的,
- 可以设置宽高
- inline-block
- 排列形式上借鉴span元素,但是不会出现换行残缺现象
- 尺寸规则上借鉴块元素
小提示
- 块状元素高度小于内容综合,内容溢出
- overflow属性
- visible 默认样式
- hidden 隐藏溢出部分
- scroll 滚动条一直存在,死板,一般不用
- auto 滚动条比较灵活,决定用不用,怎么用
注:如果你有底部滚动条,内联元素只能在一个屏幕内显示,(向右拉滚动条,右边一大片空白)