タスク8ジョブ

2055 ワード

1、ブロックレベルの要素と行内の要素はそれぞれどれらがありますか?4つ以上の特性の違いをテストし、リストします.
block-level: div h1~h6 p hr form ul dl ol pre table li dd dt tr td th inline-level: em strong span a br img button input label select textarea code script
  • 特性の違い
  • ブロックレベルはブロックレベルと行内を含むことができ、行内にはテキストと行内
  • のみを含むことができる.
  • ブロックレベルは行全体の空間を占有し、行内は自身の幅空間
  • を占有する.
  • 行内要素に幅
  • を設定することはできません.
  • 行内要素設定paddingは左右にのみ有効であり、上下には有効ではなく、ページには表示されません.しかし、ボックスモデルでは見ることができます.もちろんborderを追加すれば見ることができます.
  • 同様に内要素にmarginを設定しても左右にしか効果がありません.ボックスモデルにはmarginが表示されます.


  • 2、CSS継承とは何ですか.継承できる属性とできない属性はどれですか?
    CSS継承:要素の1つの継承属性に値が指定されていない場合、親要素の同属性の計算値computed valueを取り、ドキュメントルート要素のみがその属性の概要で与えられた初期値を取ります.継承できる属性は、例えば、color、font-size、letter-spacing、word-spacing、line-height、font、font-family、font-style、font-variant、font-weighttext-decoration、text-transform、list-style-type継承できない属性は、例えば、display、margin、border、padding、background height、max-height、width、min-width、max-width、max-width width overflow、position、left、right、top、bottom、float、clear
    3、ブロックレベルの要素を水平方向に中央に配置するにはどうすればいいですか?行の要素を水平方向に中央に配置するにはどうすればいいですか?
  • ブロックレベル要素を中央に配置します.まず、このブロックレベル要素に幅を設定し、margin:0 autoを使用します.
  • 行内要素中央:ブロック要素内部にtext-align:center;

  • 4、CSSで三角形を実現する
    まずdivを用意し、幅を0にします.次に、borderの太い枠線を4辺に追加すると、効果が得られます.3辺を透明に設定します.
    5、単行テキストオーバーフロープラス...どのように実現しますか?
    white-space: nowrap;   /*   */
    overflow: hidden;      /*   */
    text-overflow: ellipsis; /*   */
    

    6、px、em、remの違い
  • px:固定単位
  • em:親要素のサイズに対する相対単位
  • rem:相対単位、ルート要素(html)に対するフォントサイズ
  • 7、次のコードの役割を説明しますか?どうして引用符をつけますか.フォントの中で5 b 8 b4 f 53は何を表していますか?body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }はフォントスタイルを設定し、フォントサイズは12 px、行高さ1.5はfont-family: tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;が一番前に並ぶ優先度が最も高い.引用符を付けるのは、真ん中にスペースがあるため、2つのフォント'5 b 8 b4 f 53'に誤導する可能性があるのは宋体コード1であり、効果ソースコード2、ボタン効果を実現する:buttonソースコード3、以下の表を実現する:tableソースコード4、以下の三角形ソースコード5を実現する、以下のCard:Cardソースコードを実現する