HTMLインタビュー

1div の垂直方向と水平方向の中央揃え

1.余白を設定する

親: 高さを設定、オーバーフローを設定: 非表示; 子: 垂直方向のセンタリングマージンを親ボックスの高さから子ボックスの高さを引いて 2 で割った値に設定、auto を設定水平センタリング用。

代：.container{ 高さ: 800px;背景色: 黒;オーバーフロー: 非表示; }

.son {幅: 300px;高さ: 300px;背景色: ブルー;マージン: 250px 自動; }

2. 絶対位置決めと相対位置決めを使用する

親コンテナは相対位置を設定し、子コンテナは絶対位置を設定し、次に left:0;right:0;top:0;bottom:0; を設定します。

3.子要素の絶対位置と親要素の相対位置

親コンテナは相対的に配置され、子コンテナは絶対配置に設定され、上と左は 50% に設定され、マージン値は子コンテナの幅または高さの半分の負の値です。

代：.son{幅:300px;高さ:300px;位置:絶対;上:50%;マージン-上:-150px;左:50%;マージン-左:-150px;}

4. 位置決めと CSS3 位置移動を使用する

親コンテナは相対的に配置され、子コンテナは絶対配置に設定され、上と左は 50% に設定され、水平と垂直の移動は -50% に設定されます。

代：.son{幅:300px;高さ:300px;位置:絶対;トップ:50%;transform:translate(-50%,-50%);}

5. フレックスレイアウト justify-content align-items を使用する

父容器display:flex;justify-content:center;align-items:center;

6. 絶対位置決め、相対位置決め、および計算を使用する

代：.container{ 高さ: 800px;背景色: 黒;オーバーフロー: 非表示; }

.son {幅: 300px;高さ: 300px;背景色: ブルー;left:calc(800px - 500px)/2;top:calc(800px - 500px) /2; }

div 内の幅と高さが不明な場合は、4 と 5 を使用することをお勧めします。

https://www.cnblogs.com/jmbt/p/16607985.html

2. 回答後、内部の div のフレームの高さが固定されていない場合に、div を水平方向および垂直方向に中央揃えにする方法を引き続き質問します。div を水平方向および垂直方向に中央揃えにする方法幅と高さが固定されていない場合の垂直方向_CSS チュートリアル_CSS_Webpage Production_Script ホーム

フロントエンドインタビュアー: 水平方向および垂直方向の中央揃えのレイアウトをいくつ実装できますか (固定幅と高さ、および可変幅と高さ) - Zhihu

1.1 垂直方向に中央揃えにする方法は何通りありますか?

单行文本: line-height = height
図片:vertical-align: middle;
絶対定位: top: 50%;left: 50 %;transform:translate(-50%, -50%);
flex:display:flex;margin:auto

2. CSSボックスモデルを導入しますか?

cSS ボックスモデルは、基本的に周囲の HTML 要素をカプセル化するボックスです。これには次のものが含まれます: マージン、ボーダー、パディング実際のコンテンツ (コンテンツ) には 4 つの属性があります。

2 つのモデルに分割: W3C ボックスモデル (標準ボックスモデル) と IE ボックスモデル (奇妙なボックスモデル)
違い: IE コンテンツの一部ボーダーとパディングが含まれます。

(CSS ボックスモデルの違い:
   標準ボックスモデル: マージン、ボーダー、パディング、コンテンツ
   IE ボックスモデル: マージン、コンテンツ (ボーダー +パディング + コンテンツ ))

CSS を通じてボックスモデルを変換する方法:
   box-sizing: content-box; /*標準ボックスモデル*/
   box-sizing : border -box; /*IE ボックスモデル*/

フロントエンドインタビューボックスモデル（標準ボックスモデル、変ボックスモデル）とcss3指定ボックスモデルtype_MOOCのbox-sizing属性

3 CSSセレクターの優先順位?

優先度の比較: !重要 > インラインスタイル > ID > クラス > ラベル > ワイルドカード

CSS の重み計算:
最初: インラインスタイル (スタイル) の重み値: 1000
2 番目: ID セレクターの重み値: 100
3 番目: クラスセレクター重み値: 10
4 番目: ラベルおよび疑似要素セレクター重み値: 1
5 番目: ワイルドカード、> , + 重量値: 0

