怎么写网络小说,玄幻小说排行榜完本,好看的历史书籍推荐

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

在這3年開發(fā)中遇到的CSS問題及解決方案，有大佬幫他總結(jié)好了

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

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

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

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

 
 
 
 
  
  
  
  button { 
  
  
  
    appearance: none; 
  
  
  
    background: transparent; 
  
  
  
  }

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

2.Overflow: scroll Vs auto

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

 
 
 
 
  
  
  
  .element { 
  
  
  
      height: 300px; 
  
  
  
      overflow-y: auto; 
  
  
  
  }

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

3.添加 flex-wrap

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

.wrapper {

display: flex;

}

.item {

flex: 0 0 120px;

height: 100px;

}

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

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

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

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

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

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

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

5. 長單詞和鏈接

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

解決方法：

 
 
 
 
  
  
  
  .article-content p { 
  
  
  
      word-break: break-all; 
  
  
  
  }

6.透明漸變

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

出問題的代碼:

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

解決方式:

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

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

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

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

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

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

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

 
 
 
 
  
  
  
  @media (min-height: 500px) { 
  
  
  
      .site-header { 
  
  
  
          position: sticky; 
  
  
  
          top: 0; 
  
  
  
          /*other styles*/ 
  
  
  
      } 
  
  
  
  }

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

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

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

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

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

 
 
 
 
  
  
  
  img { 
  
  
  
      max-width: 100%; 
  
  
  
  }

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

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

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

 
 
 
 
  
  
  
  .wrapper { 
  
  
  
    display: grid; 
  
  
  
    grid-template-columns: repeat(12, minmax(0, 1fr)); 
  
  
  
    grid-gap: 20px; 
  
  
  
  } 
  
  
  
   
  
  
  
  // align-self will tell the aside element to align itself with the start of its parent. 
  
  
  
  aside { 
  
  
  
    grid-column: 1 / 4; 
  
  
  
    grid-row: 1; 
  
  
  
    align-self: start; 
  
  
  
  } 
  
  
  
   
  
  
  
  main { 
  
  
  
    grid-column: 4 / 13; 
  
  
  
  }

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

11. 向 SVG 添加 fill

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

舉個例子：

 
 
 
 
  
  
  
  .some-icon { 
  
  
  
      fill: #137cbf; 
  
  
  
  }

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

 
 
 
 
  
  
  
  .some-icon path { 
  
  
  
      fill: #137cbf; 
  
  
  
  }

12. 使用偽元素

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

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

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

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

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

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

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

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

 
 
 
 
  
  
  
  ul { 
  
  
  
      font-size: 0; 
  
  
  
  } 
  
  
  
   
  
  
  
  li { 
  
  
  
      font-size: 16px; 
  
  
  
  }

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

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

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

 
 
 
 
  
  
  
  Email address:

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

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

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

 
 
 
 
  
  
  
  input, button, select, textarea { 
  
  
  
    font-family: your-awesome-font-name; 
  
  
  
  }

16. 水平滾動條

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

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

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

17. 壓縮或拉伸圖像

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

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

 
 
 
 
  
  
  
  img { 
  
  
  
      object-fit: cover; 
  
  
  
  }

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

18. 為 input 添加正確的 type

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

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

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

19. RTL 布局的電話號

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

 
 
 
 
  
  
  
  p { 
  
  
  
  direction: ltr; 
  
  
  
  }

總結(jié)

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

標(biāo)題名稱：在這3年開發(fā)中遇到的CSS問題及解決方案，有大佬幫他總結(jié)好了
標(biāo)題URL：http://fisionsoft.com.cn/article/cdohoci.html