本章為大家帶來一些在前端開發中常遇到的一些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; /*手指光标*/
.digital-limit {
overflow: hidden;
text-overflow: ellipsis;
/*显示...*/
white-space: nowrap;
/*文本不换行，这样超出一行的部分被截取，显示...*/
}.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;
}opacity：0.5; /* 0-1 的透明度 */
background: rgba(216, 216, 216, .1.5);
.historys img{
width: 100%;
height: 100%;
position: absolute;
right: -5px;
clip: rect(0 103px 100px 0px);
}$(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');
}
});
});
});##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中文網其他相關文章！