!重要>インラインスタイル>ID セレクター>クラスセレクター>ラベル>ワイルドカード 同じレベル: (1) 同じレベルで後から記述されたスタイルレベルは最初に書かれたスタイルを上書きします (2) セレクタ削減 CSS 優先度: 4 つのレベルと各レベルの出現数によって決定されます: インラインスタイル、ID セレクタ、クラスセレクタ、ラベルの各ルールは初期値 0 に対応します。 ,0,0,0。インラインセレクターの場合は、1、0、0、0を追加します。IDセレクターの場合は、0、1、0、0を追加します。クラスセレクター/属性選択の場合は、0、1、0、0を追加します。 , 要素セレクター/疑似要素セレクターの場合はそれぞれ0,0,1,0を加算、要素セレクター/疑似要素セレクターの場合はそれぞれ0,0,0,1を加算, アルゴリズム：数値を加算各ルールのセレクターに対応加算後の「4桁」を左から右に比較し、数字が大きいほど優先順位が高くなります。注: ①. ! important の優先度が最も高くなりますが、競合する場合は「4 桁」を比較する必要があります; ②. 優先度が同じ場合、最も近い原則が採用され、最後に表示されるスタイルが採用されます。が選択されています; ③. 優先度が最も低い継承属性; !重要 > インラインスタイル > ID セレクター > クラスセレクター > タグ > ワイルドカード > 継承 > ブラウザーのデフォルト属性 CSS セレクターを使用することを強くお勧めします。軽量の原則は、CSS の継承、再利用性、モジュール化、コンポーネント化を最大限に活用するのに有益です。

4 CSSリンクと@importの違いと使い方を簡単に説明しますか？

1linkはhtmlタグなのでHTMLモード、@importはCSSカテゴリに属しCSSモードです。

2 @import は CSS2.1 でのみ登場した構文であるため、一部の古いバージョンのブラウザでは制限がありますが、リンクタグは HTML 要素として互換性の問題はありません。

3 ページの読み込み時に、link タグで導入された CSS を同時に読み込むことができますが、@import で導入された CSS はページの読み込み後にのみ読み込まれます。

4 リンクは、iavascript を使用して DOM を制御してスタイルを変更することをサポートしていますが、@import はサポートしていません。
これは、JS を通じて DOM を操作し、リンクタグを挿入してスタイルを柔軟に変更できることを意味します。リンクは HTML タグであると述べたばかりなので、ノードを挿入する操作はおなじみです。インポートこれはサポートされていません。サポート。

5 インタビューの質問: img タグのタイトルと alt の違いは何ですか?

違い 1:
    title: マウスを画像内に移動したときに表示される値
    alt: 画像を読み込めない場合に表示される値
違い 2:
    SEOレベルでは、スパイダーは画像の内容をクロールできないため、フロントエンドがimgタグを記述する際にSEO効果を高めるために、画像の内容やキーワードを記述するalt属性を追加する必要があります。

6 面接の質問: これらの画像形式 png、jpg、gif について説明してください。いつ使用する必要がありますか?

png: 可逆圧縮。jpg/jpeg よりもサイズと容量が大きく、小さなアイコンに適しています。 
jpg: 圧縮アルゴリズムを使用し、歪みが少なく、png よりも小さく、中規模および大きな画像に適しています。 
gif: 通常、アニメーション画像を作成するために使用されます。 
webp: 非可逆圧縮と可逆圧縮の両方をサポートします。同じ品質の画像の場合、webp の方がサイズが小さくなります。互換性は特に良くありません。

webp とは
Webp は、Google が開発した新しい画像形式です。非可逆圧縮と可逆圧縮という 2 つの圧縮方式をサポートするダイレクトカラーを使用するビットマップです。 WebP 形式を使用する最大の利点は、同じ品質のファイルでファイルサイズが小さいことです。そのため、画像サイズの縮小はリクエスト時間の短縮を意味し、パフォーマンスが向上するため、ネットワーク画像の送信に非常に適しています。ユーザーの体験。これは、Google によって開発された新しい画像形式です。
ブラウザは webp 形式の画像をサポートしているかどうかをどのように判断しますか?
Image オブジェクトを作成し、その src 属性を webp 形式の画像に設定し、onload イベントで画像の幅と高さを取得します。取得できた場合は、ブラウザがwebp 形式の画像をサポートしています。そうでない場合は、ブラウザが webp 形式の画像をサポートしていることを意味します。onerror 関数が取得またはトリガーされた場合、ブラウザが webp 形式の画像をサポートしていないことを意味します。

