《CSS世界》中提到的實用技巧

時間  2019-11-06
標籤 CSS世界 提到 實用 技巧 欄目 CSS 简体版
原文   原文鏈接

如下技巧的具體原理和解釋請支持張老師的《CSS世界》，在這裏不作展開。css

一部分沒錄入的技巧緣由是部分屬性將被標準廢棄，如：clip。還有一部分是由於我的以爲兼容性很差，並且CSS3的一些特性能夠彌補，好比text-align:justify;，徹底能夠用flex佈局實現。html

應網友要求，加入部分配圖，配圖原則是由於防止代碼量大而去掉的無用屬性（如背景顏色）形成的一眼望去好像是沒效果的技巧會加上一些配圖，若是你們測試過程當中遇到沒有效果的現象，建議經過審查元素去查看如下元素的幾何屬性。還有一些是複製粘貼就能夠獲得的效果我就不截圖了（想到可能讀者懶的問題，我把格式寫成下面的主要目的是直接複製到body中就能夠用了），由於篇幅太太太太太長了。git

本文首發自我的博客github

  1. 清除浮動

    主要用於子元素浮動（float）以後，父元素沒法撐起高度和寬度。web

    <!-- html -->
<div class="clear">
    <img src="demo.gif">
</div>

<!-- CSS -->
<style> img { float: left; } /* 清除浮動 */ .clear::after { content: ""; display: block; clear: both; } </style>
複製代碼

    沒有清除浮動的效果

    清除浮動後的效果

  2. 文字少時居中，多時靠左

    由於div嵌套着p，因此p的尺寸並不會超過div。可是要注意，當p的內容爲英文單詞組成的時候，若是單詞過長，好比「pppppppppppppppppppppppppppp」這種甚至更長，會被視爲一個單位而形成超出div的尺寸。瀏覽器

    若是你想要英文字符也有中文字符的效果的話，在p使用「word-break:break-all」。佈局

    <!-- html -->
<div class="box">
    <p class="content"></p>
</div>

<!-- CSS -->
<style> .box { text-align: center; } .content { display: inline-block; text-align: left; } </style>
複製代碼

    字數少時

    一個英文單位

    字數多的效果

  3. 凹凸man

    目的在於製造一個凹或者凸的形狀，利用了」2「中英文單詞不換行的特性測試

    <!-- html -->
<div class='ao'></div>

<!-- CSS -->
<style> .ao { display: inline-block; width: 0; } .ao::before { content: "love 你 love"; outline: 2px solid #000; color: #fff; } </style>
複製代碼
  4. 讓padding、border不影響盒模型的大小

    相信這點大部分人都知道，可是有一些奇怪的行爲，好比說width<content+padding會怎樣？事實上當padding+border>width時，元素的渲染大小（Chrome下）爲padding+border；而padding+border<width時，會將剩餘空間分配給content。字體

    <!-- html -->
<div></div>

<!-- CSS -->
<style> div { box-sizing: border-box; } </style>
複製代碼

    padding+border>width的效果

    padding+border<width的效果

  5. height：100%佔屏效果
    <!-- html -->
<div></div>

<!-- CSS方法一 -->
<style> html,body { height: 100%; } div { height: 100% } </style>
<!-- CSS方法二 -->
<style> div { position: absolute; height: 100%; } </style>
複製代碼

    效果

  6. 任意高度元素展開

    缺點是，若是高度太大會形成展開過快和收回延遲，因此這個足夠大的值儘可能適當。flex

    <!-- html -->
<div></div>

<!-- CSS -->
<style> div { max-height: 0; overflow: hidden; transition: max-height .25s; } div.active { max-height: 666px; /* 須要足夠大的值 */ } </style>
複製代碼

    展開效果

  7. 優雅的圖片未加載或加載失敗效果

    須要注意的是，圖片顯示完畢後，img會成爲「替換元素」，而替換元素是沒法設置僞元素的，由於content內容被圖片替換掉了；還須要注意attr裏面的變量不能加雙引號。

    <!-- html -->
<div>
    <img src="demo.gif" alt="lululu">
</div>

<!-- CSS -->
<style> div { width: 100px; height: 100px; overflow: hidden; } img { display: inline-block; width: 100%; height: 100%; position: relative; } img::after { /* 生成 alt 信息 */ content: attr(alt); /* 尺寸和定位 */ position: absolute; left: 0;bottom: 0;right: 0; /* 顏色 */ background-color: rgba(0,0,0,.5); /* alt 信息隱藏 */ transform: translateY(100%); /* 過渡動畫效果 */ transition: transform .2s; } img:hover::after { /* alt 信息顯示 */ transform: translateY(0); } </style>
複製代碼
  8. CSS的懸浮圖片替換效果

    須要注意的是，若是右鍵保存圖片，保存的是src內的圖片，而不是替換以後的。

    <!-- html -->
<img src="demo.gif">

<!-- CSS -->
<style> img:hover { content: url(amazing.gif); } </style>
複製代碼
  9. 利於SEO的「替換元素」標題logo

    用h1的緣由主要是由於SEO，語義化的問題。

    <!-- html -->
<h1>Weismann's blog</h1>

<!-- CSS -->
<style> h1 { content: url(logo.gif); } </style>
複製代碼
  10. 高兼容、自動等寬、底部對齊的柱狀圖

    須要注意的是，第一個i不能換行，換行後會產生後移的結果。

    <!-- html -->
<div class="box"><i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
</div>

<!-- CSS -->
<style> .box { width: 256px; height: 256px; text-align: justify; } .box:before { content: ""; display: inline-block; height: 100%; } .box:after { content: ""; display: inline-block; width: 100%; } .bar { display: inline-block; width: 20px; /* height自定 */ } </style>
複製代碼

    增長背景顏色後的效果

  11. 高兼容性的加載效果

    在IE6-IE9下是...，其它都是動態的；使用dot的目的是語義化和低版本瀏覽器的兼容。

    <!-- html -->
正在加載中<dot>...</dot>

<!-- CSS -->
    <style> dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before { display: block; content: '...\A..\A.'; white-space: pre-wrap; animation: dot 3s infinite step-start both; } @keyframes dot { 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } } </style>
