15-9隐性改变display类型 · 初识HTML+CSS

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一： 1. [position : absolute](http://www.imooc.com/code/2073 "忘了的小伙伴，让我们点击链接复习一下吧! ") 2. float : left 或 [float:right](http://www.imooc.com/code/2071 "忘了的小伙伴，让我们点击链接复习一下吧! ") 简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以display:inline-block（[块状元素](http://www.imooc.com/code/2048 "忘了的小伙伴，让我们点击链接复习一下吧! ")）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。如下面的代码，小伙伴们都知道 a 标签是 [行内元素](http://www.imooc.com/code/2049 "忘了的小伙伴，让我们点击链接复习一下吧! ") ，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。 ~~~ <div class="container"> <a href="#" title="">进入课程请单击这里</a> </div> ~~~ css代码 ~~~ <style> .container a{ position:absolute; width:200px; background:#ccc; } </style> ~~~ 想不起 display:inline-block 是做什么的小伙伴们，单击“[元素分类--内联块状元素](http://www.imooc.com/code/2050)”可返回到前面小节进行复习。 ### 任务我来试试：下面我们来试试 float 有没有这种功能。（记得点击右上角的全屏按钮查看效果哦！）把右侧代码编辑器中的第 8 行改为 float:left ;看是否 width:200px 还起作用。 ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隐性改变display类型</title> <style> .container a{ position:absolute; width:200px; background:#ccc; } </style> </head> <body> <div class="container"> <a href="#" title="">进入课程请单击这里</a> </div> </body> </html> ```