7 面接の質問: 行の高さと高さの違い

line-height はテキストの各行の高さです。テキストが折り返されている場合、ボックス全体の高さは増加します (行数 * 行の高さ)。 
height はデッド値であり、ボックスの高さです。

8 面接の質問: CSS を使用して三角形を描画する

CSSを使って三角形を描く方法 - Simple Book

純粋な CSS で三角形を実装する 3 つの方法 - Zhihu

9表示: なしと可視性: 非表示の違い

1. 位置の占有の違い
表示: なし; 位置を占有しません
可視性: 非表示; 非表示ですが、位置を占めます

2. 再描画とリフローの問題

可視性: 非表示; 、表示: なし; 再描画が生成されます
表示: なし; リフローも生成されます

リフローは間違いなく再描画を引き起こしますが、再描画が必ずしもリフローを引き起こすとは限りません。

再フローの発生: 要素の位置 (左、上...) の変更、非表示の要素の表示....
再描画の発生: スタイルの変更、スキンの変更

面接での 10 の質問: 不透明度と rgba の違い

共通性: 透明性を実現する

1. 不透明度の値の範囲は 0 ～ 1 です。0 は完全に透明、1 は不透明を意味します。
2. rgba R は赤、G は緑、B は青を表し、値は正の整数またはパーセンテージを表します。 A は、透明度の値が 0 ～ 1 であることを示します

違い: 継承の違い
不透明度は親要素の不透明度属性を継承しますが、RGBA によって設定された要素の子孫要素は不透明度属性を継承しません。

11 ポジションの価値観とは何ですか?それらはどのような根拠に基づいて位置づけられているのでしょうか？

静的 [デフォルト] ターゲティングなし
ブラウザ ウィンドウを基準とした固定位置。 
それ自体を基準とした相対位置であり、ドキュメント フローから切り離されることはありません。 
ドキュメント フローの最初の相対親要素を基準とした絶対相対。 


相対的と絶対的の違い
1. 相対はドキュメント フローから切り離されませんが、絶対はドキュメント フローから切り離されます
2. 相対はそれ自体を基準とし、絶対は最初の相対親要素を基準とします
3. 左、右、上、下がある場合は相対 ==》左、上
     左、右、上、下がある場合は絶対 ==》左、右、上、下

12margin的嵌套塌陷问题 *

親ノードと子ノードの両方に上マージンが設定されている場合、それらは折りたたまれ、内側のボックスのマージンが外側のボックスに渡され、2 つのマージンのうち大きい値が影響します。。解決策: 外側のレイヤーに overflow:hidden を設定し、BFC をトリガーします

13フロートをクリアする方法

フローティング配置では、要素が通常のフローから除外されます。つまり、要素はドキュメントフローから分離され、スペースを占有しません。浮動要素は、それを含む境界線または浮動要素の境界線に接触すると停止します。

フロートをクリアする必要がある理由

1. 親要素の高さは拡張できないため、親要素と同じレベルの要素に影響します。

2. 浮動要素と同じレベルの非浮動要素 (インライン要素) がそれに続きます。

3. 最初の要素がフローティングでない場合は、その前の要素もフローティングにする必要があります。そうしないと、ページ表示の構造ソリューションに影響します。

フロートをクリア:クリア:両方

フローティングを解消するにはいくつかの方法があります: 1. 隔壁方式追加ラベル方式とも呼ばれます。2. オーバーフロー: 非表示 / スクロール / 自動;3. 疑似クラスの後;4. 二重疑似要素 a>;5. 親要素の高さを設定します

Floating_Homecoming Scenery 111 のブログ - CSDN ブログをクリアする一般的な方法

14プロジェクト内の複数の小さな画像の最適化の問題 *

