這篇文章主要為大家展示了“常用易忘CSS小技巧有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“常用易忘CSS小技巧有哪些”這篇文章吧。

創(chuàng)新互聯(lián)建站堅(jiān)信：善待客戶，將會(huì)成為終身客戶。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨?。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。十余年網(wǎng)站建設(shè)經(jīng)驗(yàn)創(chuàng)新互聯(lián)建站是成都老牌網(wǎng)站營(yíng)銷(xiāo)服務(wù)商,為您提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、HTML5建站、網(wǎng)站制作、成都品牌網(wǎng)站建設(shè)、重慶小程序開(kāi)發(fā)服務(wù),給眾多知名企業(yè)提供過(guò)好品質(zhì)的建站服務(wù)。

解決inline-block元素設(shè)置overflow:hidden屬性導(dǎo)致相鄰行內(nèi)元素向下偏移

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

超出部分顯示省略號(hào)

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

css實(shí)現(xiàn)不換行、自動(dòng)換行、強(qiáng)制換行

//不換行
.wrap {
  white-space:nowrap;
}
//自動(dòng)換行
.wrap {
  word-wrap: break-word;
  word-break: normal;
}
//強(qiáng)制換行
.wrap {
  word-break:break-all;
}

CSS實(shí)現(xiàn)文本兩端對(duì)齊

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

實(shí)現(xiàn)文字豎向排版

// 單列展示時(shí)
.wrap {
    width: 25px;
    line-height: 18px;
    height: auto;
    font-size: 12px;
    padding: 8px 5px;
    word-wrap: break-word;/*英文的時(shí)候需要加上這句，自動(dòng)換行*/  
}
// 多列展示時(shí)
.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;        -- 從右向左
}

使元素鼠標(biāo)事件失效

.wrap {
    // 如果按tab能選中該元素，如button，然后按回車(chē)還是能執(zhí)行對(duì)應(yīng)的事件，如click。
 pointer-events: none;
    cursor: default;
}

禁止用戶選擇

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

cursor屬性

.wrap {
  cursor：pointer; //小手指；
  cursor：help; //箭頭加問(wèn)號(hào)；
  cursor：wait; //轉(zhuǎn)圈圈；
  cursor：move; //移動(dòng)光標(biāo)；
  cursor：crosshair; //十字光標(biāo)
}

使用硬件加速

.wrap {
    transform: translateZ(0);
}

圖片寬度自適應(yīng)

img {max-width: 100%}

Text-transform和Font Variant

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

將一個(gè)容器設(shè)為透明

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

消除transition閃屏

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

自定義滾動(dòng)條

overflow-y: scroll;
整個(gè)滾動(dòng)條
::-webkit-scrollbar {
    width: 5px;
}

滾動(dòng)條的軌道
::-webkit-scrollbar-track {
    background-color: #ffa336;
    border-radius: 5px;
}

滾動(dòng)條的滑塊
::-webkit-scrollbar-thumb {
    background-color: #ffc076;
    border-radius: 5px;
}

讓 HTML 識(shí)別 string 里的 '\n' 并換行

body {
   white-space: pre-line;
}

實(shí)現(xiàn)一個(gè)三角形

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

移除被點(diǎn)鏈接的邊框

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

使用CSS顯示鏈接之后的URL

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

select內(nèi)容居中顯示、下拉內(nèi)容右對(duì)齊

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

修改input輸入框中光標(biāo)的顏色不改變字體的顏色

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

修改input 輸入框中 placeholder 默認(rèn)字體樣式

//webkit內(nèi)核的瀏覽器 
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;
}

子元素固定寬度 父元素寬度被撐開(kāi)

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

讓div里的圖片和文字同時(shí)上下居中

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

實(shí)現(xiàn)寬高等比例自適應(yīng)矩形

.scale {
            width: 100%;
            padding-bottom: 56.25%;
            height: 0;
            position: relative; 
        }

        .item {
            position: absolute; 
            width: 100%;
            height: 100%;
            background-color: 499e56;
        }    
   
        
            這里是所有子元素的容器