日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
3年開發(fā)中遇到的CSS問題及解決方案，有大佬幫他總結(jié)好了！

 

成都創(chuàng)新互聯(lián)公司是專業(yè)的高郵網(wǎng)站建設(shè)公司，高郵接單;提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行高郵網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

在瀏覽器中實(shí)現(xiàn)用戶界面時(shí)，請(qǐng)盡可能減少瀏覽器帶來的差異，以使用戶界面具有可預(yù)測性。跟蹤所有這些差異很困難，因此，我整理了一些常見問題及其解決方案方便大家查看。

1.重置button和input元素的背景

添加一個(gè)按鈕時(shí)，重置它的背景，否則它會(huì)在不同的瀏覽器中看起來不同。在下面的例子中，同樣的按鈕在 Chrome 和 Safari 中，后者添加了默認(rèn)的灰色背景。

 

重置按鈕的樣式可以解決些問題：

 
 
 
 
    
  
  
  
  
  1. button { 
    2. 
  
  
  
  
  2.   appearance: none; 
    3. 
  
  
  
  
  3.   background: transparent; 
    4. 
  
  
  
  
  4. } 
    5.

事例源碼：https://codepen.io/shadeed/pen/MzWBYv

2.Overflow: scroll Vs auto

要限制元素的高度并允許用戶在其中滾動(dòng)，可以添加overflow: scroll-y。在 macOS 上的Chrome上會(huì)很好看。然而，在 Windows上，滾動(dòng)條總是在那里(即使內(nèi)容很短)。這是因?yàn)闊o論內(nèi)容如何，scroll-y都會(huì)顯示滾動(dòng)條，這時(shí)候我們可以使用overflow: auto，它只會(huì)在需要時(shí)顯示滾動(dòng)條。

 
 
 
 
    
  
  
  
  
  1. .element { 
    2. 
  
  
  
  
  2.     height: 300px; 
    3. 
  
  
  
  
  3.     overflow-y: auto; 
    4. 
  
  
  
  
  4. } 
    5.

事例源碼：https://codepen.io/shadeed/pen/vQYwXj

3.添加 flex-wrap