1. スプライトマップ を使用すると、多数の小さな画像を 1 つの大きな画像に結合できます。利点: URL リクエストの削減、欠点: a.カラー調整ができない b. サイズを拡大できず、画像がぼやけてしまう c. 大きな画像に他の小さなアイコンを追加するのが面倒 d. レイアウトが比較的面倒で、背景の位置が必要移動する

2. フォントアイコン を使用できます。利点: 軽量: アイコンフォントは一連の画像よりも小さいです。フォントがロードされると、アイコンはすぐにレンダリングされ、サーバーリクエストが削減されます柔軟性: 本質はテキストであり、色の変更、影の生成、透明効果、回転などを自由に行うことができます互換性: ほぼすべてのブラウザをサポートしています。ご自由にお使いください。 Alibaba フォントアイコンライブラリ: http://www.iconfont.cn/

15em rem px的区别

em と rem の違い
類似点: どちらも CSS における相対的な長さの単位です

違い:
rem は、ルート要素のフォントサイズを基準にして計算されます。ブラウザのデフォルトのフォントの高さは
16 ピクセルなので、一般的には1レム=16ピクセル。

ems は、現在の要素のフォントサイズに相対して計算されます。

しかし、よく親要素に対して相対的と言う理由は実際には理解しやすいです。font-size 属性は継承できるため、親要素のフォントサイズは必然的に子要素のフォントサイズに影響を与えるからです。子要素のフォントサイズを継承することができます。要素が独自のフォントサイズを持たない場合、そのフォントサイズは親要素から継承されます。このとき、1emの値は相対的に計算されると考えることができます親要素のフォントサイズに合わせます。

P さらに、rem は CSS3 の新しい相対単位であり、r は root の略語です。これで em の欠点が解決されるようです。先ほど、em は親要素または現在の要素のフォントサイズを基準にして変換されると述べました。 . When 現在の要素または親要素のフォントサイズが変更された場合、再計算する必要があります。レベルが増えると、変換はより複雑になります。また、rem は HTML ルートディレクトリに対してのみ相対的であり、rem ユニットを使用すると、ルート要素 html のフォントサイズを調整するだけで、すべての要素が動的に適応され、複雑な階層関係が回避されます。

レムがすべてのモバイル画面に適応できる理由:

flexible.jsを導入したため、このjsで画面幅を取得し、異なる画面幅に応じてHTMLのfont-size値を設定することで、異なる画面の1remが異なるpx値に等しくなるようにしました。すべての携帯電話の画面に適応できます。

15.1rem、1em、1vh、1px とは何を意味しますか?

rem
rem は、ルート要素を基準とした全体の長さです。通常のアプローチは、html 要素のフォントサイズを設定し、他の要素の長さの単位は rem です。

em
子要素のフォントサイズの em は、親要素のフォントサイズを基準とします。
幅/高さ/パディング要素の /margin は、要素のフォントサイズを基準とした em で表されます

vw/vh
正式名称は、ビューポートの幅とビューポートの高さです。ウィンドウの幅と高さは、画面の幅と高さの 1% に相当します。ただし、幅の場合は % 単位の方が適切ですが、高さの場合は vh 単位の方が適しています。

px
px ピクセル (ピクセル)。相対的な長さの単位。ピクセル px はモニター画面の解像度を基準としています。
一般的なコンピュータの解像度には、{19201024} やその他の異なる解像度
19201024 があります。前者は合計 1920 ピクセルの画面の幅であり、後者は高さです。 1024 ピクセル

16 HTML セマンティクスについての理解を簡単に説明してください。

正しいタグを使用して正しいことを行います。
HTML セマンティクスにより、ページのコンテンツが構造化され明確になり、ブラウザや検索エンジンが解析しやすくなります。スタイル CSS がなくてもドキュメント形式で表示され、読みやすくなります。

検索エンジンクローラーは、HTML タグに基づいて各キーワードのコンテキストと重要度を判断します。これは SEO にとって有益です。
ソースコードを読むユーザーがセグメント化するのが容易になります。ウェブサイトをいくつかのチャンクに分割し、読みやすく、理解を維持します。

17 Chrome は 12 ピクセルのテキストをサポートします

