よく忘れられがちな CSS のヒント 26 選

。包む {
  表示: インラインブロック;
  オーバーフロー: 非表示
 垂直方向の位置合わせ: 下
}

// 単一行テキスト.wrap {
 overflow:hidden;/*オーバーフロー部分は非表示*/
 text-overflow:ellipsis;/*制限を超えた部分は省略記号で表示されます*/
 white-space:nowrap;/*指定された段落内のテキストは折り返されません*/
}
//複数行テキスト.wrap {
    幅: 100%;
    オーバーフロー: 非表示;
    display: -webkit-box; //オブジェクトを弾性ボックスモデルとして表示します *必須プロパティ*
    -webkit-box-orient: vertical; //伸縮ボックスオブジェクトのサブ要素の配置を設定します *プロパティと組み合わせる必要があります*
    -webkit-line-clamp: 3; //ブロック要素内に表示されるテキストの行数を制限するために使用されます word-break: break-all; //ブラウザが任意の位置で改行を実装できるようにします *break-all は単語内での改行を許可します*
}

//改行なし。wrap {
  空白:折り返しなし;
}
//行を自動的に折り返す。wrap {
  単語折り返し: 単語を区切る;
  単語区切り: 通常;
}
// 強制改行.wrap {
  単語区切り:すべて区切り;
}

。包む {
    テキスト配置: 両端揃え;
    テキストの両端揃え: すべての行を均等に分配; //ie6-8
    text-align-last: justify; //ブロックまたは行の最後の行の配置 -moz-text-align-last: justify;
    -webkit-text-align-last: 両端揃え;
}

// 単一列 display.wrap {
    幅: 25px;
    行の高さ: 18px;
    高さ: 自動;
    フォントサイズ: 12px;
    パディング: 8px 5px;
    word-wrap: break-word;/*英語で書くときに行を自動的に折り返すにはこの文を追加する必要があります*/  
}
// 複数の列を表示する場合.wrap {
    高さ: 210px;
    行の高さ: 30px;
    テキスト配置: 両端揃え;
    writing-mode: vertical-lr; //左から右へ writing-mode: tb-lr; //つまり、左から右へ//writing-mode: vertical-rl; -- 右から左へ//writing-mode: tb-rl; -- 右から左へ}

。包む {
    // Tab キーを押してボタンなどの要素を選択した場合、Enter キーを押すとクリックなどの対応するイベントが実行されます。
 ポインタイベント: なし;
    カーソル: デフォルト;
}

。包む {
  -webkit-touch-callout: なし;
  -webkit-user-select: なし;
  -khtml-ユーザー選択: なし;
  -moz-user-select: なし;
  -ms-user-select: なし;
  ユーザー選択: なし;
}

。包む {
  カーソル: ポインター; //小指;
  カーソル: help; //矢印と疑問符;
  cursor:wait; // 円を描いて回転します;
  cursor:move; //カーソルを移動します。
  cursor:crosshair; //十字カーソル}

。包む {
    変換: translateZ(0);
}

画像 {最大幅: 100%}

p {text-transform: uppercase} // すべての文字を大文字にするp {text-transform: lowercase} // すべての文字を小文字にするp {text-transform: capitalize} // 最初の文字を大文字にするp {font-variant: small-caps} // フォントを小文字にする

。包む { 
  フィルター:アルファ(不透明度=50); 
  -moz-不透明度:0.5; 
  -khtml-不透明度: 0.5; 
  不透明度: 0.5; 
}

。包む {
    -webkit-transform-style: 3d を保存します。
    -webkit-backface-visibility: 非表示;
    -webkit-perspective: 1000;
}

overflow-y: スクロール;
スクロールバー全体::-webkit-scrollbar {
    幅: 5px;
}

スクロールバー トラック::-webkit-scrollbar-track {
    背景色: #ffa336;
    境界線の半径: 5px;
}

スクロールバーのサムネイル::-webkit-scrollbar-thumb {
    背景色: #ffc076;
    境界線の半径: 5px;
}

体 {
   空白: 行前;
}

。包む { 
  border-color: 透明 透明 緑 透明; 
  境界線のスタイル: solid; 
  境界線の幅: 0px 300px 300px 300px; 
  高さ: 0px; 
  幅: 0px; 
}

{アウトライン: なし}
{アウトライン: 0}

a:after{コンテンツ:" (" attr(href) ") ";}

選択{
    テキスト配置: 中央;
    テキストの最後揃え: 中央;
}
オプションを選択{
    方向: rtl;
}

入力{
    色: #fff;
    キャレットの色: 赤;
}

//Webkit ベースのブラウザ入力::-webkit-input-placeholder {
    色: #c2c6ce;
}
//Firefox バージョン 4-18 
入力:-moz-プレースホルダー{
    色: #c2c6ce;
}
//Firefox バージョン 19 以上
入力::-moz-プレースホルダー{
    色: #c2c6ce;
}
//IEブラウザ入力:-ms-input-placeholder {
    色: #c2c6ce;
}

// 親要素の下の子要素はインライン要素です。wrap {
  空白: ラップなし;
}
// 親要素の下の子要素がブロックレベル要素の場合。wrap {
  white-space: nowrap; // 子要素は折り返されません display: inline-block;
}

。包む {
  高さ: 100,
  行の高さ: 100
}
画像 {
  垂直位置合わせ: 中央
}
// vertical-align CSS プロパティ vertical-align は、インライン要素 (inline) またはテーブル セル (table-cell) 要素の垂直方向の配置を指定するために使用されます。これは、インライン要素とテーブルセル要素に対してのみ機能します。ブロックレベル要素を垂直方向に揃えるためには使用できません。// vertical-align: baseline/top/middle/bottom/sub/text-top;

        .スケール{
            幅: 100%;
            パディング下部: 56.25%;
            高さ: 0;
            位置: 相対的; 
        }

        。アイテム {
            位置: 絶対; 
            幅: 100%;
            高さ: 100%;
            背景色: 499e56;
        }    
   <div class="scale">
        <div class="item">
            これはすべての子要素のコンテナです</div>
    </div>

スパン {
  表示: インラインブロック
}

 。包む {
  幅: 200ピクセル;
  高さ: 200px;
  色: #000;
  フォントサイズ: 30px;
  境界線: 50px 実線 currentColor;
  // border: 50px solid; // 実装 2}