一、典型代表
- input
- img
二、特点:
- 在一行上显示
- 可以设置宽高
<style type="text/css"> img{ width: 300px; /* 顶部对齐 */ vertical-align: top; } input{ width: 300px; height: 200px; background-color: blue; } </style> </head> <body> <img src="../2.26/picture.jpg" alt=""> <input type="text"> </body>
- 补充:行内块与行内块之间的空隙:如果两个span在HTML这样放置,会出现空隙,使用浮动可以去除这种间隙.
span {/*span转换为行内块,设置300宽高和黑色边框*/ display: inline-block; border: 1px solid #000; width: 300px; height: 300px; }
<body> <span></span> <span></span> </body>
- 如果两个span一列排列,则之间会有2px的边框,变细可以使用负的margin值(具体可以参考另一篇文章:鼠标经过提高层级的一个demo)
<body> <span></span><span></span> </body>