12 ピクセルより小さいフォントが必要な場合、使用できる方法がいくつかあります。

-webkit-text-size-adjust:none; この属性は Chrome の上位バージョンでは廃止されました。

transform: scale(0.5, 0.5) を使用しますが、 transform を使用する場合は次の点に注意する必要があります。

transform はインライン要素には影響しないため、 display: block; またはを使用してください。display: inline-block;

transform スケーリングが実行された場合でも、元の要素は依然として対応する位置を占めます。他の要素に影響を与えないように、外側の要素を別のレイヤーでラップするのが最善です。

写真を使用する

最善の方法は、画像を切り取るか、12 ピクセルより小さいフォントを使用しないことです。

18CSS インラインスタイルを使用しないようにすべきなのはなぜですか?

CSS インラインスタイルは、開始タグの style 属性にスタイル属性を直接書き込みます。複数の要素でスタイルを共有するのは難しく、コードの再利用には役立ちません。

さらに、HTML コードと CSS コードが混在し、構造スタイルが分離されていないため、プログラマや検索エンジンが読みにくく、後のメンテナンスにも役立ちません。

19 BFC

意味：

BFC (Block Format Context) ブロックレベルの書式設定コンテキストは、ページボックスモデルにおける CSS レンダリングメソッドです。独立したコンテナに相当します。内部要素と外部要素は相互に影響しません。

公式ドキュメントでは次のように説明されています: ブロックフォーマットコンテキストには、それを作成する要素の内部にあるすべてのものと、新しいブロックフォーマットコンテキストを作成する子孫要素内に含まれないすべてが含まれます (BFC 領域には、コンテキスト要素を作成するすべての子要素が含まれますが、新しい BFC の子要素の内部要素は作成されません。)

要素が次の条件のいずれかを満たしている限り、BFC 機能をトリガーできます。

ボディルート要素

浮動要素: none 以外の float 値

絶対配置要素: 位置 (絶対、固定)

表示はインラインブロック、テーブルセル、フレックス

overflow 表示以外の値（hidden、auto、scroll）

BFC の主な機能は次のとおりです。

フロートをクリアします。たとえば、要素内に高さが崩れるフローティングサブ要素がある場合、この要素に overflow: hidden を追加すると、フローティングサブ要素をラップできます。 (BFC が作成され、子供はその境界を超えることができないため)

同じ BFC コンテナ内の隣接する要素間のマージンの重なりを防止します。親子のブロックレベル要素でボーダーとパディングが設定されていない場合、マージンが崩れます。親要素に overflow:hidden を追加すると、親要素と子要素の余白が崩れるのを防ぐことができます。

https://www.cnblogs.com/chloe56/p/16202055.html

20 空白スペースを避けるためのページ上の適応画像サイズの問題

最初のタイプ: img でラップされた div

img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

2 番目のタイプ: 背景画像

style="background-image: url(${user.headimgurl});background-size: cover; "

背景サイズのさまざまなプロパティ:

3 番目のタイプ: div はフレックスレイアウトを設定し、img は幅を設定します: 100%
は固定幅に相当し、画像の幅は完全に拡張され、高さは適応型で、白になります。スペースは避けられます

210.5pxの直線を描きますか？

height: 1px;
transform: scale(0.5);

22 よくある互換性の問題?

ブラウザのデフォルトのマージンとパディングは異なります。解決策は、グローバル *{margin:0;padding:0;} を追加して統合することです。
デフォルトでは、Chrome 中国語インターフェースは 12 ピクセルより小さいテキストを強制的に 12 ピクセルで表示します。
CSS プロパティ -webkit-text-size- を追加できます。調整: なし; 解決しました。

23 CSS3 h5 の新機能

H5 には新機能が追加されています

1. API をドロップにドラッグアンドドロップします。

ドラッグアンドドロップは、オブジェクトを取得して別の場所にドラッグする一般的な機能です。HTML5 では、ドラッグアンドドロップは標準の一部であり、任意の要素をドラッグアンドドロップできます。

2. カスタム属性のデータ ID

3. セマンティクスが向上したコンテンツタグ (ヘッダー、ナビゲーション、フッター、余談、記事、セクション)