對(duì)包含多個(gè)子元素使用 display: flex，如果元素過多，所有子元素會(huì)被壓縮，如下所示：

            

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   
 
  •   
    •  
  •   
    •  
  •   
    •  
  •   
    •  
  •   
    •  
  •  
  •  
  •  
  • .wrapper { 
  •   display: flex; 
  • } 
  •  
  • .item { 
  •   flex: 0 0 120px; 
  •   height: 100px; 
  • } 

    •  

    面的例子在大屏幕上非常有用。在移動(dòng)設(shè)備上，瀏覽器會(huì)顯示一個(gè)水平滾動(dòng)條。

     

    解決方法就是使用 flex-wrap: wrap，這樣當(dāng)水平空間不夠時(shí)，瀏覽器會(huì)幫我們自動(dòng)換行。

    事例源碼：https://codepen.io/shadeed/pen/JejVLG

    4. 當(dāng) Flex 項(xiàng)目的數(shù)量是動(dòng)態(tài)的時(shí)，不要使用justify-content: space-between

    當(dāng)將justify-content: space-between應(yīng)用于flex容器時(shí)，它將分配元素并在元素之間留出相等的空間。我們的示例有8個(gè)卡片項(xiàng)，它們看起來不錯(cuò)。如果，由于某種原因，項(xiàng)目的數(shù)量是7呢?第二行元素看起來與第一行不同。

     

    在這種情況下，使用CSS網(wǎng)格會(huì)更合適。

    事例源碼：https://codepen.io/shadeed/pen/XyWLLo

    5. 長單詞和鏈接

    當(dāng)在移動(dòng)屏幕上閱讀一篇文章時(shí)，一個(gè)長單詞或內(nèi)聯(lián)鏈接可能會(huì)導(dǎo)致出現(xiàn)水平滾動(dòng)條。使用CSS word-break可以防止這種情況的發(fā)生

     

    解決方法：

     
 
 
 
      
  
  
  
  
    1. .article-content p { 
      2. 
  
  
  
  
    2.     word-break: break-all; 
      3. 
  
  
  
  
    3. } 
      4.

    6.透明漸變

    當(dāng)漸變是以 transparent 開始或者結(jié)束的時(shí)候，在Safari中看起來會(huì)有點(diǎn)黑。這是因?yàn)镾afari不能識(shí)別關(guān)鍵字transparent，這里可以通過rgba(0,0,0,0)來解決該問題。請(qǐng)注意下面的截圖：

     

    出問題的代碼:

     
 
 
 
      
  
  
  
  
    1. .section-hero { 
      2. 
  
  
  
  
    2.   background: linear-gradient(transparent, #d7e0ef), #527ee0; 
      3. 
  
  
  
  
    3.   /*Other styles*/ 
      4. 
  
  
  
  
    4. } 
      5.

    解決方式:

     
 
 
 
      
  
  
  
  
    1. .section-hero { 
      2. 
  
  
  
  
    2.   background: linear-gradient(rgba(0, 0, 0,0), #d7e0ef), #527ee0; 
      3. 
  
  
  
  
    3.   /*Other styles*/ 
      4. 
  
  
  
  
    4. } 
      5.

    7.關(guān)于CSS網(wǎng)格中auto-fit和auto-fill之間的差異的誤解

    在CSS grid中，repeat函數(shù)可以創(chuàng)建響應(yīng)列布局，而不需要使用媒體查詢。要做到這一點(diǎn)，使用auto-fill或auto-fit即可。

     
 
 
 
      
  
  
  
  
    1. .wrapper { 
      2. 
  
  
  
  
    2.     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
      3. 
  
  
  
  
    3. } 
      4.

     

    簡而言之，auto-fill將在不擴(kuò)展列寬的情況下對(duì)列進(jìn)行排列，而auto-fit只會(huì)在列為空的情況下將列折疊到零寬度。

    8. 當(dāng)視口不夠高時(shí)將元素固定在屏幕頂部

    如果將元素固定在屏幕頂部，如果視口不夠高會(huì)發(fā)生什么情況?很簡單:它會(huì)占用屏幕空間，因此，用戶瀏覽網(wǎng)站時(shí)可用的垂直區(qū)域就會(huì)變小，這會(huì)影響用戶的體驗(yàn)。解決方法不是當(dāng)用戶往下劃動(dòng)的時(shí)候，固定頭部需要回到文檔中跟隨屏幕滾動(dòng)，可以使用position: sticky來快速達(dá)到該效果。

     
 
 
 
      
  
  
  
  
    1. @media (min-height: 500px) { 
      2. 
  
  
  
  
    2.     .site-header { 
      3. 
  
  
  
  
    3.         position: sticky; 
      4. 
  
  
  
  
    4.         top: 0; 
      5. 
  
  
  
  
    5.         /*other styles*/ 
      6. 
  
  
  
  
    6.     } 
      7. 
  
  
  
  
    7. } 
      8.

    在上面的代碼段中，我們告訴瀏覽器僅在視口的高度等于或大于 500`像素時(shí)才標(biāo)題固定在頂部。

    使用 position: sticky 還需要指定 top 值，不然它無法正常工作。

     

    事例源碼：https://codepen.io/shadeed/pen/oQLYmg

    9.設(shè)置圖像的最大寬度

    當(dāng)添加圖像時(shí)，定義max-width: 100%，這樣當(dāng)屏幕很小時(shí)圖像就會(huì)改變大小。否則，瀏覽器將顯示一個(gè)水平滾動(dòng)條。

     
 
 
 
      
  
  
  
  
    1. img { 
      2. 
  
  
  
  
    2.     max-width: 100%; 
      3. 
  
  
  
  
    3. } 
      4.

    10. 使用 CSS grid 定義 main 和 aside 元素

    CSS grid 常規(guī)布局中 main 和 aside 部分，為了讓布局更加的完美，我們應(yīng)該讓aside 高度等于 main 高度，即使 aside 內(nèi)容為空。

    要解決這個(gè)問題，將aside元素對(duì)齊到其父元素的開始位置，這樣它的高度就不會(huì)擴(kuò)大。

     
 
 
 
      
  
  
  
  
    1. .wrapper { 
      2. 
  
  
  
  
    2.   display: grid; 
      3. 
  
  
  
  
    3.   grid-template-columns: repeat(12, minmax(0, 1fr)); 
      4. 
  
  
  
  
    4.   grid-gap: 20px; 
      5. 
  
  
  
  
    5. } 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. // align-self will tell the aside element to align itself with the start of its parent. 
      8. 
  
  
  
  
    8. aside { 
      9. 
  
  
  
  
    9.   grid-column: 1 / 4; 
      10. 
  
  
  
  
    10.   grid-row: 1; 
      11. 
  
  
  
  
    11.   align-self: start; 
      12. 
  
  
  
  
    12. } 
      13. 
  
  
  
  
    13.  
      14. 
  
  
  
  
    14. main { 
      15. 
  
  
  
  
    15.   grid-column: 4 / 13; 
      16. 
  
  
  
  
    16. } 
      17.

     

    事例源碼: https://codepen.io/shadeed/pen/yQJgXr

    11. 向 SVG 添加 fill

    有時(shí)，在使用 SVG 時(shí)，如果在 SVG 中以內(nèi)聯(lián)方式添加了fill屬性，填充就不會(huì)像預(yù)期的那樣工作。要解決這個(gè)問題，可以從SVG本身刪除fill屬性，也可以覆蓋fill: color。

    舉個(gè)例子：

     
 
 
 
      
  
  
  
  
    1. .some-icon { 
      2. 
  
  
  
  
    2.     fill: #137cbf; 
      3. 
  
  
  
  
    3. } 
      4.

    如果 SVG 具有內(nèi)聯(lián)fill，這將不起作用，應(yīng)該這樣寫:

     
 
 
 
      
  
  
  
  
    1. .some-icon path { 
      2. 
  
  
  
  
    2.     fill: #137cbf; 
      3. 
  
  
  
  
    3. } 
      4.

    12. 使用偽元素

    我經(jīng)常使用偽元素，它們?yōu)槲覀兲峁┝艘环N創(chuàng)建偽造元素的方法，主要用于裝飾目的，而無需將其添加到HTML中。

    使用它們時(shí)，我們經(jīng)常會(huì)忘記下面這些步驟：

    • 添加content: ""屬性
    • 設(shè)置 width 和 height 時(shí)沒有設(shè)置 display 導(dǎo)致 width 和 height無效

    在使用偽元素的時(shí)候，記得要添加 content 屬性，不然會(huì)無法顯示其內(nèi)容，別外也需要定義 display ，設(shè)置寬高才有效。

     

    13. 使用 display: inline-block 會(huì)出現(xiàn)怪異的空格

    為多個(gè)元素設(shè)置 display: inline-block或 display: inline，會(huì)在每個(gè)元素之間創(chuàng)建一個(gè)很小的空格。之所以會(huì)添加空格，是因?yàn)闉g覽器將元素解釋為單詞，因此在每個(gè)元素之間添加了一個(gè)字符空間。

    在下面的示例中，每個(gè)項(xiàng)目的右側(cè)都有8px的空間，但是由于使用display：inline-block導(dǎo)致增加了一個(gè)空格，最后結(jié)果是12px，這不是期望的結(jié)果。

     

    一個(gè)簡單的修復(fù)方法是在父元素上設(shè)置font-size: 0。

     
 
 
 
      
  
  
  
  
    1. ul { 
      2. 
  
  
  
  
    2.     font-size: 0; 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. li { 
      6. 
  
  
  
  
    6.     font-size: 16px; 
      7. 
  
  
  
  
    7. } 
      8.

     

    事例源碼：https://codepen.io/shadeed/pen/qQYPxV

    14. 為 input 元素配置 label 記得加上 for="ID"

    在處理表單元素時(shí)，可以為label元素分配一個(gè)id，這將增加表單的可訪問性，當(dāng)label 元素被點(diǎn)擊時(shí)，對(duì)應(yīng)的 input 也會(huì)獲取焦點(diǎn)。

     
 
 
 
      
  
  
  
  
    1. Email address: 
      2. 
  
  
  
  
    2.  
      3.

     

     

    15. 字體與交互式HTML元素不兼容

    當(dāng)為整個(gè)文檔設(shè)置字體時(shí)，它們不會(huì)應(yīng)用于input、button、select和textarea等元素。它們?cè)谀J(rèn)情況下不會(huì)繼承，因?yàn)闉g覽器將默認(rèn)系統(tǒng)字體應(yīng)用于它們。

    要修復(fù)此問題，需要我們手動(dòng)分配字體屬性：

     
 
 
 
      
  
  
  
  
    1. input, button, select, textarea { 
      2. 
  
  
  
  
    2.   font-family: your-awesome-font-name; 
      3. 
  
  
  
  
    3. } 
      4.

    16. 水平滾動(dòng)條

    由于元素的寬度，有些元素會(huì)導(dǎo)致出現(xiàn)水平滾動(dòng)條。

    找到這個(gè)問題的原因最簡單的方法就是使用 「CSS outline」。Addy Osmani 分享了一個(gè)非常方便的腳本，可以添加到瀏覽器控制臺(tái)，列出頁面上的每個(gè)元素。

     
 
 
 
      
  
  
  
  
    1. [].forEach.call($$("*"), function(a) { 
      2. 
  
  
  
  
    2.   a.style.outline = 
      3. 
  
  
  
  
    3.     "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16); 
      4. 
  
  
  
  
    4. }); 
      5.

     

    17. 壓縮或拉伸圖像

    在CSS中調(diào)整圖像大小時(shí)，如果寬高比與圖像的寬度和高度不一致，則可能會(huì)對(duì)其進(jìn)行壓縮或拉伸。

    解決方法很簡單:使用CSS object-fit，它的功能類似于ackground-size: cover用于背景圖像。

     
 
 
 
      
  
  
  
  
    1. img { 
      2. 
  
  
  
  
    2.     object-fit: cover; 
      3. 
  
  
  
  
    3. } 
      4.

     

    使用object-fit并不是在所有情況下都適用。有些圖片需要在沒有裁剪或調(diào)整大小的情況下顯示，有些平臺(tái)會(huì)強(qiáng)制用戶上傳或裁剪一個(gè)定義大小的圖片。例如，Dribbble接受以800 * 600像素上傳的縮略圖。

    18. 為 input 添加正確的 type

    為 input 添加正確的 type，會(huì)增強(qiáng)移動(dòng)瀏覽器中的用戶體驗(yàn)，并使其更易于用戶訪問。

    假設(shè)有如下的 HTML 代碼：

      
 
 
 
      
   
  
  
  
    1.  
      2. 
   
  
  
  
    2.   
       
      3. 
   
  
  
  
    3.     Full name 
      4. 
   
  
  
  
    4.      
      5. 
   
  
  
  
    5.   
       
      6. 
   
  
  
  
    6.   
       
      7. 
   
  
  
  
    7.     Email 
      8. 
   
  
  
  
    8.      
      9. 
   
  
  
  
    9.   
       
      10. 
   
  
  
  
    10.   
       
      11. 
   
  
  
  
    11.     Phone 
      12. 
   
  
  
  
    12.      
      13. 
   
  
  
  
    13.   
       
      14. 
   
  
  
  
    14.  
      15.

     

    下面是每個(gè) input 元素在移動(dòng)端輸入的樣子。

     

    19. RTL 布局的電話號(hào)

    在從右到左的布局中添加電話號(hào)碼(如+ 972-123555777)時(shí)，加號(hào)將定位在電話號(hào)碼的末尾。要解決這個(gè)問題，重新分配電話號(hào)碼的方向即可。

     
 
 
 
      
  
  
  
  
    1. p { 
      2. 
  
  
  
  
    2.     direction: ltr; 
      3. 
  
  
  
  
    3. } 
      4.

     

    總結(jié)

    里提到的所有問題都是我在前端開發(fā)工作中遇到的最常見的問題，希望能對(duì)你們有些幫助。

    作者：Chidume Nnamdi 譯者：前端小智 來源：smashingmagazine

    本文轉(zhuǎn)載自微信公眾號(hào)「 大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系 大遷世界公眾號(hào)。


    分享名稱：3年開發(fā)中遇到的CSS問題及解決方案，有大佬幫他總結(jié)好了！
    分享鏈接：http://www.5511xx.com/article/cdeepci.html