CSS基礎特別講座(初期化、インライン、ブロックレベル)

🌷 CSS適用手順

1.全体レイアウト2。background-colorを使用して可視化チェック(inline要素かblock-level要素かを確認)3を行います。既定のスタイル(レイアウト-幅など)を設定して、スペース4を解放します。要素、初期化タイプセット(ブラウザプリファレンスを確認し、fe 12>style agent sheetで処理)5。initial, inherit, margin:0, padding:0 6. 設計CSSの作成

🚩 css構成-ユーザーセレクタ{property:value;}

🚩 常に左揃えに設定されている理由:言語タグの方向(国ごとに同じ)

🚩 body,h 1,liなど初期化されたブラウザごとに異なるuser磁石sheetがあり,初期化により統一設計が必要である

body,ul{
   margin: intial; /*margin=0*/
   padding 0; 
   
   
 h1, p{
 	margin: 0
    font-size: inherit;
    font-weight: inherit;
}

li{
    list-style-type: none;
}

-widthのinitialはauto、親幅基準満パラメータ-height initial(auto)はサブエレメント、パラメータ>height設定は主にautoまたは未設定

💙 width=100%およびwidth=auto共通点)は、親のサイズを満たすために使用されます。区別)marginが設定されている場合、親ラベル/autoを100%スキップして親ラベルに隠す

💙 絶対幅=auto;推奨される使用方法

🌷 inline element

-ベースラインの上に座り、タグ内の文字長の領域-<span>、<a>、<img>、<em>、<i、<-width、height属性の影響のみを占有し、x-左右に移動(Xを上下に移動)する

❗imgとcssの背景-画像の違いimgは表現したい内容ですが、背景-画像は装飾や装飾にのみ使用されます

❗行内要素中央:{text-align:center}

❗親ラベル上のtext-align:centerは、h 1、pが直接移動するためではなく、h 1、p行内の要素内の行のため、中央>実際に移動するにはmarginを使用する必要があります。

🌷 block-level element

-幅がいっぱい(width=100%)-<div>、<section>、<h 1>、<p>、<li>

100 block-level要素中央揃え{margin:0 auto}❗例外]blocktagでは<p>はサブアイテムであり、行内ラベルのみを持つことができます。

🌷 inline -block

-block-levelは、-block要素とinline要素の性質を持つ1行(テキスト行ベース)として表されます。

🌼 CSS属性の適用順序（具体的な説明）

*スコアと同じ原理

1.特異度を以下の基準で採点する。(金、銀、銅)

typeセレクタ:(0,0,1)class:(0,1,0)id(1,0,0)

2.同点の場合は、より低い属性値に適用されます。

2-1. ブラウザがcss属性を上から下へ読み出す基本原理

10071 style=""htmlタグ内で直接設定!重要なのはcssvalue値の横に書かれた強力なコマンドです。必要でない限り、書かないでください。

📗 borderを使用した多機能設計サイト