CSSについて

一、概説

1.CSS:カスケードスタイルシート(Cascading Style Sheets)
CSS2.1現在は世界で最も幅広いサポート内容のCSS(最も一般的)であり、IEは5.5からCSS 2をサポートする.1の;私たちは今、IE 8から互換性があり、IE 8を下回ると、テストしなくても見ません.他の主流ブラウザはCSS 3をサポートしています.
2.CSS導入の4つの方式:

インラインスタイル:styleプロパティで、スタイルをラベルに直接書きます.

styleラベル:styleラベルをheadに入れます.

linkラベルは外部ファイル:に導入する.

CSSファイルにもう一つのCSSファイルを導入する:@import url(./b.css);.

二、知識点

1.div高さ
divの高さは、内部ドキュメントフロー要素の高さの合計によって決まります.
≪ドキュメント・フロー|Document Flow|emdw≫:ドキュメント内の要素のフロー方向のインライン要素(spanなど)が左から右に流れ、フローが障害に遭遇した場合は改行してフローを続行します.divのようなブロック要素は、上から下へ流れ、各ブロックは1行を独占する.

は、1つのspanにborderがあると、流れの中で断行遮断され、borderも分離状態となり、2つのborderは出現する.

英語の単語はデフォルトでは改行されず、word-breakで改行を制御できます.word-break:break all任意の位置で中断word-break:break word単語接続でのみ中断(デフォルト)

.

塊状元素を並べて示す方法:(1)float:left(2)display:inline-block

2.span高さspanの高さは、フォント、およびデザイナーが設計したフォントスタイルに関するパラメータによって決定される.

文字はベースラインで、中線ではありません.

フォント自体の高さに加えて、異なるスタイルのフォントには「推奨行の高さ」があり、ブラウザはデフォルトでこの推奨行の高さを取得します.

は、line-heightでインライン要素の高さを指定することができる.

3.ドキュメントフロー(Normal Flow)

ドキュメント・フロー:フォームを上から下へ1行に分割し、各行に左から右の順に要素、すなわちドキュメント・フローを排出します.通常のフローとも呼ばれます.

ドキュメントフローから離脱:要素がドキュメントフローから離脱すると、ドキュメントフローでスペースを占有するのではなく、フローティング状態になります.

ドキュメントフローから離れる3つの方法:(1)float: left;(2)position: fixed;(3)position: absolute;

.
4.CSS position位置決め

fixed測位要素の位置はブラウザウィンドウに対して固定位置であり、ウィンドウがスクロールしていても移動しない.

.topNavBar{
  position: fixed;
  top: 0;
  left: 0;
}

(1)ドキュメントフローからの離脱:要素の位置をドキュメントフローとは無関係にし、すなわちドキュメントフローにスペースを占有しない.(2)fixedに配置された要素と他の要素が重なる(親要素の高さに影響を与える).(3)fixedで位置決めすると,拡張された文字が縮んでしまい,width:100%で修正できる.(widthタグもバグが出やすいので、使わなくてもいい)

relative位置決め:相対位置決め相対要素の位置決めは、その正常な位置に相対する.

h2.pos-left{
  position: relative;
  left: -20px;
}

相対位置決め要素は、絶対位置決め要素の容器ブロックとしてよく用いられる.

absolute位置決め:絶対位置決め絶対位置決めの要素の位置は、最も近い位置決めされた親要素に対して、位置決めされた親要素がなければ、.

h2{
  position: absolute;
  left: 100px;
  top: 150px; 
}

（1） ： ， 。
（2）absolute めされた と の と する.

static め: め

sticky め: め