div+css を使用するときに注意する必要があるいくつかの詳細-PHPチュートリアル-php.cn

div+css を使用するときに注意する必要があるいくつかの詳細

巴扎黑

リリース： 2023-03-14 10:18:01

オリジナル

1498 人が閲覧しました

　　第一个注意点：选择器的使用（标签、class、id）

三种选择器中id（#）的优先级最高，根据id名筛选出唯一元素；

如下输入：#menu{ width:1200px; height:45px; background:#90F}

其次是class（.）的优先级较高，根据id名筛选出唯一元素；

如下输入：.text{ width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}

标签优先级最差，根据标签名选中元素；

如下输入：div{text-align:center; vertical-align:middle; line-height:100px}

微软雅黑

　　第二个注意点：外边距margin、内边距padding和流float的使用

外边距margin和内边距padding的使用是相对于边框的调整，四边框按上右下左顺时针调整；

特殊使用：外边距margin一般配合流float来使用，流float给操作的对象规定一个方向（left向左流、right向右流），被操作对象按此按此方向进行布局

如下（导航栏的制作）：

　　　　.text{ width:200px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
　　　　.text:hover{ background-color:#000; color:#F00; cursor:pointer}

另外，内边距padding：如果加了内边距，该元素会相应的变大，则需要在相应的高度属性中进行调整；

如下输入：

height:80px; background-color:#90C; float:left; padding:20px 0px 0px 0px">

（这里height由100px调整为80px，加padding效果）

　　第三个注意点：分层z-index的使用条件

使用分层z-index时，要配合位置属性来调整；如果缺少属性位置的设置，则没有显示效果。

如下输入：

1. 背景タイルに小さすぎる画像を使用しないでください。

これが、多くの人が 1px を使用しない理由です。ただそれを知っているだけです。幅と高さ 1px の画像を 200px の領域にタイリングするには、200*200=40,000 回必要となり、リソースを消費します。

2. 国境はありません。

推奨の書き方は border:none; です、笑、私はいつもこれを使っています。 border:0; は境界線の幅をゼロとして定義するだけですが、境界線のスタイルと色は引き続きブラウザーによって解析され、リソースを占有します。

3. * ワイルドカードは注意して使用してください。

いわゆるワイルドカードは、使用されているか、古いか、先進的であるかに関係なく、CSS 内のすべてのタグを初期化することであり、これは大量のリソースを消費します。オプションの初期化タグが必要です。

4. CSS の 16 進数のカラーコードの略語。

私は略語や小文字に慣れていますが、分析に占有されるリソースを減らすために、それが推奨される書き方ではないことに気づきました。ただし、ファイルサイズも大きくなります。どちらが良いか悪いかは慎重に検証する必要があります。

5. 頭にスタイルを置き、足にスクリプトを置きます。埋め込みではなく、外部リンクのみです。

6. CSS 式は決して使用しないでください。

7. @import を通じてスタイルシートをインポートする代わりに、スタイルシートを参照するために使用します。

8. 一般に、PNG は GIF よりもはるかに小さいです。繰り返しになりますが、GIF でどれだけの色が無駄にされているかを最適化する価値は十分にあります。

9. HTML で画像を拡大縮小しないでください。一方は見栄えが悪く、もう一方はリソースを消費します。

10. テキストフォントには偶数の12px、14px、16pxを使用するのが最適です。効果は非常に優れています。特別な場合、15px。

以上がdiv+css を使用するときに注意する必要があるいくつかの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。