26個經常使用易忘CSS小技巧

收集於平時經常使用但易忘的CSS實現方法，若有遺漏或補充，還請指正！

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

.wrap {
  display: inline-block;
  overflow: hidden
	vertical-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-8
    text-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; -- 從右向左
}
複製代碼

6. 使元素鼠標事件失效

.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-scrollbar-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) ") ";}
複製代碼

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

select{
    text-align: center;
    text-align-last: center;
}
select option {
    direction: rtl;
}
複製代碼

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

input{
    color:  #fff;
    caret-color: red;
}
複製代碼

21. 修改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;
}
複製代碼

22. 子元素固定寬度 父元素寬度被撐開

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

23. 讓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;
複製代碼

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

.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>
複製代碼

25. transfrom的rotate屬性在span標籤下失效

span {
  display: inline-block
}
複製代碼

26. 邊框字體同色

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

最後

原文在這裏：gitHub 若有遺漏，還請指正！！

若是以爲對您有幫助！請別忘記點個贊或者關注哦！您的關注將是我前進的動力！！衝鴨！！！

「無畏前端」不定時更新社區優秀技術文章！