1.ラベルのステータス擬似クラス（リンク）
a:link{ // 链接未访问状态
color: aqua;
}
a:visited{ // 链接访问过后
color: brown;
}
a:hover{ // 链接悬停状态
color:yellow;
}
a:active{ // 链接的激活状态（鼠标按下）
color: pink;
}
hover不仅可以表示链接的悬停，其他的标签也可以使用
第二に、ボックスモデル
- cssでは、各ラベルは、コンテンツ、内側の余白（内側のパディング）、境界線、外側の余白の4層構造のボックスと見なされます。
1.content 尺寸=width+height
2.padding 盒子的边缘和内容之间的距离,这段距离会显示背景，不会显示内容
3.border 边框是指盒子边缘的线条
4.margin 是指盒子和相邻元素或者父元素之间的距离
padding-top/bottom/left/right
boder-top/bottom/left/right
margin-top/bottom/left/right
margin:0 auto; /*块元素水平居中*/
边框简写属性 border:border-width border-style border-color
border:30px solid black;
border-right: 0; /*去掉边框两种写法*/
border-left: none;
内边距：
padding:10px; 上下左右四个方向内边距相同
padding:10px 20px; 上下 左右
padding:10px 20px 30px; 上 左右 下
padding:10px 20px 30px 40px; 上 右 下 左
边框：
border-width:2px; 设置边框宽度
border-style:solid;设置边框风格
solid/dashed/dotted/double 实/虚/点/双实线
border-color:red; 设置边框颜色
border-top-width: 2px; 设置上边框的宽度
border-top-style: solid; 设置上边框的风格
border-top-color: yellow; 设置上边框的颜色
bottom、left、right三个方向和top同理
外边距：
margin:10px; 上下左右四个方向外边距相同
margin:10px 20px; 上下 左右
margin:10px 20px 30px; 上 左右 下
margin:10px 20px 30px 40px; 上 右 下 左
margin:0 auto; 水平居中
* margin可以设置负值，可以通过负值减少元素的占位，比如margin-top为负值（-50px），元素垂直方向会往上移动，并且减少50px的占位
第三に、垂直マージンマージの問題
1.垂直マージン-トップ転送の問題（親子関係）
当父元素没有padding\border\float\position\overflow时，给子元素设置margin-top会把父元素一块儿带下来即父元素也会有margin-top
解决:
1. 给父元素添加1px的上padding或者border,子元素margin-top少1px
2. 可以用父元素的padding-top实现同样式的效果
2.隣接する要素のマージンがマージされます（兄弟関係）
两同级标签，上一个设置margin-bottom:40px,下一个设置margin-top:60px，最后两者之间的外边距会合并为数值较大的那个值(60px)，不是数值相加(100px)
4、ボックス型変換
display:block; 设置成块级标签
display:inline; 设置成行内标签
display:inline-block; 设置成行内块级标签
display:none; 隐藏元素,页面上不显示也不占位
5.行のブロックと下の余分な空白の間の空白の距離（水平方向と垂直方向に空白があります）
解决方案：
1. 给父元素设置font-size:0;line-height:0;
2. 给子元素重新设置font-size和line-height
CSSの6、3つの主要な機能
1.スタッカビリティ
- スタイルの競合を処理するブラウザの機能
- 最後の定義（近接の原則）に従い、スタイルが競合せず、カスケードせず、スタイルが競合します
2.継承
- 子要素は、親が設定されている限り、テキストやフォント関連など、親要素の特定のスタイルを使用できます。子要素のデフォルト値は親と同じです。
- 継承を適切に使用すると、コードの複雑さを軽減できます
以下属性默认继承：
text-align
text-indent
text-decoration
color
font-size
font-family
font-style
font-weight
line-height
letter-spacing
word-spacing
其他属性通过inherit这个值可以实现手动继承
width:inherit;
border:inherit;
注意： 块级元素width不是默认继承，背景颜色background-color默认是透明也不是继承
注意： a标签的颜色和文本修饰默认不会继承，需要选中a标签才能修改
3.優先順位
- インラインスタイルが最優先
- 基本セレクターの重みが大きいほど、優先度が高くなります。
| セレクタ | 重量 |
|---|---|
| *（ワイルドカード） | 0 |
| tagName（タグセレクター） | 1 |
| .class（クラスセレクター）\ pseudoclass | 10 |
| #id（IDセレクター） | 100 |
| インラインスタイル | 1000 |
- ほとんどの場合、複合セレクターの重みは、複合セレクターを構成する基本セレクターの重みに追加されます（特別な場合：グループセレクターは単一の計算であり、重複しません）
- セレクターの重みは同じであり、後の定義が有効になります
后代 .box div (10 + 1 = 11)
子代 .box>div (10 + 1 = 11)
群组 h1,.box 不会相加，单个计算 h1 1 .box 10
交集 div.box (1 + 10 = 11)
特殊情况：!important 命令可以把样式优先级提升最高，比行内样式优先级更大，不推荐使用加入到代码中。
7、垂直方向の配置
vertical-align
baseline 默认值，基线对齐
middle 中线对齐
top 顶部对齐
bottom 底部对齐
1.画像とテキストの中心線を揃え、画像のvertical-align：middleを設定します。
css:
.box img{
width:150px;
vertical-align: middle;
}
html:
<div class="box">
文字pgP
<img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top-e3b63a0b1b.png" alt="">
</div>
2.行の要素の中央の行を揃え、行の2つの要素にvertical-align：middleを設定します。
css：
.span1,.span2{
background-color: red;
vertical-align: middle;
}
.span1{
font-size: 30px;
}
html:
<span class="span1">span1</span>
<span class="span2">span2</span>
3.インラインブロック要素の中心線を揃え、両方のインラインブロックにvertical-align：middleを設定します。
css：
.span3,.span4{
display: inline-block;
width: 100px;
height: 100px;
background-color: yellow;
vertical-align: middle;
}
html:
<span class="span3">span3</span>
<span class="span4">span4 <br> span44</span>
8.フローティング
- レイアウトモード：ドキュメントフロー、フローティングレイアウト、レイヤーレイアウト（ポジショニングレイアウト）
- ドキュメントフロー：要素は、上から下にブロック、左から右に線で、独自の属性に従ってページ上に配置されます。
1.フローティング左右のフロット：左/右
| フロート：左 | 右フロート：右 |
|---|---|
| 左に浮かぶ要素は、親要素または隣接する浮き要素の端に当たるまで、可能な限り左に移動します。 | 右に浮かぶ要素は、親要素または隣接する浮き要素の端に当たるまで、可能な限り右に移動します。 |
| 場所を占有せずにドキュメントフローから抜け出す | 場所を占有せずにドキュメントフローから抜け出す |
| 複数の左フローティング要素が左から右に順番に配置されています | 複数の右フローティング要素が右から左に順番に配置されています |
2.フローティングフロートをキャンセルします：なし
-
ドキュメントフロープレースホルダーに戻る
-
補足：フローティング要素がドキュメントフローを離れた後、ドキュメントフロー内の要素を上書きできますが、テキスト、画像、フォーム要素は上書きされず、フローティング要素の周囲に配置されます。
ナイン、クリアフローティング
- フローティング要素がドキュメントフローを離れた後、親の高さをサポートできないという問題を解決します
| ソリューション（4種類） |
|---|
| 高さ属性を親要素に設定すると、コードのスケーラビリティが低下します（保守が不便） |
| オーバーフロー：非表示を設定します。親要素の場合、オーバーフロー：非表示;自体が要素のオーバーフロー部分を非表示にする効果があるため、使用できない場合があります |
| 追加のタグメソッド：すべてのフローティング要素の後に非フローティング要素を追加し、それにclear：both属性を追加します。構造内の冗長コードが増加します。 |
| 疑似要素（追加のタグメソッドと同じ原則）を使用してタグを追加します。使用法：スタイルシートで.clearfixクラスを事前定義し、クリアする必要のあるタグ（すべてのフローティング要素の親）に追加します。 clearfixクラス名 |
样式表中预先定义好.clearfix类--推荐使用
.clearfix::after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom:1;
}
10、overflowは、要素コンテンツのオーバーフローを表示する方法を指定します
overflow:visible; 溢出显示（默认值）
hidden; 溢出隐藏，多出的部分被直接截断
scroll; 始终显示滚动条区域
auto; 内容溢出显示滚动条，内容不溢出就不显示滚动条
11.疑似要素
使用シナリオ：通常、パーツにスタイル処理を追加するために使用されます
- :: afterは、要素の最後（内部）に疑似要素を追加します
- :: beforeは、要素の先頭（内部）に疑似要素を追加します
12.背景属性
1.背景属性の省略形
- 背景：カラー画像の繰り返し位置;
- 省略属性の各値の順番を調整したり、設定不要の属性を省略したりできます。
background:blue url("logo.png") no-repeat center;
背景颜色
background-color:#000;
background-color:transparent; 透明
背景图片
background-image:url("...");
背景重复
background-repeat: repeat 默认值，水平和垂直都铺满
repeat-x 水平重复
repeat-y 垂直重复
no-repeat 不重复
背景定位
background-position: 水平 垂直;
left/center/right top/center/bottom
x-length y-length ,设px, X正右移负左移， y正数下移负上移
x-% y-% ,设%,X 0%-最左边,100%-最右边,50%表-中间，Y 0%-顶部，100%-底部，50%-中间
背景定位属性值，如果只设置一个方向，表示另一个方向默认位center
2.ウェブページの写真と背景の写真の違い
| ウェブページの画像 | 背景画像 |
|---|---|
| Webコンテンツに関連して、imgタグを使用してより重要な画像を追加する必要があります | それはコンテンツとは何の関係もありません、ウェブページの装飾的なパターンとして背景画像を使用してください |
| 広告画像、商品画像、ロゴ画像など... | たとえば、テクスチャ、小さな装飾アイコン...背景画像は要素のサイズを保持できません |