CSS進級知識:(@ルール,,BFC,,レイアウト)、body背景、行高さ、行箱揃え

行箱の中の文字はフローティング要素を避け、ブラウザはデフォルトでspan要素で包まれます(だから文字はfloat要素を避けます)

@ルール   at-rule  @ルール、@文、css命令、css文

1 import   @import “./../xxx.css”  さぎょう  別のCSS

を導入

2 charset  @charset “utf-8” ;   役割はブラウザに指定されたコードを使用して読むように伝えます.  最初の行

にある必要があります.

 

webフォント

 @ルールを使用して新しいフォントを作成し、

書き方

@font-face{
        font-family: "xx  " ；//    
        src:url("./../xx  .ttf")            
}    
               ，       ，       。           ；        icon-font

　　
 

ブロックレベルフォーマットコンテキスト(Block Formatting Content)

BFCの作成方法

の要素であるHTML要素

フローティング又は絶対位置決め固定位置決め

overflow値がvisible(デフォルト)でないブロックボックス   

display :inline-block | tabel |table-cell

float    none。
overflow   auto,scroll hidden。
display   table-cell, table-caption, inline-block      。
position    relative static。

BFC機能が作成されました.

彼は独立した地域で、

です.

異なるBFC領域、レンダリング時に互いに干渉しない

BFC領域は内部と外部のつながりを遮断し、内部レンダリングは外部

に影響しない.

BFCレンダリング規則

BFCの要素を作成して自動高さを計算すると、サブ要素のfloat要素が必要になります.

BFCの要素を作成しました.彼の枠線ボックスはフローティング要素と重ならない(左固定幅、右適応幅を作るために使用されます)

BFC要素を作成します.サブ要素marginとは結合しません.

　　

行の高さ:

line-height:1px; 固定値  

line-height:2em; || line-height:2%;計算してから継承する  (親要素のline-height値(font-size*2)を計算します.継承します).複数行のテキスト、フォントが異なる場合、または混乱が発生します.

line-height:2; 継承してから計算(line-height:2を継承  現在の要素のfont-sizeを使用します).推奨

 
 

body背景

キャンバス

キャンバスの最小幅は、ビューポートの幅

です.

キャンバスの最小高さはビューポートの高さ

です.

は、なぜbody要素が幅が広くない場合、背景色が表示されるのかを説明している.キャンバスの色を

に設定


HTMLに背景色が設定されていない場合、body要素の背景色はキャンバス全体を上書きします.
HTMLが背景色を設定すると、body要素は普通のdivと同じようにキャンバスをいっぱいにしません.

キャンバス背景図

幅:バックグラウンドピクチャを設定する場合、キャンバスの幅

ではなく、ビューポートの幅に対するピクチャの割合

高さ:HTML要素、すなわちウェブページの高さに対するバックグラウンドマップの高さのパーセント.

横方向位置:ビューポート

に対するパーセンテージ、プリセット値

縦位置:パーセンテージ、プリセット値のWebページに対する高さ

HTML要素でbackgroundが設定されている場合、すべて正常であり、上記はbodyに直接backgroundを設定した結果である
 
 

画像の底の白い辺

理由

ピクチャの親エレメントはブロックボックスで、その高さは自動的で、ピクチャの下部と親エレメントの間に白いエッジ

が現れることが多い.

解決策:

親要素のフォントサイズを0に設定します.副作用は、内部に文字があると見えなくなり、spanを単独で設定しても

は解決できません.

設定画像はブロックボックス

である.