ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の知識ポイントのコレクション

CSS の知識ポイントのコレクション

高洛峰
高洛峰オリジナル
2017-03-09 18:47:221236ブラウズ

この記事ではCSSの知識ポイントをまとめて紹介します

CreateTime--2016年9月29日 09:43:10
Author:Marydon
1.背景色の線形グラデーション

background-color:linear-gradient(100deg,#FFF,#111);/*由黑色向白色渐变 deg表示度数*/

UpdateTime--2016 10月25日11: 37:53
UpdateTime--2016 年 11 月 23 日 09:53:46
2. テーブルの境界線を 1 つの境界線に結合するように設定します

border-collapse: collapse;/*前提:table的border=1或border="1"或border="1px"*/

UpdateTime--2016 10 月 29 日 09:04:07
3. 自動的に伸びるpの最小の高さと高さを設定する

#pHeight{height:auto;min-height:5px;width:800px; background:#bbeeeb;margin:0 auto;}   

<p id="pHeight">    
此p具有最小高度且高度可以随着内容的增高而自动伸展 
<br/>  此p具有最小高度且高度可以随着内容的增高而自动伸展 
</p>

自動的に伸びる最小の幅と幅を設定する

width:auto;min-width:5px;height:800px;

4. 改行を禁止する 2つの方法
方法1:
通常、ブラウザに表示されるドキュメントはブラウザのバナーの下に達すると自動的に折り返されますが、テキストが ~ タグに含まれる場合、改行は行われません
タグを使用します
方法 2:
CSS スタイルを使用します

style="white-space:nowrap;"

UpdateTime--11 月 25, 2016 08:57:49
改行を禁止するように td を設定します

<td nowrap="nowrap"></td>

UpdateTime--10月 31, 2016 09:44:17
5.表示スタイル
inline インライン要素(他の要素と1行を占有、改行なし、幅、高さの設定不可)
ブロック Level要素(1行を占有)行のみ、幅と高さを設定可能)
inline-block インラインのブロックレベル要素(他の要素と1行を占有しますが、幅と高さは設定可能)(インライン要素とブロックレベル要素の両方の性質を持ちます)
none 要素を非表示にする

document.getElementById("aa").style.display="";//表示的是:清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)

UpdateTime--Novell 24, 2016 11:44:31
6.ime-mode syntax and text-transform syntax
UpdateTime-- December 15, 2016 19:52:16

/*屏蔽输入法,可以用来禁止录入中文*/
  ime-mode:disabled; //IE兼容,chrome不兼容
  <input type="text" name="mobile" style="ime-mode:disabled;" />
/*将输入的英文字母转全部换成大写字母*/
  text-transform:uppercase;
  <input type="text" name="mobile" style="text-transform:uppercase;" />
UpdateTime--2017年1月9日10:23:23
/*将输入的英文字母转全部换成小写字母*/
  text-transform:lowercase;
  <input type="text" style="text-transform:lowercase;"/>

詳細な紹介
ime-mode構文: (この構文はGoogleブラウザでは無効であり、jsで制御する必要があります。「入力テキストボックス入力コンテンツコントロール」ファイルを参照してください)
ime-mode: auto | active | inactive | disabled
値:
auto: デフォルト値。 IMEのステータスには影響しません。 ime-mode属性が指定されていない場合と同じ
active: IMEで入力されたすべての文字を指定します。それは、現地言語の入力方法を有効にすることです。ユーザーは IME を無効化することもできます
inactive: IME を使用せずに入力されたすべての文字を指定します。それは、非母国語を活性化することです。ユーザーは引き続き IME を無効にすることができます
disabled: IME を完全に無効にします。フォーカスされたコントロール (入力ボックスなど) では、ユーザーは IME をアクティブにすることができません
text-transform 構文:
text-transform: none | uppercase | lowercase
値:
none : デフォルト値。変換は行われません
capitalize: 各単語の最初の文字を大文字に変換し、残りの文字は変換されません
大文字: 大文字に変換します
小文字: 小文字に変換します
7 p ボックスのときに自動的に折り返されるように p の内容を設定します。高さ幅を設定した後、表示されるコンテンツが幅を超え、コンテンツが幅を超えて折り返されない場合は、CSS スタイルを設定します

  word-wrap:break-word;

8。コンテナの幅、余分な部分は「..」でマークされます フォーム表示

前提条件: p と li の幅を最初に決定する必要があります

属性を追加します

  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;

9. テキスト ボックスとパスワード ボックスの表示スタイル コントロールIE ブラウザの場合

/*去除IE浏览器文本框右侧出现叉号*/
  #aa::-ms-clear {
    display:none;
  }
  /*去除IE浏览器密码框右侧出现眼睛*/
  #bb::-ms-reveal {
    display:none;
  }

<input id="aa" type="text"/><input id="bb" type="password"/> 

以上がCSS の知識ポイントのコレクションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。