複製代碼
  12. 增大點擊區域

    第一種主要利用了內聯元素的padding只會影響外觀和不影響佈局的特色；第二種針對其餘屬性會改變背景圖定位的一種方式。

    <!-- html -->
<a href="">demo</a>

<!-- CSS1 -->
<style> a { padding: 20px 0; } </style>
<!-- CSS2 -->
<style> a { border: 11px solid transparent; } </style>
複製代碼

    盒子模型1

    盒子模型2

  13. 不使用僞元素的「三道槓」和」圓點「效果
    <!-- html -->
<i class="icon"></i>

<!-- CSS三道槓 -->
<style> .icon { display: inline-block; width: 140px; height: 10px; padding: 35px 0; border-top: 10px solid; border-bottom: 10px solid; background-color: currentColor; background-clip: content-box; } </style>
<!-- CSS三道槓2 -->
<style> .icon { width: 120px; height: 20px; border-top: 60px double; border-bottom: 20px solid; } </style>
<!-- CSS圓點 -->
<style> .icon { display: inline-block; width: 100px; height: 100px; padding: 10px; border: 10px solid; border-radius: 50%; background-color: currentColor; background-clip: content-box; } </style>
複製代碼
  14. 導航欄去除右邊多餘尺寸

    利用margin來改變尺寸，須要注意，改變尺寸的元素水平方向的尺寸不能是肯定的。

    <!-- html -->
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<!-- CSS -->
<style> div { width: 380px; } ul { margin-right: -20px; } ul > li { float: left; width: 100px; margin-right: 20px; } </style>
複製代碼

    改變後的尺寸效果

  15. 正確的滾動底部留白方式

    若是使用padding留白，在Firefox和IE不會顯示。

    <!-- html -->
<div class="box">
	<img src="demo.gif">
</div>

<!-- CSS -->
    <style> .box { height:200px; overflow:auto; } .box>img { margin: 50px 0; } </style>
複製代碼

    效果

  16. 高兼容的多欄等高

    注意container高度不能是肯定值，缺點是若是在內部使用錨點定位會出現問題。

    <!-- html -->
<div class="container">
    <div id="colLeft" class="column-left">
        <h4>正方觀點</h4>
        <p>觀點1</p>
        <p>觀點1</p>
    </div>
    <div id="colRight" class="column-right">
        <h4>反方觀點</h4>
        <p>觀點1</p>
    </div>
