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> ```