行内元素如何设置 高 宽

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

 1. position : absolute 

 2. float : left 或 float:right 

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的width 和 height 了，且默认宽度不占满父元素。

如下面的代码，大家都知道 a 标签是 行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>

css代码

<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

inline-block 元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

将内联元素 ----->  内联块元素 (可以设置元素的高宽)  方法如下:

display:inline-block;
position:absolute;
float:left / right;

写上上面三个中的其中之一就可以....然后就可以给内联块元素设置高宽

(但是,上面三个的设置结果有所不同)