目录
一、基础知识
1. 标签分类
1.1 块元素
-
独占一行;可设置宽高
-
如:div、h1-h6、p、ul li
1.2 行内元素
-
在同一行显示;不能直接设置宽高,元素的宽高就是内容撑开的宽高
-
如:span、a、strong、em
1.3 行内块元素(内联元素)
-
在同一行显示;可设置宽高
-
如:img
2. 标签类型转换
2.1 块元素 → 行内元素
display:inline
2.2 行内元素 → 块元素
display:block
2.3 块元素、行内元素 → 行内块元素
display:inline-block
二、CSS 浮动原理(块元素 → 行内块元素)
float特点:块元素浮动后转换为行内块元素(内联元素)
根本上讲,只有块元素才能设置浮动,浮动后转换为行内块元素
行内元素、行内块元素使用float前,会先自动转换为块元素,使浮动生效(生效后再变为行内块元素)
示例1:内联元素 img(火狐测试)
示例2:行内元素 span(火狐测试)