4. オーディオ、ビデオ (オーディオ、ビデオ)

ブラウザが自動再生をサポートしていない場合はどうすればよいですか? プロパティに自動再生を追加します。

5. キャンバス

5.1) getContext() メソッドは、キャンバス上に描画するための環境を返します。

Canvas.getContext(contextID) パラメータ contextID は、キャンバス上に描画する描画の種類を指定します。現在、唯一の有効な値は「2d」です。これは 2D 描画を指定し、このメソッドは 2D 描画 API をエクスポートする環境オブジェクトを返します。

5.2)cxt.ストローク() この手順を行わないと、キャンバス上に線が表示されません。

5.3) 画像を処理するときのキャンバスと画像の違いは何ですか?

Image はオブジェクトの形式で画像を記述し、Canvas は専用の API を通じてキャンバス上に画像を描画します。

6. 地理位置情報 API

7. ローカルオフラインストレージ localStorage の長期データストレージデータは、ブラウザを閉じた後も失われません。

8. SessionStorage データはブラウザを閉じると自動的に削除されます。

9. フォームは、カレンダー、日付、時刻、電子メール、URL、検索、電話番号、ファイル、番号をコントロールします。

10. 新しいテクノロジー Webworker、WebSocket、Geolocation

CSS3には新機能が追加されています

1. カラー: RGBA および HSLA モードを追加

2. テキストシャドウ

3. ボーダー：角丸（border-radius）ボーダーシャドウ：box-shadow

4. ボックスモデル: ボックスサイジング

5、背景:背景サイズ背景元背景クリップ

6. グラデーション: 線形グラデーション、放射状グラデーション

7.トランジション：トランジションでアニメーションを実現

8. カスタムアニメーション animate @keyfrom

9. メディアクエリ複数列レイアウト@media screen and (width:800px) {…} 10. border-image

11、2D変換: 平行移動(x,y) 回転(x,y) 歪み(x,y) スケール(x,y)

12. 3D変換

13. フォントアイコン font-face

14. 柔軟なレイアウトのフレックス

24 変換

1. 移動translate(x, y)

2. スケールスケール(x, y)

3. 回転回転(度)

CSS変換（CSS3）transform_csstransform_happy de mantouのブログ - CSDNブログ

25 CSS セレクターとは何ですか? どのプロパティを継承できますか?

CSS セレクター:

1. ID セレクター (# myid)

2. クラスセレクター (.myclassname)

3. タグセレクター (div、h1、p)

4. 隣接セレクター(h1 + p)

5. サブセレクター (ul > li)

6. 子孫セレクター (li a)

7. ワイルドカードセレクター (*)

8. 属性セレクター (a[rel = "external"])

9. 疑似クラスセレクター (a:hover、li:nth-child)

継承の問題:

継承可能なスタイル: フォントサイズ、フォントファミリカラー、UL LI DL DD DT。

継承できないスタイル: ボーダーパディングマージン幅高さ;

26 ブロックとインラインの違いは何ですか?

**ブロック: **排他的な行を占有し、幅、高さ、マージン、パディングを設定できます
**inline: **排他的な行を占有しません。幅と高さは設定できません。水平マージンとパディングは設定できますが、垂直マージンとパディングは設定できません。

一般的なインライン要素:
span、img、a、label、input、abbr (省略形)、em (強調)、big、cite (引用)、i (斜体)、 q (短い引用符)、textarea、select、small、sub、sup、strong、u (下線)、ボタン (デフォルトの表示: inline-block))

共通のブロックレベル要素:
div、p、h1...h6、ol、ul、dl、table、address、blockquote、form

一般的なインラインブロックのインラインブロック要素:
img、input

27. トランジションとアニメーションの違い

**トランジション:**過剰なスタイル。受動的にトリガーする必要がある
**アニメーション:** アニメーションスタイル。受動的にトリガーする必要はなく、自動的にトリガーでき、@keyframe と組み合わせて複数のキーフレームをアニメーション化できます。

28 擬似要素と擬似クラス

**疑似要素:** 名前が示すように、偽の要素はそのコンテンツのみを表示しますが、DOM ツリーでは見つかりません。

