你應該知道的關于CSS的一些奇淫巧技

Paul_King 發布于2019-08-30 12:54 / 2443人閱讀

摘要：本文分享關于應用中的一些小技巧，如果有不對的地方，歡迎指出建議和意見。項目地址，歡迎和，如果有更多的，也歡迎提交。

本文分享關于CSS應用中的一些小技巧，如果有不對的地方，歡迎指出建議和意見。

Github項目地址：Great-CSS-Tips-You-Should-Know，歡迎fork和star，如果有更多的tips，也歡迎提交PR。

使用CSS來垂直居中一切元素

其實很簡單, 使用下面的代碼就讓你的所有元素都垂直居中

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
}

如果你的需求不只是垂直居中的話--比如你想要上下左右都居中, 那么, 可以看看我的另外一個項目: css-center-complete

使用CSS來制作箭頭

如果使用CSS來畫我們常用的箭頭呢? 就像下面這樣:

/* 向下的箭頭 */
.caret {
    display: inline-block;
    width: 0;
    height: 0;

    vertical-align: middle;
    
    /* 如果需要向上的箭頭的話, 就把border-top改為border-bottom */
    border-top: 20px solid;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}

使用CSS來讓footer永遠位于屏幕底部, 并隨內容而拉伸

這是個困擾我很久的問題, 不過最終, 我還是找到了一個比較好的解決方案

假設你的html是下面這樣寫的:

我們要的效果是footer一直位于底部, 同時, 當內容的高度增加時, 他也會被內容給擠下去. 所以, 我們需要像下面這樣定義CSS:

html {
    height: 100%;
}

body {
    position: relative;
    min-height: 100%;

    &:after {
        display: block;
        content: "";
        height: 200px; /* 此處的高度必須和footer的高度相同 */
    }
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
}

使用CSS避免圖片超出包含塊

我們想要我們的大圖放在我們的文章或者其他地方, 所以, 要避免這些圖片超出內容, 怎么做呢?

img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

使用CSS制作帶有分割線的導航

制作一個帶有分割線的橫向導航, 可以使用CSS的:not和:last-child來實現

.nav li:not(:last-child) {
    border-right: 1px solid #cccccc;
}

使用CSS來通過動態計算設置元素的高度

不得不說, CSS3的calc屬性真的很棒, 我們可以使用這個屬性來動態計算一個元素的高度

當你使用calc來計算元素的高度的時候你要注意, 計算的高度是依賴于父級元素的高度的, 所以, 你需要先設置父級元素的高度

.container {
    height: 100vh;  /* 使用vh這個單位來設置高度為100% */
}

.content {
  width: 100%;  
  height: calc(100% - 150px);
  background-color: #aaaaaa;
}

使用CSS設置全屏圖片

Set a full page image is so common for the website nowadays.
現在的很多網站都采用了全屏的圖片, 那么, 這是怎么實現的呢? 有兩種方法:

1. 設置全屏背景圖

html {
    background: url("the/path/to/your/image") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale");
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";
}

2. 使用img標簽的全屏圖片

要使用img標簽的話, 最好是將它放在一個div中

.container {
    positiong: relative;
    width: 100%;
    max-height: 500px;
    background-color: red;
    
    /* 避免編邊距折疊 */
    overflow: hidden;
}

.container:after {
    content: "";
    display: block;
    margin-top: 50%; /* 或者設置padding-top: 50%; */
}

你應該能看到, 圖片沒有加載出來的時候, 內容也是有高度的.

使用CSS來制作圖片加載失敗的效果

在圖片加載失敗的時候, 使用CSS來讓加載失敗的圖片顯得更美觀更友好

img:before {  
  content: "We"re sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

云服務器 GPU云服務器你應該知道你知道數據分析知道你百度一下你就知道了

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115156.html

CSS相關面試題——三欄等高布局

摘要：題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度，中間欄寬度自適應。代碼如下效果如下所示乍一看實現了三列布局，但是題目要求等高，這個可就麻煩了。題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度200px，中間欄寬度自適應。要求三欄的高度隨最高的一欄展示解題 step1 常規拿到這個面試題，首先想到的是三個盒子左浮動右浮動...

Taste 2019-08-02 16:08 評論0 收藏0
CSS相關面試題——三欄等高布局

摘要：題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度，中間欄寬度自適應。代碼如下效果如下所示乍一看實現了三列布局，但是題目要求等高，這個可就麻煩了。題目最近在面試中遇到過這樣一道面試題，讓寫出左中右，三欄布局，左欄右欄固定寬度200px，中間欄寬度自適應。要求三欄的高度隨最高的一欄展示解題 step1 常規拿到這個面試題，首先想到的是三個盒子左浮動右浮動...

fsmStudy 2019-08-30 15:56 評論0 收藏0
Flexbox 很棒，但有些情況不適用

摘要：其設計初衷并不是完備的網格系統。所以禁止將其作為一個完整的網格系統使用。但貓有四條腿，而人類只有兩條。總而言之，還是很棒的真的很有用。對大部分的人來說（如果你寫過CSS），Flexbox 可以說是完美，但它是否適合所有場景呢？簡而言之，我會給出幾種可用的場景，需要你重新思考 Flexbox 模型的使用。順便說一句，本人是 Flexbox 的忠實粉絲，曾寫過一篇 Flexbox 詳...

wums 2019-08-29 18:38 評論0 收藏0
PDF、PPT、Excel、Word、視頻等格式文件在線預覽

摘要：最近項目中用到了文件在線預覽功能，文件類型大概有圖片視頻等等，總結梳理了一下，分享給大家。文件類型在線文檔推薦使用，簡單易用。而原生的的元素支持三種視頻格式，所以我們需要更強大支持更多視頻在線播放，第三方擴展庫。最近項目中用到了文件在線預覽功能，文件類型大概有圖片、視頻、PDF、PPT、Excel、Word 等等，總結梳理了一下，分享給大家。 PDF 文件類型 jquery.medi...

13651657101 2019-08-01 18:03 評論0 收藏0