</div>

<!-- CSS -->
<style> .container { overflow: hidden; } .column-left, .column-right { margin-bottom: -9999px; padding-bottom: 9999px; width: 50%; float: left; } .column-left { background-color: #34538b; } .column-right { background-color: #cd0000; } </style>
複製代碼
  17. 正確的塊級元素右對齊

    auto值對於margin來說是佔用剩餘的空間。

    <!-- html -->
<div>demo</div>

<!-- CSS -->
<style> div { width: 100px; margin-left: auto; } </style>
複製代碼
  18. 圖片上傳增長框

    此技巧主要說明border的顏色默認是繼承自color的

    <!-- html -->
<div class="add"></div>

<!-- CSS -->
<style> .add { display: inline-block; width: 76px; height: 76px; color: #ccc; border: 2px dashed; text-indent: -12em; transition: color .25s; position: relative; overflow: hidden; } .add:hover { color: #34538b; } .add::before, .add::after { content: ''; position: absolute; top: 50%; left: 50%; } .add::before { width: 20px; border-top: 4px solid; margin: -2px 0 0 -10px; } .add::after { height: 20px; border-left: 4px solid; margin: -10px 0 0 -2px; } </style>
複製代碼
  19. 不影響背景圖片位置設置邊距

    和增長點擊區域第二種方式同樣

    <!-- html -->
<div class="box"></div>

<!-- CSS -->
<style> .box { display: inline-block; width: 100px; height: 100px; border-right: 50px solid transparent; background-position: 100% 50%; } </style>
複製代碼
  20. border製做梯形，各類三角形
    <!-- html -->
<div></div>

<!-- CSS梯形 -->
<style> div { width: 10px; height: 10px; border: 10px solid; border-color: #f30 transparent transparent; } </style>
<!-- CSS三角 -->
<style> div { width: 0; border-width: 10px 20px; border-style: solid; border-color: #f30 transparent transparent; } </style>
<!-- CSS直角三角 -->
<style> div { width: 0; border-width: 10px 20px; border-style: solid; border-color: #f30 #f30 transparent transparent; } </style>
複製代碼
  21. 高兼容雙欄，一邊等寬一邊自適應，等高佈局

    缺點是border不支持百分比，最多2-3欄。

    <!-- html -->
<div class="box">
    <nav>
        <div>123</div>
        <div>123</div>
        <div>123</div>
    </nav>
    <section>
        <div>1234</div>
    </section>
</div>

<!-- CSS -->
<style> .box { border-left: 150px solid #333; background-color: #f0f3f9; } .box::after { content: ""; display: block; clear: both; } .box > nav { width: 150px; margin-left: -150px; float: left; } .box > section { overflow: hidden; } </style>
複製代碼
  22. 內聯元素「近似」垂直居中

    至於爲何說「近似」，一句話說不清楚，請看開頭

    <!-- CSS -->
<style> span { line-height: 24px; } </style>
複製代碼
  23. 多行內容「近似」垂直居中
    <!-- html -->
<div class="box">
    <div class="content">基於行高實現的...</div>
</div> 

<!-- CSS -->
<style> .box { width: 120px; line-height: 120px; background-color: #f0f3f9; } .content { display: inline-block; line-height: 20px; margin: 0 20px; vertical-align: middle; } </style>
複製代碼
  24. 容器內圖片的垂直方向間隙問題

    產生的問題和「幽靈空白節點」和x-height有關，你能夠嘗試在img前加入x字符觀察一下。

    <!-- html -->
<div class="box">
	<img src="demo.gif">
</div>

<!-- CSS -->
<style> .box { width: 280px; outline: 1px solid #aaa; text-align: center; /* 解決方案1 */ font-size: 0; /* 解決方案2 */ line-leight: 0; } .box > img { height: 96px; /* 解決方案3 */ display: block; } </style>
複製代碼

    產生間隙的緣由效果

  25. 圖標文字對齊

    特色是文字大小的改變不會影響對齊。ex表明的是x-height的高度，根據x字形的不一樣（如font-family）而不一樣。

    <!-- 方式一 -->
<!-- html -->
<div class="box">
    <p>
    	<i class="icon icon-demo"></i>拉拉
    </p>
</div>

<!-- CSS -->
<style> .box { /* 根據圖片大小變化 */ line-height: 20px; } p { font-size: 40px; } .icon { display: inline-block; width: 20px; height: 20px; white-space: nowrap; letter-spacing: -1em; text-indent: -999em; } .icon::before { /* 低版本IE7兼容 */ content: '\3000'; } .icon-demo { background: url(demo.png) no-repeat center; } </style>

<!-- 方式二 -->
<!-- html -->
<p>文字 <img src="delete.png"></p>

<!-- CSS -->
<style> p { font-size: 14px; } p > img { width: 16px; height: 16px; vertical-align: .6ex; position: relative; top: 8px; } </style>
複製代碼
  26. 永遠居中的彈框

    特色是內容和瀏覽器尺寸變化都是自動變換大小和位置，能夠經過僞元素的height控制上下位置。

    <!-- html -->
<div class="container">
    <div class="dialog">demo</dialog>
</div>

<!-- CSS -->
<style> .container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container::after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .dialog { display: inline-block; vertical-align: middle; text-align: left; font-size: 14px; white-space: normal; /* 彈框樣式 */ padding: 10px 14px; border: 1px solid #000; border-radius: 4px; background: #fff; } </style>
複製代碼
  27. 文字環繞圖片

    float的真正用途。

    <!-- html -->
<div class="box">
    <div>
    	<img src="demo.gif">
    </div>
    <p>demo，demo，demo，demo，demo，demo，demo</p>
</div>

<!-- CSS -->
<style> .box { width: 100px; } img { float: left; width: 40px; height: 40px; } </style>
複製代碼
  28. 利用overflow:hidden自定義滾動條

    事實上overflow:hidden是能夠滾動的，能夠經過錨點、focus、scrollTop滾動。滾動條的實現請自行發揮。

    滾動效果

  29. 經過label實現的選項卡效果

    與錨點不一樣的是不會觸發由內到外（多層滾動形成的相似於事件冒泡的效果）的頁面跳動（元素上邊與窗體上邊對齊），還支持Tab選項的效果；缺點是須要JS支持選中效果。

    <!-- html -->
<div class="box">
    <div class="list"><input id="one">1</div>
    <div class="list"><input id="two">2</div>
    <div class="list"><input id="three">3</div>
    <div class="list"><input id="four">4</div>
</div>
<div class="link">
    <label class="click" for="one">1</label>
    <label class="click" for="two">2</label>
    <label class="click" for="three">3</label>
    <label class="click" for="four">4</label>
</div> 

<!-- CSS -->
<style> .box { height: 10em; border: 1px solid #ddd; overflow: hidden; } .list { height: 100%; background: #ddd; position: relative; } .list > input { position: absolute; top:0; height: 100%; width: 0; border:0; padding: 0; margin: 0; } </style>
複製代碼
  30. 「包含塊」的絕對定位元素「一柱擎天」問題
    <!-- html -->
<div class="father">
    <div class="son">拉拉</div>
</div>

<!-- CSS -->
<style> .father { position: relative; width: 20px; height: 20px; } .son { position: absolute; /* 解決方案 */ white-space: nowrap; } </style>
複製代碼
  31. 「無依賴絕對定位」的表單驗證應用

    在一個元素上若是單用（父元素的position屬性均是默認）「position:absolute」，事實上元素將原地不動，最終會產生BFC。

    <!-- html -->
<div class="group">
    <label class="label"><span class="star">*</span>郵箱</label>
    <div class="cell">
        <input type="email" class="input">
        <span class="remark">郵箱格式不許確（示意）</span>
    </div>
</div>
<div class="group">
    ...
</div>

<!-- CSS -->
    <style> .group { width: 300px; } .label { float: left; } .remark { position: absolute; } </style>
複製代碼
  32. 主體頁面側邊欄

    利用text-align和fixed的組合；height置0和overflow隱藏目的是爲了避免影響主體的體驗，而之因此絕對定位元素沒有被隱藏的緣由是「若是overflow不是定位元素，同時絕對定位元素和overflow容器之間也沒有定位元素，則overflow沒法對絕對定位元素進行剪裁。」—《CSS世界》。

    <!-- html -->
<div class="alignright">
    <span class="follow"></span>
</div>

<!-- CSS -->
<style> .alignright { height: 0; text-align: right; overflow: hidden; background: blue; } .alignright:before { content: "\2002"; } .follow { position: fixed; bottom: 100px; z-index: 1; width: 10px; height: 10px; border: 1px solid #000; } </style>
複製代碼
  33. 不經過width和height設置窗體全佔用？

    利用top和bottom或left和right同時設置的時候會觸發流體特性的特色；與經過」top:0;left:0;width:100%;height:100%;「相比，在設置margin、border、padding的時候不會溢出到窗體的外面（就算你想到box-sizing，那margin呢？）；而之因此用span的緣由是想說明絕對定位會將元素的display置爲block。

    <!-- html -->
<span></span>

<!-- CSS -->
<style> span { position: absolute; top:0; left:0; right:0; bottom: 0; } </style>
複製代碼

    佔用效果

  34. margin:auto水平垂直居中
    <!-- html -->
<div></div>

<!-- CSS -->
<style> div { width: 300px; height: 200px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style>
複製代碼

    佔用效果

  35. 紙張卷邊陰影

    主要利用「position: relative;z-index: 0;」建立層疊上下文與z-index的負值將陰影置於「contaniner」和「page」之間。

    你能夠嘗試將關鍵CSS去掉查看效果。

    <!-- html -->
<div class="container">
    <div class="page">
        <h4>demo</h4>
        <p>demo</p>
    </div>
</div>

<!-- CSS -->
<style> .container { background-color: #666; height: 1000px; /* 建立層疊上下文，關鍵 */ position: relative; z-index: 0; } .page { width: 600px; background-color: #f4f39e; background: linear-gradient(to bottom, #f4f39e, #f5da41 60%, #fe6); box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2); text-shadow: 0 1px 0 #f6ef97; position: relative; left: 200px; top: 200px; } .page:before { transform: skew(-15deg) rotate(-5deg); transform-origin: left bottom; left: 0; } .page:after { transform: skew(15deg) rotate(5deg); transform-origin: right bottom; right: 0; } /* 邊角卷邊陰影 */ .page:before, .page:after { width: 90%; height: 20%; content: ""; box-shadow: 0 8px 16px rgba(0, 0, 0, .3); position: absolute; bottom: 0; z-index: -1; } </style>
複製代碼
  36. 隱藏文字

    說這個主要是爲了說明，Chrome瀏覽器若是字體設置12px如下的大小（新版本已經不限制了），會被自動處理成12px，可是有一個值除外，0。

    <!-- CSS -->
<style> p { font-size: 0; } </style>
複製代碼
  37. 解決text-decoration下劃線和文本重疊

    由於是內聯元素，因此徹底不用擔憂會影響元素高度的問題。

    <!-- CSS -->
<style> a { text-decoration: none; border-bottom: 1px solid; padding-bottom: 5px; } </style>
複製代碼
  38. 自動將輸入的小寫字母轉換大寫
    <!-- CSS -->
<style> input { text-transform: uppercase; } </style>
複製代碼
  39. 價格場景下的首個符號選擇器

    特色是可讓html結構顯得乾淨

    <!-- html -->
<p class="price">¥399</p>

<!-- CSS -->
<style> .price:first-letter { ... } </style>
複製代碼
  40. 元素隱藏同時資源不加載

    後續可經過script.innerHTML訪問。

    <!-- html -->
<script type="text/html"> <img src="1.jpg"> </script> 
複製代碼

    請求的效果

  41. 頭像裁剪矩形鏤空效果

    主要利用outline。

    <!-- html -->
<div class="crop">
    <div id="cropArea" class="crop-area"></div>
    <img src="demo.gif">
</div>

<!-- CSS -->
<style> .crop { width: 200px; height: 200px; overflow: hidden; position: relative; } .crop > .crop-area { position: absolute; top:0; height: 0; width: 80px; height: 80px; outline: 200px solid rgba(0,0,0,.5); cursor: move; } </style>
複製代碼
  42. 自定義光標

    須要注意IE只支持cur文件。

    <!-- CSS -->
<style> .cursor-demo { cursor: url(demo.cur); } </style>
複製代碼
  43. 修改水平流到垂直流

    兼容到IE7；此應用涉及較多東西，全部水平流的特性均可以應用到垂直流中（好比水平居中變成了垂直居中）。

    <!-- CSS -->
<style> .verticle-mode{ writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; } </style>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程