p::before {content:"林三心";}
p::after {content:"林三心";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
复制代码

**疑似クラス:** マウスクリック、一時停止などのエフェクトをノードに追加します。

a:hover {color: #FF00FF}
p:first-child {color: red}

29 なぜレスと生意気な表現を使うのか

これらは、変数、継承、操作、関数、およびその他の機能を使用して、スタイル作成の効率を大幅に向上させる CSS プリプロセッサであり、ほとんどのパッケージ化ツールは、最終的にこれらを元の CSS スタイルコードに解析します。

30 単一行および複数行のオーバーフロー楕円

単線

overflow: hidden; 
text-overflow: ellipsis;
white-space: nowrap;
复制代码

複数行

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;

31. 2列レイアウト

2 列レイアウトとは、左側が固定、右側が適応型であることを指します。

フロートフロート

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}
复制代码

フレックスレイアウト

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}
复制代码

32. 3カラムレイアウト

3 列レイアウトとは、左右の固定と中央の適応型を指します。

フレックスレイアウトを直接使用する

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}
复制代码

33. 双飛翼（聖杯）配置

フレックスレイアウトを直接使用する

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

34 柔軟なレイアウトについて話しましょう

Q1: フレックスボックスレイアウトとは何ですか?

機能: 要素をさまざまな画面サイズと表示デバイスに適応させます。レスポンシブな Web サイトでのパフォーマンスが向上します。

コンテナにはデフォルトで 2 つの軸があり、1 つは水平の主軸、もう 1 つは主軸に垂直な交差軸です。 flex-direction を使用して主軸の方向を指定できます。
justify-content を使用して主軸上の要素の配置を指定し、align-items を使用して交差軸上の要素の配置を指定できます。 1 行で配置できない場合は、flex-wrap を使用して行の折り返し方法を指定することもできます。

35レム適応ソリューション

.1レム適応ソリューション

1. デバイスのサイズが変化したときに、比例的に適応できない一部の要素を現在のデバイスに比例的に適応させます。

2. メディアクエリを使用して、さまざまなデバイスに比例して HTML のフォントサイズを設定し、ページ要素のサイズ単位として rem を使用します。HTML のフォントサイズが変更されると、要素のサイズも変更され、それによって均等化が実現されます。スケーリングの適応。

効率的かつ簡潔なレム適応ソリューションflexible.js

Artifact、vscode px rem 変換プラグイン cssrem を使用すると、rem を計算する必要がなくなりました。ピクセル値を書き込んだ後、rem 選択に変更するよう求めるプロンプトが表示され、Enter キーを押します。このプラグインのデフォルトの HTML テキストサイズは 16 ピクセルであるため、デフォルトのプラグインの HTML テキストサイズをデザインドラフトのサイズを 10 で割ったサイズに変更する必要があります。

10. レム適応スキーム_Happy de Mantouのブログ - CSDNブログ

36 マージン「崩壊」の問題を解決するにはどうすればよいですか?

マージンの崩壊には 2 つの状況があります。

最初のケース: 同じレベルの 2 つの要素が垂直に配置されます。上のボックスには margin-bottom が指定され、下のボックスには margin-top が指定されます。その後、2 つの要素間の間隔は、大きい方のボックスに基づいて計算されて重なり合います。この状況を解決する方法は次のとおりです。2 番目の状況は、2 つの外側マージンが異なる場合に発生します。2 つの親子要素、内側のボックスに margin-top が与えられ、その親も影響を受け、上部マージンが生成されます。同時に、親子要素が接着される場合、この状況を回避する方法は、親に css 属性を追加し、overflow: hidden、外側のマージンを超えるオーバーラップを禁止するのが margin-collapse です。

解決：

1. 親ボックスの境界線を設定します。外側のレイヤーに境界線を追加した後、親ボックスと子ボックスは完全には整列しません (透明に設定できます: 境界線: 1px 実線透明)。

2. 親ボックスに overflow:hidden を追加します。

3. 親ボックスのパディング値を設定します。

4. 位置の追加: 親ボックスに固定されます。

5. 親ボックスに「display: table」を追加します。

6. 擬似要素を使用して、親要素の前に空の要素を追加します。

.father::before { content:'';表示:テーブル; }