CSS詳細メモ_html/css_WEB-ITnose

CSS のブロックレベル要素とインライン要素

ブロックレベル要素の特徴:
1. 行全体を占有し、常に新しい行で開始し、後続の要素も新しい行に表示する必要があります。
2. インライン要素の特徴:
3. 他のインライン要素と同じ行に表示されます。

ブロックレベルの要素は次のようにリストされます:
div (ドキュメントパーティション)、article (記事コンテンツ)、side (付随コンテンツ)、audio (オーディオ再生)、blockquote (ブロック引用)、canvas (描画グラフィックス) 、dd (定義) リスト内の項目説明を定義)、dl (リストの定義)、fieldset (フォーム要素のグループ化)、figcaption (画像とテキスト情報のグループのタイトル)、figure (画像とテキスト情報のグループ)、フッター (セクションの終わりまたはページフッター）、フォーム（フォーム））、h1-h6（タイトル）、ヘッダー（セクションヘッダーまたはページヘッダー）、hgroup（タイトルグループ）、hr（水平分割線）、noscript（スクリプトがサポートされていない場合に表示されるコンテンツまたはスクリプト無効になっています)、ol (順序付けされた) リスト)、output (フォーム出力)、p (段落)、pre (書式設定済みテキスト)、section (ページ セクション)、table (表)、tfoot (表の脚注)、ul (順序なしリスト) ）、ビデオ（ビデオ）。

共通ブロック要素:

div,header,footer,nav,article,aside,section,p,h1-h6,ul,ol,li,dl,dt,dd

インラインタグ(inline/Inline) ) (インライン)

1. 1 行で表示します

2. 幅と高さをサポートしておらず、上下のマージンとパディングのサポートに問題があります

3. コードの改行はスペースに解析されます

4. Inline インレイの幅（拡張するコンテンツがある場合）

インライン要素は次のようにリストされます:
b (太字)、big (大きいフォント)、i (斜体)、small (小さいフォント) 、tt (等幅)、abbr (略語)、cite (引用)、code (コンピューター コード テキスト)、dfn (プロジェクトの定義)、em (強調)、kbd (キーボード テキスト)、strong (強調)、samp (サンプル テキスト) 、var (変数の定義) )、a (リンク)、bdo (要素はデフォルトのテキスト方向をオーバーライドできます)、br (改行)、img (画像)、map (画像マッピング)、object (オブジェクト)、q (参照) 、script (クライアント スクリプトの定義)、span (結合されたインライン要素)、sub (下付き文字)、sup (上付き文字)
button (ボタン)、input (入力)、label (ラベル)、select (フォーム コントロール)、textarea (テキスト エリア) ）。

インライン要素:

span,a,strong,em,time,mark

background 背景 (コレクション スタイル)

background-color 背景色

Background-image 背景画像 (パス URL を追加) （））SHOP）

padding-box (デフォルト)

t Content-BOX

Background-CLIP 背景の切り取り

-webkit-Textoボーダーボックス（デフォルト）

パディングボックス

コンテンツボックス

バックグラウンドサイズの背景マップサイズ（!!!携帯電話は推奨されません）

カバー）使用 - - - ‐ ‐ ‐ ‐ ‐勾配（赤、青）blueの使用）

：（赤50px、青い100px）

b

b は b b b b b b b (角度デフォルト 180°)

: 背景-画像: 線形収束 (120 度、赤、青)

:DXTmageTransform.Microsoft.gradient を使用します

starColorstr='red',endColorstr='blue',GradientType='1'); または 2

放射状グラデーション

背景画像: 放射状グラデーション (開始点形状サイズポイント)

開始点: キーワードにすることができます(左、上、右、下)、特定の値またはパーセンテージ

形状: 楕円形、円形

サイズ: 特定の値またはパーセンテージout through through ''s' through ' through ' through ' through using using ‐ ‐ ‐‐ ‐‐ ‐‐、（一番近い角）へ

カバー

! ！ ！ Firefox はキーワードのみをサポートします。

