html和css

W3Cの仕様

構造化された標準言語
スタイル標準言語
行動言語の標準化

1）ボックスモデル

一般的なボックスモデル（別名標準ボックスモデル）と、W3Cボックスモデルボックスのサイズ変更：コンテンツ・ボックスと（また、奇妙なボックスモデルとして知られている）IEのボックスモデルボックスサイズ：ボーダーボックス。
標準ボックスモデル：幅=内容（コンテンツ）+ボーダー+パディング+マージン
下部ボックスモデルIEバージョン：コンテンツの幅=幅（コンテンツ+ボーダー+パディング）+マージン

2）CSS3の新機能

しばしば尋ねます：

ワードラップのテキストの折り返し
どのようにテキストオーバーフロー指定された表示コンテナの境界を越え
テキストの装飾のテキストレンダリング
テキストの影のテキストの影
グラデーショングラデーション効果
トランジショントランジション効果遷移期間：遷移の継続時間
引張り、圧縮、回転、シフト、および他の変換を変換
アニメーションアニメーション
オーディオオーディオ
vadio動画
RGBAの透明性と

CSS3ボーダー

境界半径フィレット
ボックスシャドウボックスシャドウ
境界画像額縁

CSS3の背景

背景画像、背景画像
、背景サイズの背景サイズ
ロケーションエリア背景原点背景画像
、背景クリッププロパティの背景は、描画を開始するために指定された位置で切断されます

CSSセレクタと優先

！重要な
インラインスタイル
IDセレクタ
、クラスセレクタ属性セレクタ擬似クラスセレクタ
要素セレクタ関係擬似要素セレクタセレクタ
ワイルドカードセレクタ

CSSセレクタは何？どのような属性を継承することができますか？

CSSセレクタ：

IDセレクタ（#myid）
クラスセレクタ（.myclassname）
タグセレクタ（div要素、H1、p）は、
隣接セレクタ（H1 + P）
子セレクタ（UL> Li）と、
子孫セレクタ（のli a）に、
ワイルドカードセレクタ（*）、
属性セレクタ（[REL = "外部"]）、
擬似クラスセレクタ（：ホバー、リチウム：n番目の子）

継承プロパティ：

フォントサイズ、
フォントファミリ、
色

継承できませんスタイル：

ボーダー、
パディング、
マージン、
幅、
高さ

BFC

BFCは、ブロックレベルフォーマットコンテキストです。

BFCアプリケーション：
マージンをオーバーラップ防止する
内部フローティングクリアするために
、適応型2列のレイアウト
を防止サラウンドフォント

BFC生成条件：
ルート要素の
浮動小数点値はなしない
オーバーフローの値が表示されていない
ブロック、インライン、セル、表、表キャプションの表示値
の絶対の位置値、固定

技術の絵の統合のメリット

サーバー要求の数を減らします
読み込み速度を向上させるために、画像サイズを削減

垂直、水平センタリング要素

1。幅と高さを知っておく必要がありません

position：absolute；top:0；left:0；right:0；bottom:0;margin:auto;

2。私たちは、幅と高さを知っておく必要があります

position:absolute;top:50%;left:50%;margin-top:+/-50%(自身高度的50%)；margin-left:+/-50%;

3。柔軟なポーチ

display:flex;
align-items:center;
justify-conter:center;

4 .. 要素は、水平方向中央に配置され

margin:0 auto;

CSSの位置決めモード

position：static;//默认定位
position：relative;//相对定位 （参照物是自身,不脱离文档流）
position:absolute;//绝对定位 （参照物是父元素，遵循就近原则，寻找父元素及其爷爷元素中设置 position:relative 属性进行定位，脱离文档流；如果都不设置定位属性，就以根元素<html>进行定位。）
position:fixed;//固定定位 （参照物是可视区窗口，脱离文档流）
position:sticky;

レムと違いEM
「PX」のブラウザに変換されたすべてのすべてで、
REMは、フォントサイズの値のHTMLに基づいています。16px = 1 REM
親要素の値に基づいて、EMフォントサイズ。
クリアフロート
法：クリア：両方

clear:both;

方法2：ユニバーサルクリアフロート

	.clean{
		content:'.';
		height:0;
		display:block;
		clear:both;
		overflow:hiddden;
		visibility:hidden;
	}

ブラウザのカーネル

トライデントIEブラウザ
GeckoのFirefoxブラウザ
Webkitのクロムサファリ
ブリンククロームオペラ

携帯端末1つの問題ピクセル

一般に、PCブラウザ装置の画素比率が1に等しい、1つのDPRのCSSピクセル物理ピクセルに等しい。ただし、網膜画面、DPR一般に2又は3であり、画素が物理CSSに等しくありませんピクセルなので、実際の設計アートワークの粗たくさんインチ

擬似要素+スケール

.box{
	width:100%;
	height:1px;
	margin:20px 0;
	position:relative;
}
.box::after{
	content:'';
	position:absolute;
	bottom:0;
	width:100%;
	height:1px;
	transform:scaleY(0.5);
	transform-origin:0 0;
	background:red;
}

<div class="box"><div>

ボーダー-画像

div{
	border-width:1px 0px;
	-webkit-border-image:url(xxx.png) 2 0 stretch;
	border-image:url(xxx.png) 2 0 stretch;
}

一般的なレイアウト

聖杯のレイアウト

body{
    min-width: 550px;
}
#container{
    padding-left: 200px;
    padding-right: 150px;
}
#container .column{
    float: left;
}
#center{
    width: 100%;
}
#left{
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
}
#right{
    width: 150px;
    margin-right: -150px;
}

<div id="container">
    <div id="center" class="column">center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>

ここに画像を挿入説明
2.フライングウイング

body {
    min-width: 500px;
}
#container {
    width: 100%;
}
.column {
    float: left;
}
#center {
    margin-left: 200px;
    margin-right: 150px; 
}
#left {
    width: 200px;
    margin-left: -100%;
}
#right {
    width: 150px;
    margin-left: -150px;
}

<div id="container" class="column">
    <div id="center">center</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>

リンクと@importの違い

。所属違い
@import CSSの構文規則は、スタイルシートを導入するだけで効果が提供され、リンクがHTMLタグによって提供されるだけでなく、CSSファイルをロードするにもRSSを定義することができ、相対接続プロパティなど
のBの区別のロード順。
ページがロードされますとき、ラベルが同時に組み込まCSSがロードされているリンク、ページの後にロードされた@import導入CSSがロードされます。
。C互換差
@importのみCSS2.1の構文で、それだけで+ IE5に識別することができ、ラベルなどのリンクHTML要素、互換性の問題はありません。
d.DOM差制御性
JS DOM、スタイルを変更するために挿入されたリンクタグによって操作することができ、この方法は、文書に基づいているので、DOMは@importスタイルに挿入することができません。