CSS小技巧收藏

FWHeart 發(fā)布于2019-08-30 12:44 / 3150人閱讀

摘要：居中對齊很多時候我們需要把一個元素在其父級容器里水平垂直居中對齊。這是一個非常不錯的習(xí)慣，但常常只有字體粗細大小的不同，在這里我們?yōu)槊總€章節(jié)加上這樣的標注。以下代碼在容器內(nèi)有效。

最后更新于：2016-01-22 17:30

以下是我積累的一些常用的css代碼，會不斷更新，最新的代碼會顯示在最前面，同時我也會提供最新更新日期以便查閱。

鏈接樣式

a:link { color: red; }
a:visted { color: purple; }

通過:link給未訪問的鏈接設(shè)置樣式，通過:visted給已被點擊過的鏈接設(shè)置樣式。這樣能讓用戶區(qū)分他自己點擊過的鏈接。

居中對齊

很多時候我們需要把一個元素在其父級容器里水平、垂直居中對齊。以下我列出了常用的幾種方法：

1.在知道子元素寬度與高度的情況下進行居中，采用位置定位：absolute + margin

.parent {
    position: relative;
}
.child {
    position: absolute;
    width: 100px;
    height: 60px;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -50px;
}

2.在不知道子元素高與寬的情況下，采用位置定位：absolute + transform

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3.采用flexbox進行居中對齊

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

選擇某范圍內(nèi)的子元素

選擇5-10的子元素

ul li:nth-child(n+5):nth-child(-n+10) {
    background-color: red;
}

演示地址：http://codepen.io/moyu/pen/KVvzbX

最佳適應(yīng)圖片

這段代碼非常適用于給文章列表加縮略圖的時候用，能最好的避免圖片比例不協(xié)調(diào)的問題，統(tǒng)一排版。你可以隨意更改width與height來查看效果。

.thumbnail {
    width: 200px;
    height: 150px;
    background-image: url("https://s.yimg.com/uy/build/images/sohp/inspiration/sage3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

演示地址：http://codepen.io/moyu/pen/JGyKGQ

占滿全屏

.fullScreen {
    width: 100vw;
    height: 100vh;
}

演示地址：http://lab.liuxinyu.me/fullbg/index.html

自動分章節(jié)

文章正文里我們經(jīng)常采用

這樣的標簽來分章，分節(jié)。這是一個非常不錯的習(xí)慣，但常常只有字體粗細大小的不同，在這里我們?yōu)槊總€章節(jié)加上1,2,3這樣的標注。以下代碼在.document容器內(nèi)有效。(其他需要計數(shù)的模塊也可以用這樣的方法)

演示地址：http://codepen.io/moyu/pen/NxvrjX

自適應(yīng)視頻播放器

當在你自己的網(wǎng)站插入優(yōu)酷這樣的視頻播放器后你會發(fā)現(xiàn)它的高寬都是固定的，而且你在用手機瀏覽的時候視頻播放器還變形了，以下代碼自動讓播放器按16:9的比例顯示并自適應(yīng)各個設(shè)備。

CSS代碼：

.media-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.media-wrap iframe,
.media-wrap embed,
.media-wrap object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML代碼：