日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

新聞中心

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

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

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

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

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

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

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

2.Overflow: scroll Vs auto

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

  

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

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

3.添加 flex-wrap

對包含多個子元素使用 display: flex，如果元素過多，所有子元素會被壓縮，如下所示：

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

    • 面的例子在大屏幕上非常有用。在移動設備上，瀏覽器會顯示一個水平滾動條。

    解決方法就是使用 flex-wrap: wrap，這樣當水平空間不夠時，瀏覽器會幫我們自動換行。

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

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

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

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

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

    5. 長單詞和鏈接

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

    解決方法：

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

    6.透明漸變

    當漸變是以 transparent 開始或者結束的時候，在Safari中看起來會有點黑。這是因為Safari不能識別關鍵字transparent，這里可以通過rgba(0,0,0,0)來解決該問題。請注意下面的截圖：

    出問題的代碼:

     
 
 
 
      
  
  
  
  
    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.關于CSS網(wǎng)格中auto-fit和auto-fill之間的差異的誤解

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

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

    簡而言之，auto-fill將在不擴展列寬的情況下對列進行排列，而auto-fit只會在列為空的情況下將列折疊到零寬度。

    8. 當視口不夠高時將元素固定在屏幕頂部

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

     
 
 
 
      
  
  
  
  
    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`像素時才標題固定在頂部。

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

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

    9.設置圖像的最大寬度

    當添加圖像時，定義max-width: 100%，這樣當屏幕很小時圖像就會改變大小。否則，瀏覽器將顯示一個水平滾動條。

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

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

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

    要解決這個問題，將aside元素對齊到其父元素的開始位置，這樣它的高度就不會擴大。

     
 
 
 
      
  
  
  
  
    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

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

    舉個例子：

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

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

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

    12. 使用偽元素

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

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

    • 添加content: ""屬性
    • 設置 width 和 height 時沒有設置 display 導致 width 和 height無效

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

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

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

    在下面的示例中，每個項目的右側都有8px的空間，但是由于使用display：inline-block導致增加了一個空格，最后結果是12px，這不是期望的結果。

    一個簡單的修復方法是在父元素上設置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"

    在處理表單元素時，可以為label元素分配一個id，這將增加表單的可訪問性，當label 元素被點擊時，對應的 input 也會獲取焦點。

     
 
 
 
      
  
  
  
  
    1. Email address: 
      2. 
  
  
  
  
    2.  
      3.

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

    當為整個文檔設置字體時，它們不會應用于input、button、select和textarea等元素。它們在默認情況下不會繼承，因為瀏覽器將默認系統(tǒng)字體應用于它們。

    要修復此問題，需要我們手動分配字體屬性：

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

    16. 水平滾動條

    由于元素的寬度，有些元素會導致出現(xiàn)水平滾動條。

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

     
 
 
 
      
  
  
  
  
    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)整圖像大小時，如果寬高比與圖像的寬度和高度不一致，則可能會對其進行壓縮或拉伸。

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

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

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

    18. 為 input 添加正確的 type

    為 input 添加正確的 type，會增強移動瀏覽器中的用戶體驗，并使其更易于用戶訪問。

    假設有如下的 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.

    下面是每個 input 元素在移動端輸入的樣子。

    19. RTL 布局的電話號

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

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

    總結

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


    新聞標題：在這3年開發(fā)中遇到的CSS問題及解決方案，有大佬幫他總結好了
    當前路徑：http://www.dlmjj.cn/article/cdohoci.html