第2週のまとめ
2021.1.18
- Webページレイアウトの核となる本質は次のとおりです。cssスタイルを使用してボックスを配置します。ボックスモデルの4つのコンポーネント：境界線、コンテンツ、パディング、マージン
- 境界線：注（境界線はボックスの実際のサイズに影響し、境界線の幅と高さが追加されます）
/* 边框宽度 */
border-width: 5px;
/* 边框样式：实线虚线点线 */
border-style: solid;
border-style: dashed;
border-style: dotted;
border-color: pink;
/* 边框的复合写法,顺序没有关系 */
border: 5px solid pink;
/* 上下左右边框 */
border-top: 1px solid red;
border-bottom: 10px dashed #000;
border-left: 5px solid #000;
border-right: 3px dotted #ff0066;
/* 合理利用层叠性，冲突的属性注意就近原则 */
border: 1px solid blue;
border-top: 1px solid red;
テーブルの細い境界線：
th {
border: 3px solid pink;
/* 合并表格内部单元格叠合的边框 */
border-collapse: collapse;
font-size: 16px;
/* 内容全部居中对齐 */
text-align: center;
}
- 内側の余白のパディング：注（ボックスに幅と高さが指定されている場合、内側の余白と内側の余白を設定するとボックスがサポートされるため、ボックスのサイズを変更しないようにするには、幅と高さのみを変更できます）
padding-top: 10px;
padding-left: 10px;
/* padding的简写属性 */
/* 一个数代表上下左右 */
padding: 10px;
/* 两个数代表上下、左右 */
padding: 10px 5px;
/* 三个数代表上、左右、下 */
padding: 10px 5px 20px;
/* 四个数代表上、右、下、左顺时针 */
padding: 10px 5px 20px 30px;
- パディングはボックスを開きません：
（1）幅/高さが指定されていない場合、パディングが設定されていると幅/高さは開かれません。
（2）息子の幅が設定されておらず、親要素はデフォルトで継承されます。マージンはボックスを開きません。
注：ブロックラベルは親の幅のみを継承し、高さは継承しません。 - マージン：
.two {
margin: 20px;
margin:10px 20px;
margin: 10px 20px 10px;
margin: 10px 20px 30px 10px;
}
- マージンの組み合わせ：
（1）隣接するブロック要素の垂直マージンの組み合わせ：2つの隣接するブロック要素が出会う場合、マージンは下部と上部の重ね合わせではなく、大きい方のブロック要素になります。
解決策：Aブロックプラスのみを与えるようにしてください。マージン
（2）ネストされたブロック要素の親の崩壊の問題（ネストされたブロック要素の不正行為の問題）：ブロック要素がネストされている場合、親ボックスと子ボックスには上部マージンがあるため、親ボックスと子ボックスはより大きく使用されますマージン（親ボックスが折りたたまれ、親と子の上端が同じ高さになる）と、親ボックス内にマージンを持つ子ボックスの結果に到達しない
解決策：（1は親の境界線を設定します（2親の内側マージンを定義します（3親のオーバーフローを追加：非表示
.father {
width: 400px;
height: 400px;
background-color: pink;
margin-top: 50px;
/* 父级元素加边框或者内边距或者overflow:hidden，会避免塌陷 */
/* border:1px solid transparent; */
/* padding: 1px; */
overflow: hidden;
}
- 内側と外側の余白をクリアします。
* {
padding: 0;
margin: 0;
}
2021.1.19
- 丸みを帯びた境界線：
.radius {
background-color: red;
width: 300px;
height: 200px;
/* 四个值表示左上、右上、右下、左下顺时针顺序 */
/* border-radius: 10px 20px 30px 10px;
/* 两个值表示对角相等，左上右下、右上左下 */
/* border-radius: 10px 20px ; */
/* 三个值表示左上、右上左下、右下 */
/* border-radius: 10px 20px 30px; */
/* 指定方位的写法，指哪儿打哪儿 注意top/bottom在前left/right在后 */
border-top-left-radius: 15px;
}
- ボックスシャドウ：
div {
width: 300px;
height: 100px;
background-color: pink;
/* 盒子阴影：五个值分别指的是：水平阴影位置（可正可负）、垂直阴影位置（可正可负）、模糊程度、阴影大小、阴影颜色、（设置内阴影inset，默认是外阴影且不可写outset否则无效） */
/* box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3); */
/* 文字阴影：四个值分别指的是：水平、垂直阴影位置（可正可负）、模糊程度、颜色 */
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
- フローティング：
（1）従来のWebページの3つのレイアウト方法：標準フロー（タグのデフォルトの配置）、フローティング、および配置。
（2）フローティングの典型的なアプリケーション：複数のブロック要素が1行に表示されます（インラインブロック要素に変換できますが、間隔は制御できません）
（3）ネットワークレイアウトの最初のルール：複数のブロック要素が垂直に配置されます標準フローを検索し、フロートを検索するために水平に配置
（4）複数のボックスが左にフロートまたはフロートしている場合、複数のボックスのエッジが一緒に表示されます。左右のフロートを別々に追加すると、1つが左になり、もう1つは正しいです（画面の境界に遭遇すると停止します） - フローティング機能：
（1）適応外：フローティング要素は標準フローから分離されて上層にフロートし、元の位置は保持されなくなり、他の標準フロー要素と一緒にフロートできます
（2）複数のボックスはfloatに設定すると、1行で上揃えが表示され、親の幅が十分ではありません。新しい行表示を開始します。
（3）フローティングの要素には、インラインブロック要素の特性があります（幅と高さ、1行の表示）。ボックスには幅と高さが設定されておらず、デフォルトでは親と同じ幅になりますが、フロートを追加した後の幅はコンテンツの決定によって異なります。
特に、フローティングボックスは通常、調整のために親の標準ストリームボックスに配置されます。ブラウザページでの位置
2021.1.20
- フローティングポイント：
（1）フローティングボックスの機能：フローティングボックスは後続の標準フローにのみ影響します
（2）兄弟要素。一方のフロートともう一方のフロートもフロートに設定する必要があります。そうしないと面倒になります。 - クリアフローティング：親ボックスは一般的に高さを与えるのに不便です。内容によっては子ボックスを開くのが最善です。ただし、フローティング子ボックスを標準ストリームの親ボックスに配置する場合は、原則としてフローティングボックスを使用します。は標準ストリームのスペースを占有しないため、この時点で親ボックスの高さは0になり
、フロートをクリアするための後続のレイアウト（1）条件に影響します。a
。標準フローの親には高さがありません
b。子ボックスがフローティング
c。後続のレイアウトに影響します
（2）フローティングエッセンスをクリアします：標準フローからのフローティング要素の影響を
クリアします（3）フローティング戦略をクリアします：親ボックス内のフローティング要素の影響を制限します - フロートをクリアするメソッド：
（1）追加タグメソッド：ブロックタグを追加し（ブロックである必要があることに注意）、属性をクリアに設定します：両方
（2）オーバーフローを追加：非表示
（3）：疑似要素メソッドの後：追加スタイルコード+クラス名clearfixを親に追加
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有 */
*zoom: 1;
}
（4）floatをクリアするための二重疑似クラスメソッド：スタイルコード+親とクラス名のクリアフィックスを追加
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
2021.1.22
-
ポジショニング：相対ポジショニング、絶対ポジショニング、固定ポジショニング、接着ポジショニング
-
なぜポジショニングを学ぶのですか？
（1）ポジショニングにより、ボックスを特定のボックス内で自由に移動したり、画面上の特定の位置に固定したり、他のボックスを押し下げたりすることができます。
（2）以前に学習したフローティングスタディでは、複数のブロックレベルのボックスを行。ボックスを水平に配置するためによく使用されるシーム配置表示 -
ポジショニング構成：ポジショニング=ポジショニングモード+エッジオフセット
（1）ポジショニングモード：位置、値は4つ—静的、相対、絶対、固定
（2）エッジオフセット：4つの属性があります：----上、下、左、正しい -
静的ポジショニング（理解）：つまり、デフォルトのポジショニング方法、ポジショニングなし（標準フロー）、エッジオフセット位置なし：静的;
-
相対位置（自己陶酔型）：位置：元の位置に対して位置を移動するときの相対位置;
相対位置の特徴：
（1）移動位置は基準点であり、元の位置です
（2）後にマークから外れません移動、元の位置を保持、元の位置を他の標準的なストリーム要素で占有することはできません（魂は体の外にあり、体はまだそこにあります） -
絶対ポジショニング（戦闘タイプ）：位置を移動するときの祖先要素に対する位置：絶対
絶対ポジショニング機能：
（1）絶対ポジショニングに親または祖先レベルがない場合、ブラウザーが優先されます
（2）祖先にポジショニングがある場合最初のレベル（静的ポジショニングを除く）では、最新レベルでポジショニングされた祖先要素が優先されます
（3）標準外：絶対ポジショニングは元の位置を占めません -
息子は絶対に父親です：子供が絶対に配置されている場合、親は相対的な配置を使用する必要があります
理由：
（1）子供は絶対に配置され、位置を占有せず、他に影響を与えることなく親ボックスのどこにでも配置できますブラザーボックス
（2）親ボックスに配置制限を追加する必要があります。子ボックスは親ボックスに表示されます。
（3）親ボックスを配置するときは、位置を占める必要があるため、父親は比較的しか配置できません。
-
固定位置：要素はブラウザ位置の視覚領域の位置に固定されています：固定;
主なアプリケーションシナリオ：ブラウザページをスクロールしても要素位置を変更しないでおくことができます
固定位置機能：
（1）ブラウザのビジュアルウィンドウ（現在、到達したウィンドウサイズを確認できます）は、要素を移動するための参照ポイントです。
注：親とは関係がなく、スクロールバーでスクロールしません。
（2）固定位置は占有しません。元の位置。これは、特別な絶対位置
固定位置アルゴリズムと見なすことができます。
（1）固定位置ボックスを左：50％、ブラウザの表示領域の半分に移動します。
（2）固定位置ボックスをマージン左にします。 ：ボードの中央の半分の幅、中央の半分に移動します -
スティッキーポジショニング（理解）：相対ポジショニングと固定ポジショニングの混合位置：スティッキー;
スティッキーポジショニング機能：
（1）ブラウザのビジュアルウィンドウは、移動要素（固定ポジショニング機能）の参照ポイントです
（2）スティッキーポジショニングは元の位置を占めます（相対位置特性）
（3）有効にするには、上、下、右、左のいずれかを追加する必要があります -
ポジショニング要素のスタック順序（z-index）：ポジショニングレイアウトを使用すると、ボックスが重なる場合があります。このとき、「z-index」を使用して、ボックス（z軸）の前後の順序を制御できます。セレクター
z-indexの特性{z-index：1;} ：（
1）属性値：正の整数、負の整数または0の場合、デフォルト値は0です。値が大きいほど、ボックスは高くなります。
（2）属性値が同じ場合は、書き込み順序に従って後で表示されます。
（3）単位はありません。番号の後に追加されます。
注：z-index相対配置、絶対配置、固定配置の要素にのみ適用できます。他の標準ストリーム、フローティングおよび静的配置は無効です。 -
絶対測位ボックスの垂直方向のセンタリングアルゴリズム：マージンを追加：絶対測位ボックスの間に0自動;水平方向にセンタリングされません。垂直方向のセンタリングにも同じことが言えます。
.box {
position: absolute;
/* left走50%，父容器宽度的一半 */
left: 50%;
/* margin为负值，往左走自己盒子宽度的一半 */
margin-left: -100px;
/* top走50%，父容器高度的一半 */
top: 50%;
/* margin为负值，往上走自己盒子宽度的一半 */
margin-top: -100px;
width: 200px;
height: 200px;
background-color: pink;
}
- ポジショニングの特別な機能：
（1）ライン内の要素に絶対または固定ポジショニングを追加すると、高さと幅を直接設定できます。
（2）ブロックレベルの要素に絶対位置または固定位置を追加します。幅または高さが指定されていない場合、デフォルトのサイズはコンテンツのサイズです。
（3）標準（フローティング、絶対（固定）ポジショニング）から外れたボックスは、外側のマージンをマージする問題を開始しません
（4）絶対ポジショニング（固定ポジショニング）は、ボックスを完全に抑制します。
注：フローティング要素は異なる、その下のみ標準ストリームボックス。ただし、下の標準ストリームボックスのテキスト（画像）は抑制されませんが、絶対位置（固定位置）は、下の標準ストリームのすべてのコンテンツを抑制します。
フローティングがテキストを保持しない理由は、フローティングの目的がテキストの折り返し効果を作成することであるためです。テキストはフローティング要素を囲みます
2021.1.24
- 高度なcssスキル：
（1）要素の表示と非表示
（2）CSSユーザーインターフェイススタイル
（3）垂直方向の配置
（4）表示の代わりにテキストの省略記号をオーバーフローさせる
（5）CSSウィザードテクノロジ - 要素の表示と非表示：
（1）表示（重要）----なし、ブロック;非表示は位置を保持しません
（2）可視性----非表示、表示は位置を非表示にして保持します
（3）オーバーフロー- -非表示、表示、スクロール、自動オーバーフローが部分的に非表示 - cssユーザーインターフェイススタイル：
（1）マウススタイル：カーソル
<ul>
<li style="cursor:default">默认</li>
<li style="cursor:pointer">小手</li>
<li style="cursor:move">移动</li>
<li style="cursor:text">文本</li>
<li style="cursor:not-allowed">禁止</li>
</ul>
（2）アウトライン：なし;フォームのアウトラインをキャンセルするために開発でよく使用される：スタイルアウトラインの上部に書かれることが多い：なし;
（3）テキストフィールドのドラッグ防止サイズ変更：なし;
textarea {
width: 300px;
height: 150px;
outline: none;
resize: none;
}
- 垂直方向の配置：インライン要素とインラインブロック要素にのみ有効で、ブロック要素には有効ではありません
（1）インライン要素とインラインブロック要素の間の垂直方向の配置、および画像とテキストのデフォルトのベースライン配置を変更します
理由：画像はデフォルトで配置されますテキストのベースライン、つまり画像フレームとボックスの間にギャップがあります。
方法：
a。垂直方向の配置をベースラインの配置以外のスタイルに
変更します。b。画像をブロック要素に変更します
（2）写真と箱 - 。表示の代わりにテキストの省略記号をオーバーフローさせる：
.text {
width: 150px;
height: 25px;
border: 2px solid blue;
margin: 100px auto;
/* 当文字显示不开时自动换行（默认效果） */
/* white-space: normal; */
/* 1.强制文本一行显示 除非遇到br */
white-space: nowrap;
/* 2,溢出部分隐藏 */
overflow: hidden;
/* 3.文字溢出处理：超出部分用省略号表示 */
text-overflow: ellipsis;
}
- CSSウィザードテクノロジー：サーバーがリクエストを受け入れて送信する回数を効果的に減らし、ページの読み込み速度を向上させるため
.icon1 {
display: inline-block;
width: 95px;
height: 111px;
background: url(images/abcd.jpg) no-repeat -6px -276px;
}
.icon2 {
display: inline-block;
width: 102px;
height: 106px;
background: url(images/abcd.jpg) no-repeat -121px -13px;
}