技術標籤：h5學習csshtmlcss3web

文章目錄

• • 1. 盒子邊緣溢位
  • 2. 移動端如使用有軟鍵盤彈出的頁面，儘量不使用fixed定位，輸入框input獲取焦點得時，虛擬鍵盤會把fixed元素頂上去，ios中有時候fixed定位會失效，一般使用絕對定位。
  • 3. Less(css前處理器)

1. 盒子邊緣溢位

• 當把一個元素設定了寬度100%，並定義為塊元素來適應螢幕，結果發現加了邊框或者margin或者padding時，會溢位文件，螢幕可橫向滑動。

• 解決方式：加個樣式box-sizing: border-box;來指定盒子的大小包括邊框和內邊距，盒子不受padding、border的影響，避免出現滾動條。注意對於外邊距無效。

例如：

 <div style="width: 100%; background: bisque;">
       <span>hello</span>
       <span style="float: right;">world</span>
 </div>

給div 加邊框 或者加padding，左滑才能看到右邊盡頭


加上樣式box-sizing: border-box;

<div style="width: 100%; background: bisque;padding: 20px;box-sizing: border-box;"
 
>
    <span>hello</span>
    <span style="float: right;">world</span>
</div>

但是對於外邊距margin無效

<div style="width: 100%; background: bisque;margin: 10px;box-sizing: border-box;">
   <span>hello</span>
   <span style="float: right;"
 
>world</span>
</div>

2. 移動端如使用有軟鍵盤彈出的頁面，儘量不使用fixed定位，輸入框input獲取焦點得時，虛擬鍵盤會把fixed元素頂上去，ios中有時候fixed定位會失效，一般使用絕對定位。

3. Less(css前處理器)

​ less是一種css語言的前處理器。

​ 通俗的說，CSS前處理器是一種專門編寫css程式碼的語言(工具)，通過less來編寫css程式碼變得更靈活，更高效，更容易維護。

什麼是預處理(預編譯)
Less是用來書寫css程式碼的工具，Less檔案的內的程式碼格式並不能被瀏覽器識別。想將Less檔案程式碼變成css程式碼，必須先將這個Less檔案預先進行處理。預處理的就可以將Less檔案程式碼轉換為css程式碼。
目前編寫css的程式碼的效率不高，為了適應前端開發日益複雜和工程化的需要，所以科學家開發了書寫css程式碼的新方式。這種前處理器有很多，最常被使用及討論的就是less、sass、stylus，我們主要學習less。