一般的な CSS スタイルのまとめ

今回はよく使われるCSSスタイルのまとめです。よく使われるCSSスタイルを使用する際の注意点は何ですか？実際の事例を見てみましょう。

センタリング

センタリングのテクニックを習得することは、レイアウトにとって非常に重要です。

入力

1. 内側の余白を削除します: パディング: 0。 3.
タイプの上下スピン ボタンを削除します:

input::-webkit-outer-spin-button {-webkit-appearance: none; }
input::-webkit-inner-spin-button {-webkit-appearance: none; }
input[type="number"]{-moz-appearance:textfield;}
注意：使用 number 时，安卓下可以调出数字键盘，并且只能输入数字，苹果手机不可以。

type="number"4.type="search": 携帯電話のソフト キーボード検索を表示します。Apple 携帯電話では from タグを使用する必要があります。

input::-webkit-search-cancel-button {display:none} 去除小差号
-webkit-appearance: textfield; 去除默认样式

background

1 .

background-image

: この後には、background-image:url(xxx.jpg)、url(xxx.png)、... などの画像パスが続く必要があります。2.background-position
: 必要です使用時に対応するパスの画像と一致するように、たとえば、background-position:0 0,100px 100px,...3.background-repeat
: 使用規則は、background-position4 と同じです。 .background-color
: 背景色を設定します注: 背景を使用する場合、複数の背景を使用していない場合は、合成書き込みを使用できます。そうでない場合は、背景が正しく表示されないように、別々に記述してください。背景画像を使用する場合、その後には URL のみを指定できることを強調する必要があります。 background-positionを使用して位置を設定し、background-repeatを再利用するかどうかを設定する必要があります。設定しないとエラーが発生します。

box-shadow

box-shadow: h-shadow v-shadow ブラー スプレッド カラー インセット;

1.h-shadow : 必須。水平方向の影の位置。負の値も許可されます。 [最も近い境界を基準とした位置]

2.v-shadow : 必須。垂直影の位置。負の値も許可されます。 [最も近い境界を基準とした位置]
3.blur: オプション。ファジー長 [実際の長さは指定された長さの半分です]
4.spread: オプション。影のサイズ。 [負の値にすることもできます]
5.color : オプション。影の色。 CSS カラー値を参照してください。
6.inset : オプション。外側の影（アウトセット）を内側の影に変更します。

説明:

1. h-shadow と v-shadow の両方が 0 の場合、オフセットがないことを意味し、全方向への拡散を意味します。

2.blur: 実際のブラー距離はセットの半分を表します。
3. 指定したエッジを設定します。主に水平方向と垂直方向の影の位置を制御します。たとえば、4 つの辺をそれぞれ指定します。 0 red, 2px 0 0 0 red, 0 2px 0 0 red, -2px 0 0 0 red;}
4. この属性を使用して境界線の境界線属性を置き換えることができます。利点は、影がスペースを占有しないことです。例:
box{background: green; width: 200px; height: 200px;}
// 位置処理が完了すると、レイアウトに影響します
.box1:hover{border:2pxソリッド #ffffff;box-sizing:border-box;position:relative;top:-2px;left:- 2px; }
.box2:hover{box-shadow:0 0 0 2px #ffffff;}

フォント

1.

font-size-adjust

: 小さいフォントで読みやすくなるようにフォントを設定します。

たとえば、フォントを 100 ピクセルに設定し、値を 0.58 (小さいサイズでは 58 ピクセル) に設定すると、表示がより読みやすくなります。詳細

2.-webkit-text-size-adjust 携帯電話のデフォルトは auto で、フォント サイズが自動的に調整されます。通常、この機能をオフにし、値を none または 100% に設定する必要があります。スタイルの問題を引き起こします。
user-modify

user-modify には、write-only (書き込み専用)、read-write (読み書き可能)、read-only (読み取り専用) の 3 つの属性値があり、編集可能性と集中編集可能属性に使用されます。通常の要素 機能は似ています。使用する場合はブラウザのプレフィックスを追加する必要があります。テストの結果、Firefox は

visibility

をサポートしていないことが判明しました。 opacity との違いは、使用すると属性が hidden に設定され、スペースを消費しますが、イベントのトリガーには影響しないことです。たとえば、hidden 属性を使用する要素が別の要素を完全にカバーしている場合でも、カバーされた要素のイベントは通常どおりトリガーされます。また、それ自体のイベントはトリガーされません。 visible 属性を設定して要素を表示する

flex

flex レイアウトを理解するには、まず 2 つのポイントを理解してください

まず、親ボックス属性です。親ボックスの2軸を理解します。

水平方向

flex-direction : 属性决定主轴的方向（即项目的排列方向）
    row : 横向，按元素顺序，居左[主轴为水平方向，起点在左端]
    row-reverse ：横向，倒序，居右[主轴为水平方向，起点在右端]
    column ：纵向，按元素顺序，[主轴为垂直方向，起点在上沿]
    column-reverse : 纵向，倒序[主轴为垂直方向，起点在下沿]
flex-wrap : 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
    nowrap : （默认）不换行，盒子会自适应
    wrap : 换行，第一行在上方
    wrap-reverse : 换行，第一行在下方
flex-flow ：<flex-direction> || <flex-wrap> 合并写法
justify-content : 属性定义了项目在主轴上的对齐方式，控制水平方向
flex-start : 左对齐
flex-end : 右对齐
center : 水平居中
space-between : 子元素间隔相等并自适应
space-around : 子元素两端间隔自适应

垂直方向

align-items : 属性定义项目在交叉轴上如何对齐，控制垂直方向
    flex-start : 上对齐
    flex-end : 下对齐
    center : 垂直居中
    baseline : 文字低端对齐
    stretch : 如果项目未设置高度或设为auto，将占满整个容器的高度( 默认值 )
align-content ：属性定义了多根轴线的对齐方式。
 如果项目只有一根轴线，该属性不起作用。( 多个轴 )，控制垂直方向
    flex-start : 多轴上对齐
    flex-end : 多轴上下对齐
    center : 多轴居中
    space-between ： 两端对齐，均分剩余空间

2番目: サブボックスの属性

order : 指定元素权重，默认为 0，权重越大，对应的元素越靠后。在使用时注意 flex-direction 的属性值
flex-grow ：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
        分配空间的权重，按权重比均分剩余空间(注意是宽度，不包含 padding 和 margin )
flex-shrink : 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
        值为 0 ：不缩小
flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex : 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self : 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。[注意换行]
    auto ：默认值
    flex-start ：上对齐
    flex-end ：下对齐
    center : 垂直居中
    baseline : 文本基线对齐(设置所有的item)

その他

 1. 去除苹果点击事件的灰色阴影:-webkit-tap-highlight-color: rgba(0,0,0,0);有些元素需要设置背景色。
 2. 溢出出现省略号 : white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
 3. 指定宽度数字不换行，需要指定换行属性：overflow:hidden; word-wrap:break-word;
 4. 文字平滑：-webkit-font-smoothing：none: 无抗锯齿；subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows；antialiased: 灰度平滑 常用于Android和iOS等移动设备的

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトで！

推奨読書:

react で選択した li を強調表示する手順の詳細な説明

Pixeler プロジェクト開発における EasyCanvas 描画ライブラリの使用方法の実践的な概要

以上が一般的な CSS スタイルのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。