本章為大家帶來一些在前端開發中常遇到的一些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; 四、Textarea1. 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(){ $('.historys img').each(function(){ var $this=$(this); imgReady($this.attr('src'),function(){ if(this.width>this.height){ $this.attr('height','100'); $this.removeAttr('width'); } }); }); });十、背景圖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);
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中文網其他相關文章!