学习笔记——HTML的内联元素、块元素和inline-block元素的区别

一、HTML可分为内联元素（行内元素）、块元素(块级元素)和inline-block元素

1.内联元素详细内容

（1）常见内联元素：<span> <a> <br> <i> <b> <sub> <sup> <em>
（2）特征
     a.设置高度、宽度、行高无效
     b.不会自动换行
     c.对margin仅设置左右方向有效，上下无效；padding设置上下左右有效
     d.只能包含内联元素
           

2.块元素详细内容

（1）常见块元素：<address> <div> <p> <h1>-<h6> <ul> <li>
（2）特征
     a.设置高度、行高有效，默认宽度为100%
     b.自动换行
     C.margin和padding设置均有效
     d.多个块状元素标签写在一起，默认排列方式从上至下
     e.可以包含内联元素和其他块元素
           

3.inline-block元素详细内容

（）特征
     a.能够识别宽高
     b.自动换行
     c.多个行内块状元素标签写在一起时，默认排列顺序从左到右
           

4.display属性能将三者任意转换

（1）display:inline;    //将该元素转换为内联元素
（2）display:block;     //将该元素转换为块元素
（3）display:inline-block;     //将该元素转换为inline-block元素