標籤：ott 解釋 yellow fine load sheet dfa 固定 float
iOS開發如何學習前端(2)上一篇成果如下。
實現的效果如下。
<ul>，也既iOS中的UITableView.<li>,也既iOS中的UITableViewCell，的時候，這個li標籤的背景色會變成黑色。頁面很簡單。但是仍存在一個小問題。眼尖的同學可以發現。當滑鼠懸浮在li上的時候，背景色是變了沒錯，但是當背景色變的時候，我們發現，其實黑色的li的bottom是超過父控制項的，也就是說，我們li的下邊沒和ul的下邊對齊。
這是為什麼呢？
我去check了一下我們的css檔案。關於<li>和<a>的屬性是這樣的。
li { float: left; height: 44px; width: auto;}li a { display: block; text-decoration: none; color: white; text-align: center; padding: 14px 16px}
這裡出問題的地方在於，我用了一個不是很優雅的方法來實現了text的置中。
我是怎麼實現的呢？
這裡，需要先解釋一下在css中，padding的含義。先看一張iOS中的圖。
這是一個UILabel，我給他設定了左邊距和上邊距，熟悉iOS的同學都知道，這時候，這個label的長寬會自動和內容的長寬一致。
那麼如果把css中的padding概念套在iOS中，那麼可以說，在這種情況下，padding應該是0.
好，這時候我們把約束條件增加兩個，我把這個label的寬和高都設定成固定值。
現在這個label變成了什麼樣子呢？
他變成了這個樣子
這個時候，UILabel的寬高遠大於text的寬高。那麼，這個時候，padding的值就不是0了。
是多少呢？
UIFont有個屬性是pointSize,那麼padding-top的值就是(UILabel的高 - 內容的高)/2
padding-left的值就是(UILabel的寬 - 內容的寬)/2
所以如果想要文字置中顯示的話，就需要padding-top和padding-bottom相同。
但是代碼中，我們的padding-top和padding-bottom已經相同了，為什麼滑鼠懸浮狀態的時候感覺<a>大了呢？
實際上，我用chrome的Inspect查看了一下。發現
實際上<a>的高度是46，超過了li的高度，這就是為什麼hover狀態下，當背景色變的時候，<a>的bottom超過了li的bottom.
直覺告訴我，這種做法不太好。為什麼，因為設定padding來實現垂直置中需要耗費大量的精力，還得你自己算字型大小和padding的關係。挺討厭的。
於是我Google了一下。
點擊去之後看到了這種做法。
原理就是把line-height這個屬性和文字的容器height設定成大小一致即可。
後來我發現了一個問題，就是把line-height設定成百分比的形式是無效的。比如line-height: 100%.
為什麼呢？因為line-height只能設定成px形式的值才意味著文字內容和容器內容高度一致，如果設定成百分比形式，那麼會讓css以為設定的是字型的大小。
然後我們把css改成這樣。
li a { display: block; text-decoration: none; color: white; text-align: center; line-height: 44px; padding-left: 16px; padding-right: 16px;}
效果如下。
搞定了。
今天想要實現的效果如下。
這個實現原理，類似於iOS中的把一個父View的其中一個子View的hidden設定為true。然後添加一個事件，比如點擊之後，把這個view的hidden設定為false。那麼這個子view就顯示出來了。
那麼在css中對應的屬性就是display了。
先看看html。
<html> <head> <link rel="stylesheet" href="dropdown.css" type="text/css"> </head> <body> <div class="dropBtn"> DropDown <div class="dropdown"> <ul class="dropdownul"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </div> </div> </body></html>
那麼class為dropBtn的就是我們的父view，對應的子view是class為dropdown的div。裡面還內嵌一個列表ul，我們現在需要做的就是先把div.dropdown的display屬性設定為none.
div.dropBtn div.dropdown { display: none;}
然後，效果是當滑鼠滑動到div.dropBtn上的時候，列表顯示。
那麼就可以這麼寫。
div.dropBtn:hover div.dropdown { display: inline;}
搞定。
完整的css檔案如下。
* { margin: 0px; padding: 0px;}div.dropBtn { width: 100px; background: green;}div.dropBtn div.dropdown { display: none;}div.dropBtn:hover div.dropdown { display: inline;}div.dropdown { position: relative;}
ul.dropdownul { width: 100%;}li { list-style: none; display: block; background: yellow; height: 40px;}li:hover { background: red;}li a { display: block; text-decoration: none; text-align: center;}解釋一下.
完畢。
iOS開發如何學習前端(2)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
