1.ブラウザカーネル？
1. IEブラウザカーネル：Tridentカーネル（Trident）、IEカーネル
2. Chromeブラウザカーネル：総称してChromiumカーネルまたはChromeカーネル、以前はWebkitカーネル、現在はBlinkカーネル;
3. Firefoxブラウザカーネル：Geckoカーネル、通称Firefoxカーネル;
4。Safariブラウザーカーネル：Webkitカーネル;
5. Operaブラウザーカーネル：元々は独自のPrestoカーネル、後にWebkit、現在はBlinkカーネル;
6. 360ブラウザー、チーターブラウザーカーネル：IE + Chromeデュアルコア;
7。 Sogou、Aoyou、QQブラウザーカーネル：Trident（互換モード）+ Webkit（高速モード）;
8. Baiduブラウザー、Window of the Worldカーネル：IEカーネル;
9、2345ブラウザーカーネル：以前はIEコアです。 IE + Chromeデュアルコアでもあります
2.ボックスモデル？
コンテンツ（コンテンツ）+パディング（内側のマージン）+境界線（境界線）+マージン（外側のマージン）
3.要素タイプの分類
（1）ブロック要素
A：ブロック要素はWebページにブロックの形で表示されます。いわゆるブロックとは、要素が長方形の領域として表示されることを意味します
。B：デフォルトでは、ブロック要素は1行を占めます。素人の用語では、2つの隣接するブロック要素は並べて表示されない現象が発生します。デフォルトでは、ブロック要素は上から下に順番に配置されます。
C：ブロック要素は独自の幅と高さを定義できます。
D：ブロック要素は通常、他の要素のコンテナとして使用され、他のインライン要素や他のブロック要素を含めることができます。このコンテナをボックスと比較できます。
*ネストルール：p> p（間違った）p> div（間違った）スパン> p（間違った）div> p（正しい）p> span（正しい）
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td 表格及行-单元格
pre
-（2）行内元素（内联元素）：
A：インライン要素の表現は常に1行に1つずつ表示されます
。B：インライン要素には独自の形状がなく、幅と高さを定義できません。表示される幅と高さは、高さと含まれるコンテンツの幅。確かに、その最小のコンテンツ単位も長方形の形状を示します
。C：インライン要素は、パディング、境界線、マージン、背景、その他の属性など、ボックスモデルの基本的なルールにも準拠します。定義されていますが、個々の属性を正しく表示できません;（padding-top / bottom; margin-top / bottom;）
a –超链接（锚点）
span - 常用内联容器，定义文本内区块
br - 换行
i - 斜体
em - 强调
label - 表单标签
b - 粗体(不推荐)
strong - 粗体强调
sub - 下标
sup - 上标
u - 下划线
（3）インラインブロック要素（css2.1で追加）：
img - 图片
input - 输入框
textarea - 多行文本输入框
select button
（4）可変要素：
コンテキストに応じて、要素がブロック要素であるかインライン要素であるかを判別する必要があります。
4.フレキシブルボックス
display:flex
主轴对齐方式：justify-content:
flex-start
flex-end
center
space-between
space-around
交叉轴对齐方向：align-items:
flex-start
flex-end
center
baseline
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
定义一条轴线排不下，如何换行：flex-wrap:
nowrap:默认不换行
wrap:换行，第一行在上方
wrap-reverse:换行，第一行在下方
定义主轴方向：flex-direction:
row、row-reverse
column、column-reverse
flex-flow:flex-wrap与flex-direction的缩写属性
flex-flow:<flex-direction> <flex-wrap>
默认：row nowrap
flexのアイテムプロパティは次のとおりです。
align-self:允许单个项目与其他项目有不同的对齐方式，能覆盖align-items属性
默认值：auto,继承父元素的align-items，
flex-start/flex-end/center/baseline/strech
order:默认为0，数字越大越往后排，支持负数
flex：1 1 10%/px
(三项分别是：flex-grow、flex-shrink、flex-basis)
flex-grow:规定项目相对于其他灵活的项目进行扩展的量（默认为0.有空间也不放大）
flex-shrink:项目默认为1，值为0不压缩
flex-basis:在分配多余空间之前，项目占据的主轴空间，计算主轴是否有多余的空间，默认值为auto，即项目的本来大小，还可以设置px,则项目占据固定空间
默认属为：flex:0,1,auto
一般的に使用される：flex：1
定义多根轴线的对齐方式：align-content:
flex-start
flex-end
center
space-between
space-around
strech
flex-wrap: wrap;
align-content: flex-start;
flex-wrap: wrap;
align-content: flex-end;
flex-wrap: wrap;
align-content: center;
flex-wrap: wrap;
align-content: space-around;
flex-wrap: wrap;
align-content: space-between;
flex-wrap: wrap;
align-content: stretch;
/* 项目不设置高 */
5.マージンマージの問題
説明：上下の位置の関係にある2つのdivコンテナー、margin-topとmargin-bottomがそれぞれ設定されている場合、2つの属性の値が同じである場合、2つのコンテナー間の距離はこの値になります。 2つの属性の値が異なります。大きい方の値が2つのコンテナ間の距離として使用されます。
解決策：
（1）要素の1つに外側のマージンを設定します
（2）要素の外層に要素を設定します、およびセットオーバーフロー：親要素に対して非表示
<style>
div{
width: 30px;
height: 30px;
background:orangered;
}
.box1{
margin-bottom: 10px;
}
.box2{
margin-top: 20px;
}
h1{
overflow: hidden;
}
</style>
<body>
<h1>
<div class="box1"></div>
</h1>
<div class="box2"></div>
</body>
説明：親ボックスモデルがパディングまたは境界線を追加しない場合、内部ドキュメントフローの最初の子要素のマージントップが親要素をプルダウンします。つまり、外側のマージンが親の外側のマージンに転送されます。要素。
溶液は：
（1）追加オーバーフロー隠された
親要素（2）親要素に境界線を追加する
（3）親要素にパディングを追加
（4）絶対位置とフロートを追加します
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background: rgb(238, 177, 155);
/* border: 1px solid #fff; */
/* overflow: hidden; */
/* float: left; */
position: absolute;
}
.box div{
width: 30px;
height: 30px;
background: palegoldenrod;
margin-top: 20px;
}
</style>
<body>
<div class="box">
<div></div>
</div>
</body>
6.マージン崩壊の問題（クリアフロート）：
説明：親要素が高さを設定しない場合、子要素によって自動的に開かれますが、子要素はフローティング後にレイアウトフローを離れ、場所を占有せず、親要素の高さが消えます（ 2階のフローティング要素と1階の親要素）。
（上下の要素、フローティング効果がある場合は、clear：left / right / botnを直接使用します。clearは、要素がフローティング要素の影響を受けないようにするためです）
解決策：
（1）親要素に固定の高さを設定します（適応性なし）
（2）親要素のフローティング（レイアウト全体に影響します）
（3）オーバーフロー：非表示のサブ要素が影響します
（4）表示：インラインブロック（次の要素Xに影響します）
（5）空を設定しますラベル、非推奨、追加のラベルが追加されます
<div class="box">
<div></div>
<div style="clear:both"></div>
</div>
（6）疑似クラスの後：
.clearfix:after{
content: '';
display: block;
height: 0;
width: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
7.BFC仕様
書式設定コンテキスト
これは、W3CCSS2.1仕様の概念です。これはページ上のレンダリング領域であり、子要素の配置方法、および他の要素との関係と相互作用を決定する一連のレンダリングルールがあります。
BFCは、Block Formatting Contexts（ブロックレベルのフォーマットコンテキスト）の略です。
上記のいずれかの仕様に属します。BFC特性を持つ要素は、独立した独立したコンテナと見なすことができます。コンテナ内の要素はレイアウトの外側要素に影響を与えず、BFCには通常のコンテナにはないいくつかの特性があります。
トリガーBFC：
-
浮動要素：なし以外の浮動値
-
絶対位置の要素：位置（絶対、固定）注：相対は許可されていません
-
表示するインラインブロック、テーブルセル、フレックス
-
表示以外のオーバーフロー値（非表示、自動、スクロール）
BFCレイアウトルール：
-
内箱は縦方向に次々と配置されます。
-
ボックスの垂直距離はマージンによって決まります。同じBFCに属する2つの隣接するボックスのマージンはオーバーラップします。
-
BFCはページ上の分離された独立したコンテナであり、コンテナ内の子要素は外部要素に影響を与えません。逆もまた真です。
-
BFCの高さを計算するとき、浮動要素も計算に関与します。したがって、BFCの機能の1つは、フローティング要素が走り回るのを防ぐことではありません。
応用：
マージンのマージとマージンの崩壊を解決する
8.要素の水平および垂直のセンタリングを実現します。
（1）センタリングを実現するためのポジショニング：
<div class="box1">
<div class="box2"></div>
</div>
.box1{
width: 300px;
height: 300px;
position: relative;
background: rosybrown;
}
.box2{
width: 100px;
height: 100px;
position: absolute;
left:50%;
top:50%;
margin-top:-50px ;
margin-left: -50px;
background:royalblue;
}
（2）子要素：常に中央に固定
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width: 100px;
height: 100px;
background: salmon;
（未完成...）