フォントテキスト (コレクションスタイル)

color フォントの色

font-size フォントサイズ

font-weight フォントの太さ

font-weight フォントの太さではありません

太字 太字

フォントスタイルのフォントイタリックノムラルノーマル

ラインハイタイ

フォントグラム：

フォントスタイルフォントフォントサイズ/ラインハイトフォントファミリー上 上

下線

どれも変更されません

Text-Algin テキスト配置方法

Left Center Right

Text-indent 1 行目

. Word Passage Letter-SPACING アルファベットの間隔 Direction テキストの配置方向

RTL 右から左

Ltr 左から右

: テキストを変更する Bidi-Override (右から左へ)

あるある ある要素内のテキストが超過エリプシスの表示幅

Border-Right-Width 右

Border-Left- 左幅 use using using use using ‐ ‐ ‐ ‐ ‐ ボーダースタイル

左スタイル

out out out out out out of ''s から ' s ' を使用して、6 桁または 3 桁の 16 進数になります

ボーダートップカラー -Er Border-Right-COLOR

Border-Bottom-Color

Border-Left-COLOR

Border-Radius 角の丸い半径

: 10px 20px 30px 40px

Du

border-image 構文:

: ,、 , border- IMAGE はコンテンツに画像を追加しますが、画像を紹介するプレフィックス -webkit-

border-IMAGE-SOURCEG に限定されます

IMAGE-SLICE 画像を 2 つの値 (上下または左右) で切り取ります。繰り返し 写真の配置

ラウンドタイル

‐‐ ‐‐‐‐‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ ‐ color 枠線に色を追加します。 (外側のレイヤーからレイヤーごとに表示)

firefoxの下でのみ使用でき、境界線を特定の方向に設定します。

Shadow シャドウ

Shadow シャドウが最初に書き込まれ、次に下に書き込まれます Padding

パディング (要素とそのコンテンツの前にギャップがあるように)

パディング: 30px (上、下、左、右);

0px（下）80px（左）;パディングトップ

パディング右

パディング - heft

パディングは要素の要素では考慮されず、パディングは背景には見られません表示要素

Margin

マージンの外側の距離

マージン: 30px (上下左右);

使用するuse using through ' s use 's through ' s through ‐ ‐ ‐‐‐‐‐ margin:10px(上) 30px(右) 60px(下) 80px(左)要素の外側のマージン境界線の距離、マージンは要素の背景を表示しません

同じ要素間の距離はマージンで使用され、親要素と子要素間の距離はパディングで使用されます

ハイパーリンク

href ページのアドレスクリックするとジャンプします ジャンプします このページは

‐ ‐ ‐ ‐ ‐ ‑ out から

へ発信 out out out ‐ off ‐ ‐ ‐ ‐‐‐‐‐‐ href a タグに a タグを含めることはできなくなりました分 SPAN タグ地区スタイルは、a タグの下にある SPAN タグを見つけるために、span {} を含む

を使用します

ページのデフォルトの開き方のリンクでリンクを基本定義し、デフォルトのアドレス

新しいウィンドウでページを開きます tARGET = "_ Blank"

現在、ウィンドウはページを開きます target="_self"

table table

table 幅を設定すると、幅は各行に自動的に割り当てられます。高さを設定した後、tbody の下の各行にも自動的に割り当てられます

Thead テーブルヘッダー

tody todyテーブルボディ

tr row

thセル（太字、中心）Td細胞

colspan colspan merge colspan rowspanは細胞を垂直にサポートし、垂直方向の整列を設定することで修正をサポートします。 using using use ‐ ‐ ‐‐ ‐‐ および

td, th{padding: 0; border: 1px;}

vertical-align 垂直方向の配置 (2 つ以上のインラインまたはインラインブロック要素の垂直方向の配置に使用) )

値の説明

。要素は親要素のベースライン上に配置されます。垂SUBの縦揃えテキストの入札。 Er SUPER 垂直配置の配置

Top

