HTMLメモ(五)CSSボックスモデル
標準ボックスモデル
W 3 Cケースモデル
ボックスモデルは、コンテンツ(content)、パディング(padding)、ボーダー(border)、ボーダー(margin)からなる、実際の幅=左境界+左境界+左充填+コンテンツ幅+右充填+右境界+右境界1.外側距離margin
1.1、片側設定
margin-top/right/bottom/left: value;
valueは画素,%,auto,負の値の外側距離の略記をとることができる
.margin:value( ) ;
.margin: value( ) value( );
.margin: value( ) value( ) value( );
.margin: value( ) value( ) value( ) value( );
1.2、外距合併 2つの垂直外距が出会うと、彼らは1つの外距を形成し、外距合併となる.マージ後の外距離の高さは、マージが発生した外距離の2つの高さのうちの大きいものに等しい.
marginは要素の外側距離の幅を設定します.これにはいくつかの特徴があります.
2、内側の余白padding
2.1、片側設定padding-top/right/bottom/left:value;valueはピクセル、パーセントの値をとることができますが、負の数は指定できません.内側余白のスケッチ
padding:value( ) ;
padding: value( ) value( );
padding: value( ) value( ) value( );
padding: value( ) value( ) value( ) value( );
3、枠線border
3つの要素を書くときは、一般的に次の順序で書きます.
border-width:; 3px。
border-style:; none。 dotted| solid| double| dashed。
border-color:; 。
：border： （border: 1px solid red;）
怪異箱モデル
IEのボックスモデル 標準のボックスと比較して、IEのボックスモデルの幅はborderとpadingを含む.
1、box-sizing現在の要素が使用するボックスモデルを指定します.属性値:.content-box(標準)paddingとborderはwidthとheightに含まれず、要素の実際のサイズは幅が広い+border+paddingであり、これは標準モードのボックスモデルである.border-box(奇妙な)paddingとborderは定義されたwidthとheightに含まれており、要素の実際のサイズはあなたのためにどれだけの幅を定義したか、どれだけの幅を定義しています.このアトリビュートは、怪異モードのボックスモデルです.
伸縮(弾性)ボックスモデルflexbox
伸縮ボックスモデルは、他のボックスにおけるボックスの分布を決定し、使用可能な空間をどのように処理するかを決定する弾性ボックスモデルとも呼ばれる.このモデルを使用すると、アダプティブブラウザウィンドウのフローレイアウトを簡単に作成できます.(チェン一峰のフレキシブルボックスチュートリアルを参照) フレキシブルボックスモデルを開くには、CSS 3でdisplayに新しく追加された値タイプであるため、displayの属性値flexを設定するだけです.目的:ブラウザウィンドウが変化すると、ボックスのサイズが変化します.フレキシブルボックスモデルを設定すると、float、clear、vertical-alignはflexでは機能しません.
1.flexboxの基本構造:
.box{ display: flex;} // ，
.item1{ flex-grow: 1; background:pink} flex-grow 1
.item2{ flex-grow: 2; background:orange} 2
.item3{ flex-grow: 3; background:red} 3
1
2
3
2、常用属性display:flex;flexコンテナの新しいエラストマーボックスを定義します.親要素はエラストマーボックスで、子要素は自動的に水平に配置されます.
flex-direction: row（ ） | row-reverse | column | column-reverse;
flex-directionプロパティは、主軸の方向(すなわち、項目の配列方向)を左から右、右から左、上から下、下から上に決定します.
flex-wrap: nowrap（ ） | wrap | wrap-reverse;
flex-wrapプロパティは、1つの軸が並べられない場合、どのように改行するかを定義します.改行しないで、上から下まで改行して、第2種類の改行は逆さまにします
flex-flow: ||
flex-flowプロパティはflex-directionプロパティとflex-wrapプロパティの略記形式で、デフォルト値はrow nowrapです
justify-content: flex-start（ ）| flex-end |center|space-between|space-around;
justify-contentプロパティは、フレキシブルボックス要素の主軸(flex-directionの方向)方向の位置合わせを定義します.
align-items :stretch( , ( )， )|center|flex-start|flex-end| baseline;
align-itemsプロパティは、flexコンテナの現在の行の横軸(主軸以外)方向にflexサブアイテムの位置合わせを定義します.コンテナ、中心位置合わせ、ヘッド位置合わせ、テール位置合わせ、最初の行のテキストをベースラインに位置合わせします.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-contentプロパティは、複数の軸の位置合わせを定義します.アイテムに軸が1本しかない場合は、このアトリビュートは機能しません.
3、サブエレメントの共通属性
order:number;
orderプロパティは、プロジェクトの並べ替え順序を定義します.数値が小さいほど、配置が前になり、デフォルトは0です.
flex-grow: number;
， 。 0。
flex-growプロパティは、プロジェクトの拡大スケールを定義します.デフォルトは0です.つまり、空き領域がある場合も拡大しません.
flex-shrink: number
flex-shrinkプロパティは、プロジェクトの縮小スケールを定義します.デフォルトは1です.つまり、スペースが不足すると、プロジェクトが縮小します.
flex-basis: | auto;
flex-basisプロパティは、余分なスペースを割り当てる前にプロジェクトが占める主軸スペース(main size)を定義します.ブラウザはこのプロパティに基づいて、主軸に余分なスペースがあるかどうかを計算します.デフォルト値はauto、すなわちプロジェクトの本来のサイズです.
flex: none | [ ? || ]
flexプロパティはflex-grow、flex-shrink、flex-basisの略記で、デフォルトは0 1 autoです.次の2つの属性はオプションです
align-self: auto | flex-start | flex-end | center | baseline | stretch;
align-selfプロパティを使用すると、align-itemsプロパティを上書きできる単一のアイテムとは異なる位置合わせが可能になります.デフォルト値はautoで、親要素のalign-items属性を継承し、親要素がない場合stretchと同等です.
ブラウザカーネルおよびそのプレフィックス
1.Geckoカーネルの接頭辞は-moz-火狐ブラウザ2.Webkitカーネル国内の多くのブラウザでも、360極速、世界の窓、チーターなど、webkitコアが使用されています.3.Tridentカーネル プレフィックス-ms-IEカーネルとも呼ばれる4.Prestoカーネル接頭辞-o-operaのみOperaを採用Google ChromeのBlink 5に変更しました.BlinkカーネルBlinkはGoogleとOpera Softwareが開発したブラウザのレイアウトエンジンです
cssでの継承
継承の限界cssでは,継承は非常に自然な行為であるが,継承にも限界がある.一部のプロパティは継承できません.borderプロパティは枠線を設定するために使用され、継承性がありません.paddingやmarginも継承できません.継承できる共通属性color,cursor,font-family,font-size,font-style,font-weight,font,letter-spacing,line-height,list-style,text-align,text-indent