首頁  >  文章  >  web前端  >  前端開發中常遇到的一些css問題(總結)

前端開發中常遇到的一些css問題(總結)

青灯夜游
青灯夜游原創
2018-09-11 16:02:062282瀏覽

本章為大家帶來一些在前端開發中常遇到的一些css問題(總結),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一、關於input的問題

1.input可編輯可下拉

<div>
   <input type="text" list="itemlist" name="itemid" value="{$data.itemid}" >
  <datalist id="itemlist">
     <option>item1</option>
     <option>item2</option>
   </datalist>
</div>

2. input下拉

<select>
    <option value="-1" >---请选择分辨率---</option>
    <option value="0" >320 X 240</option>
</select>

3. input邊線點擊不顯示

input點選邊框樣式無效

outline: none;  /**/

4. 提示文字:placeholder="手機號碼"

input修改提示文字顏色

::-webkit-input-placeholder { /* input提示文字颜色 */
    color: #fff;
    font-size:20px;
}

5. input出現背景是黃色

這種點擊框也不會出現黃色了

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}

還有一種就是關閉自動填充:autocomplete="off"

二、是否佔位:顯示/隱藏

1. display

display:none;  /*不占位*/
display: block;  /*显示*/

2. visibility

visibility: hidden;   /*占位*/
visibility: visible;  /*显示*/

三、定位

##1.  絕對定位:position: absolute

 父級不自動增高,解決方法:overflow:auto;

2. 相對定位:position: relative;

3. 固定定位:position:fixed;

四、Textarea

1. div模擬textarea文字域輕鬆實現高度自適應

.testdisplay {
   width: 100%;
   min-height: 200px;
   max-height: 400px;
   margin-left: auto;
   margin-right: auto;
   outline: 0;
   font-size: 12px;
   line-height: 24px;
   word-wrap: break-word;
   overflow-x: hidden;
   overflow-y: auto;
   /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);*/
}

五、手指遊標

 cursor: pointer; /*手指光标*/

六、文字省略號

1. 單行文字省略號

.digital-limit {
   overflow: hidden;
   text-overflow: ellipsis;
   /*显示...*/
   white-space: nowrap;
   /*文本不换行,这样超出一行的部分被截取,显示...*/
}

2. 多行文字省略號

.digital-normal {
   display: -webkit-box;
   -webkit-box-orient: vertical; 
   -webkit-line-clamp: 3; 
   overflow: hidden;
}

七、捲動條修改樣式

::-webkit-scrollbar {/*滚动条整体样式*/
   width:  8px !important;     /*高宽分别对应横竖滚动条的尺寸*/
   height: 8px !important;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
   border-radius: 8px !important;
   -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.1) !important;
   background: rgba(0,0,0,.1) !important;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
   -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0) !important;
   border-radius: 10px !important;
   background: rgba(0,0,0,0) !important;
}

八、透明度

1. 背景與字體透明

opacity:0.5; /* 0-1 的透明度 */

2. 背景透明,字體不透明

background: rgba(216, 216, 216, .1.5);

九、img圖片截圖

.historys img{
    width: 100%;
    height: 100%;
    position: absolute;
    right: -5px;
    clip: rect(0 103px 100px 0px);
}

透過js在圖片剛開始載入的時刻可以取得其寬度和高度,然後用js決定限制圖片的高度還是寬度。如何在圖片開始加載時獲取大小可以在這裡找到。

Js:

$(function(){

    $(&#39;.historys img&#39;).each(function(){

        var $this=$(this);

        imgReady($this.attr(&#39;src&#39;),function(){

            if(this.width>this.height){

                $this.attr(&#39;height&#39;,&#39;100&#39;);

                $this.removeAttr(&#39;width&#39;);

            }

        });

    });

});

十、背景圖

1. 尺寸等比擴充圖片來填滿元素,即cover值: background-size:cover; #​​

##2. 尺寸等比縮小圖片來適應元素的尺寸,即contain值:background-size:contain; 

3. 尺寸以圖片自身大小來填滿元素,即auto值: background-size :auto;

4. 圖片模糊

使用filter()函數實作模糊背景,使用方法:

-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
 filter: blur(5px);

前端開發中常遇到的一些css問題(總結)5. 其他

不平鋪:background-repeat: no-repeat; 

   橫向平鋪:background-repeat: repeat-x; ​​

   縱向平鋪:background-repeat: repeat-y; 
   固定:background-attachment: fixed; 
#    滾動:background-attachment: scroll; 
#    水平居中:background-position: center; #​​
   水平居中且垂直居中:background-position: center center;

以上是前端開發中常遇到的一些css問題(總結)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn