CSS基礎知識(まとめ1)

2929 ワード

ブロックレベルの要素と行内の要素はそれぞれどれらがありますか?4つ以上の特性の違いをテストし、リストします.
ブロックレベル要素:div p hr form h 1~h 6 ul ol li dl dt dd table tr td th行内要素:a spanem strong br img button input label selectブロックレベル要素と行内要素の違い:ブロックレベル要素の幅は本行を占め、行内要素の幅は自身のテキストの幅であり、本行がいっぱいになるまで1行内で連続的に配列することができる.ブロック・レベル要素の内部には、ブロック・レベルと行内要素をラップできますが、内部要素の内部には行内要素しかラップできません.ブロックレベルの要素は幅の高さを設定できます.行内の要素は幅の高さを設定できません.ブロックレベル要素は上下左右のmargin、padding余白を設定できます.行内要素は左右方向のmargin、paddingにのみ有効で、上下は無効です.
CSS継承とは?継承できる属性とできない属性はどれですか?
css継承:サブエレメントはスタイルを指定せずに親エレメントのスタイルを継承し、一部のプロパティは継承をサポートし、一部のプロパティは継承をサポートしません.継承をサポートするプロパティ:フォント関連プロパティ:font,font-family,font-weight,font-size,font-style,font-stretch,font-size-adjustテキスト関連プロパティ:text-indent(テキストインデント)、text-align,line-height,word-spacing,letter-spacing,text-transform,direction,color要素可視性:visibilityテーブルレイアウトプロパティ:caption-side,border-collapse,bord-spacing,bord-spacing,empty-cells,table-layoutリストレイアウトプロパティ:list-style-type,list-style-image,list-style-position,list-style生成内容プロパティ:quotesカーソルプロパティ:cursorページスタイルプロパティ:page,page-break-inside,window,orphans音スタイルプロパティ:speak,speak-punctuation....継承がサポートされていない属性:displayテキスト属性:vertical-align,text-shadow,text-decoration,white-space,unicode-bidiボックスモデル関連属性:width,height,margin関連属性,border関連属性,padding関連属性背景関連属性:background,background-XXX位置決め属性:float,clear,position,top,right,bottom,left,min-width,min-height,max-width,max-height,overflow,clip,z-index生成コンテンツ属性:content,counter-reset,counter-incrementプロファイルスタイル属性:outline-style,outline=width,outline-color,outlineページスタイル属性:size,page-break-before,page-break-after音声スタイル属性:pause-before,pause-after,pause,cue-before,cue-after,cue,play-during
ブロックレベル要素を水平方向に中央に配置するにはどうすればいいですか?行の要素を水平方向に中央に配置するにはどうすればいいですか?
ブロックレベル要素:1固定幅div:margin-left:autoを設定する;margin-right:auto; 2固定幅div:margin:0,Y px;(Yはdivの左右の枠線からの距離で、必要に応じて設定)行内要素:親要素にtext-align:centerを設定する;
CSSで三角形を実現
.trigon2{
            width: 0;
            height: 0;
            border-top: 40px solid blue;
            border-right: 40px solid transparent;
            border-bottom: 40px solid transparent;
            border-left: 40px solid transparent;
 }

1行テキストオーバーフロー...どのように実現しますか?
p{
    white-space: nowrap;                   /*       */
    overflow: hidden;                           /*      */
    text-overflow: ellipsis;                 /*        ....
}

px,em,remの違いは何ですか
  • px:ディスプレイの画面解像度に対する絶対単位.
  • em:親要素のフォントサイズに対する相対単位.
  • rem:相対単位、ルート要素(html)フォントサイズ.

  • 次のコードの役割を説明しますか?どうして引用符をつけますか.フォントの中で5 b 8 b4 f 53は何を表していますか?
    body{
      font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;       
    /*font: 12px/1.5     12px,      1.5 */
    /*tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif8       ,          。  tahoma,               arial,    。*/
    /*           ,           。\5b8b\4f53 unicode     ,    。*/
    }