1 解決inline-block元素設置overflow:hidden屬性導致相鄰行內元素向下偏移

.wrap {display: inline-block;overflow: hiddenvertical-align: bottom }

2 超出部分顯示省略號

// 單行文本 .wrap {overflow:hidden;/*超出部分隱藏*/text-overflow:ellipsis;/*超出部分顯示省略號*/white-space:nowrap;/*規定段落中的文本不進行換行 */ } // 多行文本 .wrap {width: 100%;overflow: hidden;display: -webkit-box; //將對象作為彈性伸縮盒子模型顯示 *必須結合的屬性*-webkit-box-orient: vertical; //設置伸縮盒對象的子元素的排列方式 *必須結合的屬性*-webkit-line-clamp: 3; //用來限制在一個塊元素中顯示的文本的行數word-break: break-all; //讓瀏覽器實現在任意位置的換行 *break-all為允許在單詞內換行* }

3 css實現不換行、自動換行、強制換行

//不換行 .wrap {white-space:nowrap; } //自動換行 .wrap {word-wrap: break-word;word-break: normal; } //強制換行 .wrap {word-break:break-all; }

4.CSS實現文本兩端對齊

.wrap {text-align: justify;text-justify: distribute-all-lines; //ie6-8text-align-last: justify; //一個塊或行的最后一行對齊方式-moz-text-align-last: justify;-webkit-text-align-last: justify; }

5 實現文字豎向排版

// 單列展示時 .wrap {width: 25px;line-height: 18px;height: auto;font-size: 12px;padding: 8px 5px;word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/ } // 多列展示時 .wrap {height: 210px;line-height: 30px;text-align: justify;writing-mode: vertical-lr; //從左向右 writing-mode: tb-lr; //IE從左向右//writing-mode: vertical-rl; -- 從右向左//writing-mode: tb-rl; -- 從右向左 }

5 使元素鼠標事件失效

.wrap {// 如果按tab能選中該元素，如button，然后按回車還是能執行對應的事件，如click。pointer-events: none;cursor: default; }

7 禁止用戶選擇

.wrap {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; }

8 cursor屬性

.wrap {cursor：pointer; //小手指；cursor：help; //箭頭加問號；cursor：wait; //轉圈圈；cursor：move; //移動光標；cursor：crosshair; //十字光標 }

9 使用硬件加速

.wrap {transform: translateZ(0); }

10 圖片寬度自適應

img {max-width: 100%}

11 Text-transform和Font Variant

p {text-transform: uppercase} // 將所有字母變成大寫字母 p {text-transform: lowercase} // 將所有字母變成小寫字母 p {text-transform: capitalize} // 首字母大寫 p {font-variant: small-caps} // 將字體變成小型的大寫字母

12 將一個容器設為透明

.wrap { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }

13 消除transition閃屏

.wrap {-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;-webkit-perspective: 1000; }

14自定義滾動條

overflow-y: scroll; 整個滾動條 ::-webkit-scrollbar {width: 5px; }滾動條的軌道 ::-webkit-scrollbar-track {background-color: #ffa336;border-radius: 5px; }滾動條的滑塊 ::-webkit-scorllbar-thumb {background-color: #ffc076;border-radius: 5px; }

15 讓 HTML 識別 string 里的 ‘\n’ 并換行

body {white-space: pre-line; }

16 實現一個三角形

.wrap { border-color: transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px; }

17 移除被點鏈接的邊框

a {outline: none} a {outline: 0}

18使用CSS顯示鏈接之后的URL

a:after{content:" (" attr(href) ") ";}

19select內容居中顯示、下拉內容右對齊

select{text-align: center;text-align-last: center; } select option {direction: rtl; }

19 修改input輸入框中光標的顏色不改變字體的顏色

input{color: #fff;caret-color: red; }

20 修改input 輸入框中 placeholder 默認字體樣式

//webkit內核的瀏覽器 input::-webkit-input-placeholder {color: #c2c6ce; } //Firefox版本4-18 input:-moz-placeholder {color: #c2c6ce; } //Firefox版本19+ input::-moz-placeholder {color: #c2c6ce; } //IE瀏覽器 input:-ms-input-placeholder {color: #c2c6ce; }

21 子元素固定寬度 父元素寬度被撐開

// 父元素下的子元素是行內元素 .wrap {white-space: nowrap; } // 若父元素下的子元素是塊級元素 .wrap {white-space: nowrap; // 子元素不被換行display: inline-block; }

22 讓div里的圖片和文字同時上下居中

.wrap {height: 100,line-height: 100 } img {vertival-align：middle } // vertical-align css的屬性vertical-align用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。只對行內元素、表格單元格元素生效，不能用它垂直對齊塊級元素 // vertical-align：baseline/top/middle/bottom/sub/text-top;

23實現寬高等比例自適應矩形

.scale {width: 100%;padding-bottom: 56.25%;height: 0;position: relative; }.item {position: absolute; width: 100%;height: 100%;background-color: 499e56;} <div class="scale"><div class="item">這里是所有子元素的容器</div></div>

24 transfrom的rotate屬性在span標簽下失效

span {display: inline-block }

25 邊框字體同色

.wrap {width: 200px;height: 200px;color: #000;font-size: 30px;border: 50px solid currentColor;// border: 50px solid; // 實現二}

26 手動生成問號加圓圈

.help_tip{display: inline-block;text-align: center;background-color: #e2e2e2;width: 16px;height: 16px;font-size: 14px;line-height: 16px; } .help_tip:before{content: '?';font-weight: bold; }

總結

以上是生活随笔為你收集整理的常用易忘CSS小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。