“最大寬度”與iScroll水平滾動例項頁面

一般來講，實現自定義滾動有兩種原理：一種藉助原生的滾動，scrollLeft/scrollTop值變化，它的優點是簡單，不足是效果呆板；另一種是根據內部元素的尺寸和容器的關係，通過修改內部元素的位置實現滾動效果，優點是效果可以很綻放。iScroll就是使用的後者，因此，如果我們希望使用iScroll模擬水平滾動，只能是使用“最大寬度”，這樣，滾動到底的時候才是真的到底。檢視效果點選連結：https://demo.cssworld.cn/3/2-7.php

1 <div id="wrap" class="wrap">
2   <ul>
 

3     <li><img src="1.jpg"></li>
4     <li><img src="1.jpg"></li>
5     <li><img src="1.jpg"></li>
6     <li><img src="1.jpg"></li>
7     <li><img src="1.jpg"></li>
8   </ul>
9 </div>

 1 .wrap {
 2   width
 
: 300px; height: 200px;
 3   position: relative;
 4   overflow: hidden;
 5 }
 6 .wrap > ul {
 7   position: absolute;
 8   white-space: nowrap;
 9 }
10 .wrap li {
11   display: inline-block;
12 }

1 new IScroll('#wrap', {
2   scrollbars: true,
3   scrollX: true,
4   scrollY: false
5 });

<textarea>寬度100%自適應效果例項頁面

在CSS世界中，唯一離不開box-sizing: border-box的就是原生普通文字框〈input〉和文字域＜textarea＞的100%自適應父容器寬度。拿文字域＜textarea＞舉例，＜textarea＞為替換元素，替換元素的特性之一就是尺寸由內部元素決定，且無論其display屬性值是inline還是block。這個特性很有意思，對於非替換元素，如果其display屬性值為block，則會具有流動性，寬度由外部尺寸決定，但是替換元素的寬度卻不受display水平影響，因此，我們通過CSS修改＜textarea＞的display水平是無法讓尺寸100%自適應父容器的：

1 textarea {
2     display: block; /*還是原來的尺寸*/
3 }

所以，我們只能通過width設定讓＜textarea＞尺寸100%自適應父容器。那麼，問題就來了，＜textarea＞是有border的，而且需要有一定的padding大小， 否則輸入的時候游標會頂著邊框，體驗很不好。於是，width/border和padding註定要共存，同時還要整體寬度100%自適應容器。如果不借助其他標籤，肯定是無解的。在瀏覽器還沒支援box-sizing的年代，我們的做法有點兒類似於“寬度分離”，外面巢狀＜div＞標籤，模擬border和padding, ＜textarea＞作為子元素，border和padding全部為0,然後寬度100%自適應父級<div>。檢視效果點選連結：https://demo.cssworld.cn/3/2-9.php

然而，這種模擬也有侷限性，比如無法使用：focus高亮父級的邊框，因為CSS世界中並無父選擇翳，只能使用更復雜的巢狀加其他CSS技巧來模擬。因此，說來說去，也就box-sizing：border-box才是根本解決之道！

1 textarea {
2     width: 100%;
3     -ms-box-sizing: border-box; /* for IE8 */
4     box-sizing : border-box;
5 )

在我看來，box-sizing被髮明出來最大的初哀應該是解決替換元素寬度自適應問題。如果真的如作者所言，那box-sizing: border-box;是不是沒用在點兒上呢？是不是應該像下面這樣CSS重置才更合理呢？

1 input, textarea, img, video, object {
2     box-sizing : border-box;
3 }

替換元素的固有尺寸是無法設定的，如今在移動端retina螢幕幾乎是標配，為了圖片顯示細膩，往往真實圖片尺寸是顯示圖片尺寸的兩倍。於是問題就來了，使用content生成圖片，我們是無法設定圖片的尺寸的，只能迫不得已使用一倍圖，然後導致圖片看上去有點兒模糊。

CSS 的有趣之處在於我們可以利用其特性表現實現其設計初衷以外的一些效果。例 如，這裡有個簡單的例子，利用內聯元素的 padding 實現高度可控的分隔線。傳統偷懶的實現方式可能是直接使用“管道符”，如：

但是使用“管道符”的話，因為是字元，所以高度不可控。如果對視覺呈現要求比較高，就需 要進行 CSS 圖形模擬，其中方法之一就是可以藉助內聯元素和 padding 屬性來實現，CSS 和 HTML 程式碼如下：

1 a + a:before {
2   content: "";
3   font-size: 0;
4   padding: 10px 3px 1px;
5   margin-left: 6px;
6   border-left: 1px solid gray;
7 }
8 <a href="">登入</a><a href="">註冊</a>

百分比padding值與等比例頭圖效果例項頁面

網頁開發的時候經常會有橫貫整個螢幕的頭圖效果，我們通常的做法是定高，如 200 畫素高， 螢幕小的時候圖片兩側內容隱藏。然而，這種實現有一個問題，就是類似筆記本這樣的小螢幕， 頭圖高度過高會導致下面主體內容可能一屏都實現不了，但是，如果我們使用 padding 進行等 比例控制，則小螢幕下頭圖高度天然等比例縮小，沒有任何 JavaScript，卻依然適配良好！例如：

 1 <div class="box">
 2     <img src="cover.jpg">
 3 </div>
 4 .box { 
 5     padding: 10% 50%;
 6     position: relative;
 7 }
 8 .box > img {
 9     position: absolute;
10     width: 100%; height: 100%;
11     left: 0; top: 0;
12 }

就實現了一個寬高比為 5:1 的比例固定的頭圖效果，上述方法包括 IE6 在內的瀏覽器都相容。檢視效果點選連結：https://demo.cssworld.cn/4/2-3.php改變瀏覽器寬度即 可感受到等比例的變化。