Top 要素の上部を行の最上位の要素の上部に位置合わせします

Text-TOP、要素の上部を親要素のフォントの上部に位置合わせします

中央に配置この要素を親要素の上に、中央の親要素を配置します。

要素の上部を行内の最下位の要素の上部に揃えます。

text-bottom 要素の下端を親要素のフォントの下端に揃えます。

長さ負の値も許可されます。

out out out out of Out out of 親要素から継承するvertical-alignを使用した要素を介して。

float(float left/right/none):

1. インライン要素が幅と高さをサポートするようにします

2. ブロック要素を 1 行で表示します

3. 幅が設定されていない場合、幅はコンテンツによって決定されます

4. ドキュメント フローから離脱します

フローティングの原則:

要素をドキュメント フローから離脱させ、親の境界または別のフローティングの境界に達するまで指定された方向に移動します要素が停止します

ドキュメント フロー: ドキュメント フローはドキュメント内にあります。配置されたときにオブジェクトが占める位置を示します。

CBFC（ボックスフォーマットコンテキスト）ブロックレベルのフォーマットBFC：

1.ルートノード

2.フロートは見えません。5。位置の値。絶対値または固定です

overflow の値

表示されるデフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。 End 非表示のコンテンツはトリミングされ、残りのコンテンツは表示されません。 L o スクロール コンテンツはトリミングされますが、ブラウザーは残りのローリング バーを表示します。結果 コンテンツがトリミングされた場合、ブラウザには残りのローリング バーが表示されます。 Ier Inherit 規制では、親要素から Overflow 属性の値を継承する必要があります。 2. 親要素の表示を設定します: inline-block; : block; Clear: Both;} 最も一般的な方法は、現在、フロー (初期位置) です。要素は移動時に保持されます)

2. 元の位置に基づいて左 (右) と上 (下) の値を計算します

3. レベルを上げます

1. ストリーミングドキュメントから

2. レベルを強化します

3. 配置した親レベルに基づいて座標を計算します 配置がない場合は、ドキュメントに基づいて計算します

4. インライン要素の幅と高さをサポートするようにします

5. 絶対配置後に幅を設定しないでください。幅はコンテンツによって引き伸ばされます

! ！ ！ ！要素が配置された後、デフォルトでは、次のレベルは前の要素よりも高くなります

z-index level

1. 値が大きいほど、レベルも高くなります

2. レベルは、配置された要素に対してのみ機能します

3.同じレベルの要素間でのみ比較することをお勧めします

- - - - – – – – – – –

ドロップダウンボックスタイプ= "ラジオ"を選択するラジオボタン

type="checkbox" チェックボックス

type= "file" アップロードコントロール

type="submit" 送信ボタン

type="email" 電子メールは @ で終わる必要があります

type="tell" 電話 (モバイル デバイスではデジタル入力方法が自動的にポップアップします)

type="url"範囲「数値選択

」 max =" 100 "min =" 1 "value =" 50 "step (展開制御、各移動量) =" 10 "

type ="number "number select

max =" 9 9 " min=1" value = "3" step = "3"のみ時間

日付：年、月、日のみラジオの選択をチェックし、選択されたデフォルトが選択されます

パターン：定期的な検証

プレースホルダー：プロンプトテキスト情報（ IEと互換性があります)

P AutoComplete: ユーザー入力値を保存するかどうか (デフォルト)

オートフォーカス: 入力フォーカスを取得するフォームを指定します

必須: 強制ユーザー入力を空にすることはできません

& & & & lt; Vallist" required/& gt;

& lt; datalist id = "Vallist" & gt; (入力で選択した内容のドロップ ボックス。 )

& lt; オプション値 = "javascript" & gt;

& lt; オプション値 = "html" & gt;/オプション & gt;O & lt; オプション値 = "css" & gt; css & lt;/option & gt;

& lt;/datalist & gt; 新しい送信アドレス

through use using using ' 's ' through out through out through through 's ' s ' through ' s through 's ' through to '' ‐ ‐ ‐‐‐‐‐

