フロントエンド開発でよく遭遇するいくつかの CSS の問題 (概要)

この章では、フロントエンド開発でよく遭遇する CSS の問題 (概要) を紹介します。必要な方は参考にしていただければ幸いです。

1. 入力に関する質問

1. 入力は編集可能であり、ドロップダウン

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

3. 入力ドロップダウンが表示されません

入力のクリック枠のスタイルは無効です

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

4. プロンプト テキスト: プレースホルダー ="携帯電話番号"

入力プロンプト テキストの色を変更します

outline: none;  /**/

5. 入力の背景は黄色です

この種のクリック ボックスは黄色で表示されなくなります

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

別の方法は、自動入力をオフにする: autocomplete="off "

2. 場所を占有するかどうか: 表示/非表示

2. 位置決め: 絶対

親は自動的に増加しません。解決策: overflow:auto;

2. 相対位置:position: required;

4. textarea

1. div は textarea テキスト ドメインをシミュレートします。高い適応性を簡単に実現

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

5. 指カーソル

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

1. 単一行テキストの省略記号

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

7. スクロールバーの変更スタイル

.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);*/
}

8 . 透明度

1. 背景とフォントは透明です

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

9. 画像のスクリーンショット

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

jsを通じて画像の幅と高さを取得できます。読み込みが開始されるだけで、js を使用して画像の高さまたは幅を制限するかどうかを決定します。画像の読み込み開始時のサイズを取得する方法については、こちらをご覧ください。

Js:

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

10. 要素を埋めるように画像を比例的に拡大します。つまり、background-size:cover; のサイズに合わせて画像を縮小します。要素、つまり、contain 値:background-size:contain;

3. サイズは、画像自体のサイズ、つまり auto 値で埋められます:background-size:auto;ぼやけています

filter()関数を使用して背景をぼかします。 水平タイリング: 背景-リピート: リピート-x; 垂直タイリング: 背景-繰り返し: 繰り返し-y

修正済み: 背景添付: 修正済み

スクロール: 背景添付: スクロール

水平方向のセンタリング: 背景位置: 中央

水平方向に中央揃え、垂直方向に中央揃え: 背景位置: 中央中央;

以上がフロントエンド開発でよく遭遇するいくつかの CSS の問題 (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。