CSS小技巧收藏

FWHeart 發布于2019-08-30 12:44 / 3156人閱讀

摘要：居中對齊很多時候我們需要把一個元素在其父級容器里水平垂直居中對齊。這是一個非常不錯的習慣，但常常只有字體粗細大小的不同，在這里我們為每個章節加上這樣的標注。以下代碼在容器內有效。

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

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

鏈接樣式

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

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

居中對齊

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

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;
}

選擇某范圍內的子元素

選擇5-10的子元素

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

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

最佳適應圖片

這段代碼非常適用于給文章列表加縮略圖的時候用，能最好的避免圖片比例不協調的問題，統一排版。你可以隨意更改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

自動分章節

文章正文里我們經常采用

這樣的標簽來分章，分節。這是一個非常不錯的習慣，但常常只有字體粗細大小的不同，在這里我們為每個章節加上1,2,3這樣的標注。以下代碼在.document容器內有效。(其他需要計數的模塊也可以用這樣的方法)

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

自適應視頻播放器

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

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代碼：

GPU云服務器云服務器 css技巧小技巧小技巧全集 PowerShell小技巧

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

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

css相關 - 收藏集 - 掘金

摘要：在正式前端一些小細節前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進行編程個技巧前端掘金并不總是容易處理。 CSS3 實現文字流光漸變動畫 - 前端 - 掘金來自百度前端技術學院的實踐任務：有趣的鼠標懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現了一下，順便...

molyzzx 2019-08-29 12:38 評論0 收藏0
優秀博文收藏（不定期更新）

摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永我的書簽我的書簽（謹慎導入，小心覆蓋）工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 評論0 收藏0
優秀博文收藏（不定期更新）

摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永我的書簽我的書簽（謹慎導入，小心覆蓋）工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 評論0 收藏0
學習實踐 - 收藏集 - 掘金

摘要：官網地址聊天機器人插件開發實例教程一創建插件在系統技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。我會簡單基于的簡潔視頻播放器組件前端掘金使用和實現購物車場景前端掘金本文是上篇文章的序章，一直想有機會再次實踐下。 2道面試題：輸入URL按回車&HTTP2 - 掘金通過幾輪面試，我發現真正那種問答的技術面，寫一堆項目真不如去刷技術文章作用大，因此刷了一段時間的博客和掘金，整理下曾經被...

mikyou 2019-08-29 12:50 評論0 收藏0