area{padding: 0; margin: 0; に送信するフォーム; border: 1px Solid #000; }

Textarea {Resize: None; Overflow: Auto;}

Resize 属性は、ユーザーがサイズを調整できるかどうかを指定します。

注: この属性を有効にしたい場合は、要素の overflow 属性を設定する必要があります。値は auto、hidden、scroll のいずれかです。説明 値の説明

なし ユーザーは要素のサイズを調整できません。どちらのユーザーも要素の高さと幅を調整できます。

水平 ユーザーは要素の幅を調整できます。

シェンシェンシェンシェンシェン自分自身を彼女に。

擬似クラス

:link{} このリンクは訪問されていません

:visited{} このリンクは訪問されました

:hover{} マウスが移動しました

:active{} マウスが押されました

L-V-H-あ : ハッシュ値カテゴリをクリックした後のターゲットクリック

1行目

P: 選択した色の変更

P: 最後の要素の後

P: 要素の開始前

p: not box h2:nth-child (3){background:Red;}

找到h2标签的父级下边的第3个子元素、并および标签型还必须是h2

p:nth-of-type(3 ){background:Red ; } p タグの親の下にある 3 番目の p タグを検索します

:first-child == :nth-child(1)

:last-child == :nth-last-child(1)

️括弧内の値は、奇数 (奇数)、偶数 (偶数)、または数学の数列 (n、2n、) です

マウス交差

概要: なし。

透明

00〜1の透明小数要素は透明で、その中の内容は全て透明になります IEでの透明度設定

filter:alpha(opacity=50);

opacity: .5;

ハッカー

最後に次のように追加します:

page＆lt＆gt; mark＆gt; imgsrc "/＆gt;ワイド高さ

2、MAX-WIDTH 最大幅

min-width 最小幅

max- height 最大高さ

Min-height 最小高さ IE6 とは互換性がありません

3、IE6 では、1px の点線はサポートされません

。

4. 要素内には、インライン要素以外にも他の種類の要素があり、行の高さは無効になります

5. IE6 および 7 では、親に境界線があり、そのマージン値が発生する可能性があります。子要素が無効になる

解決策: 親の haslayout をトリガーする

6. タグの互換性の問題について --------< 処理用の html5 タグでサポートされる js ファイルを導入します -->

7. IE6 では、4 つの疑似クラス l-v-h-a のみがサポートされ、a タグがサポートされます。

8. IE6 では、要素の各行の幅と親の合計幅の差が 3 ピクセルを超えます。最後の行のマージンは無効です

9. IE6 では、ブロックタグへの inline-block の追加はサポートされていません

10. IE6 では、ブロック要素に水平マージンと浮動小数点がある場合、水平マージンは 2 倍に拡大されます。

11 の高さ。 19px 未満の要素は 19px として扱われます。 解決策: overflow:hidden

12 を追加します。IE6 および 7 では、li 自体は浮動しませんが、 li 内のコンテンツは浮動しており、li の下にさらにいくつかのピクセル ギャップが存在します。 解決策:

1. li に float を追加します (li の下のギャップの問題と最小の高さの問題が共存する場合は、li に float を追加します) I l 2垂直配置を設定します

13、IE6 では、2 つのフローティング要素の間にコメントまたは埋め込み要素があり、要素と親レベルの差が 3px 未満です システム

14、IE6、7 では、親。フローティング要素のレベルはフローティングである必要はありません

Haslayout (トリガー)

要素は独自のコンテンツのコンテンツ、または親レベルのサイズを再計算します、幅高

触 (トリガー条件:)

表示：inline-block

height：（自動を除く）

フロート：（左または右）

posetety

width ：（ autoを除く任意の値）

、 "ポジショニング要素を包みます

16。 、子要素に相対位置がある場合、親のオーバーフローは機能しません。 解決策: 親にも相対位置を追加します。

17. 親の幅と高さが奇数の場合、要素の右 (下) は 1px の偏差になります

18。IE6、7、および 8 は不透明度をサポートしません

IE6 では、境界線を追加して filter:alpha(opacity=50); を使用します。 :none の入力タイプのフォームコントロールは無効です

解決策: 入力の背景をリセットします

IE6 では、入力タイプのフォーム コントロールがテキストを入力すると、背景も一緒に移動します。

20. IE6 では、子要素のマージンは -1px (親セットの境界線を超えます) です。) 親のアセンブリはサブ要素を自動的にラップします

解決策: 親要素に Positive を追加します: 関連する 100px; 10%{

width = 500px;

}}}}

スタイルコンテンツ: .box {アニメーション: アニメーション (名前) 3 秒 (時間) 1 秒 (遅延時間) 無限 (無限サイクル) オルタメイト (逆操作) }

transform: 変換

Z 軸方向 (左中右パーセンテージ %)

)

An r

Transform-Style: Preserve-3D (3D に追加する必要があります)

: スケール (x, y)

scale3d (x, y, z) スケーリング

回転 (DEG 角度)

回転 (X, Y, Z, DEG 角度) 回転

遷移属性:

遷移: プロパティ 持続時間 タイミング関数遅延 Th、高さ t t移行時間の経過

、ミリ秒

移行遅延 遅延時間

秒、ミリ秒

直線等速

やさしさ- 加速時

やさしさ- in-out は最初に加速し、減速します

Cubic-Bezier ; // ぼかし、ここでは 5 ピクセルです

-webkit-filter:sepia(0.5) // オーバーレイ ブラウン、値の範囲は 0 ～ 1、ここでは 50% を表します。茶色

-webkit-filter:brightness( 0.5); //明るさ、値の範囲は 0 ～ 1、明るさの 5 倍 (数値が 0 の場合は通常のスタイル、1 の場合は 100% の明るさを意味します)画像は表示されません)

-webkit-filter:hue -rotate(30deg); //色相 (色相リングに従って時計回りに回転します、赤-オレンジ-黄-黄-緑-緑-青-緑-)青-青-紫-紫-紫-赤-赤) これは黄色のフィルターを重ねたものです

-webkit-Filter: INVERT (1) // 色を反転します。0 ～ 1,0 の値の範囲は元の画像です。 、1 は完全なアンチカラー、0.5 はグレーです

-webkit-Filter: Saturate (Saturate (Saturate (Saturate 4); // 彩度、値の範囲は 0 ~*、0 は彩度なし、1 は元のマップです、値が大きいほど、彩度が大きくなります

-webkit -filter: contrat (2); // コントラスト、度数を取得、値の範囲は 0 ~*、0 はコントラストなし (グレー)、1 は元のマップ、値が大きいほど、コントラストが大きくなります

-webkit -filter: opacity (0.8); // 透明度、値の範囲 0 ~ 1,0 は完全に透明、1 は元の画像です

-webkit-filter:drop -shadow(17px 17px 20px black); //シャドウ

モバイル版のデフォルト

クリアスタイル:

B A {-webkit-Tap-Highlight-COLOR: RGBA (255,0,0,0);} クリックシャドウ

{-webkit-APPEARANCE: None;}

{-webkit-text-sizee -adjust:none;} 最小値フォント サイズ

最大幅の 540 ピクセルを超えてはなりません。 var oHtml=document.getElementsByTagName("html")[0] ;

var iWidth=document.documentElement.clientWidth;iWidth=iWidth& gt;540?540:iWidth;

oHtml.style.fontSize=iWidth/16+"px";

& lt; スクリプト & gt;

var = new mscroll ("wrap"); ！ "content =" width = device-width、intivily- minimut-scale = '+scale ='+iscale+'" /＆gt;'）; clientheight+"px";️ 1.

2.@import url("css/style.css" );

3. スタイルに直接書き込みます。 D @@Media ALL

{

.BOX {

: 100px;

}}}}

表示:フレックス == 表示: インラインフレックス

不フローティングと同様に、クックする必要なくマージンを設定できます。