html + cssインタビューの質問の概要と回答

インライン要素とは何ですか？ブロックレベル要素とは何ですか？

ブロックレベルの要素：div p h1 ul liフォームテーブル
インライン要素：ab br i span input select laber strong em img

5つ以上のHTML5入力要素タイプの属性値を指定します

テキストパスワードボタン送信リセットチェックアウトラジオ

私たちがよく使用するセマンティックタグとHTML5の新しいセマンティックタグは何ですか？

h1-h6見出しの内容
p段落
ul順序なし
ol順序付き
dl定義リスト
theadテーブルのヘッダーコンテンツtbodyテーブルの
メインコンテンツ

HTML5：より良い意味内容タグ（<header>、<nav>、<aside>、<article>、<section>、<footer>、<video>、<audio>、<canvas>）

セマンティックタグの役割

1. コード構造は明確で読みやすく、チーム開発に役立ちます。
2. 他のデバイス（スクリーンリーダー、ブラインドリーダー、モバイルデバイスなど）がWebページをセマンティックにレンダリングすると便利です。
3. 検索エンジン最適化（SEO）に役立ちます。

<label>タグの使用法について話す

ラベルラベルは、主にマウスクリックの使用を容易にし、クリック可能な範囲を拡大し、ユーザー操作エクスペリエンスを向上させる
ためのものです。ラベルのfor属性は、関連する要素のid属性と同じである必要があります。

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
</form>

ボックスモデルについて話しますか？

ボックスモデルは、コンテンツ、パディング、ボーダー、マージンで構成されます
。IEボックスモデルでは、widthは次の3つの部分の幅を表します：content + padding + border

標準ボックスモデルでは、幅はコンテンツパーツの幅を指します

ボックスサイジングの使用

  box-sizing: content-box 是W3C盒子模型
  box-sizing: border-box 是IE盒子模型

ボックスサイズ設定のデフォルト属性はcontent-boxです。

ボックスモデルの幅を計算する方法は？

offsetWidthとoffsetHeightには特性があります。つまり、これら2つの属性の値は要素にのみ関連しており、周囲の要素（親要素と子要素）とは関係ありません。
offsetWidth =（コンテンツ幅+内側マージン+境界線）、外側マージンなし。
したがって、答えは122pxです。

補足：offsetWidthが100pxに等しい場合はどうすればよいですか？

この属性を追加すると、width：100pxには、コンテンツの幅+内側の余白+境界線（全体で100px）が含まれるため、この属性を追加すると、それに応じてコンテンツの幅が狭くなります。

URLのコンポーネント

http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#r_70732423

完全なURLには次のものが含まれます。プロトコル部分ドメイン名部分ポート部分仮想ディレクトリ部分ファイル名部分パラメータ部分アンカー部分

参考：URLの各コンポーネントの詳細な説明

アンカーポイント機能：ユーザーページを開くときにアンカーポイントの位置までスクロールします。例：htmlページにコードがあり、URLのハッシュはr_70732423です。

<div name='r_70732423'>...</div>

上記のURLを開き、ユーザーページが表示されたらname = 'r_70732423'までスクロールします

CSSを導入する方法は何ですか？linkと@importの違いは何ですか？

1. 列をなして
2. 埋め込み
3. 外部リンク
4. インポートスタイルの
   
   違い1：リンクはXHTMLタグであり、CSSの読み込みに加えて、RSSなどの他の事項を定義することもできます。@ importはCSSのカテゴリに属し、CSSのみを読み込むことができます。
   違い2：リンクがCSSを参照する場合、ページの読み込みと同時に読み込まれます。@ importでは、ページが完全に読み込まれた後にページを読み込む必要があります。
   違い3：リンクはXHTMLタグであり、互換性の問題はありません。@ importはCSS2.1で提案されましたが、これは下位バージョンのブラウザーではサポートされていません。
   違い4：リンクはJavascriptを使用してDOMを制御し、スタイルを変更することをサポートしています。@ importはサポートしていません。

css3の長さの単位をリストします。

vw、vh、vmin、vmax（すべてビューポートに基づく）
remおよびem

1. emとremはpxよりも柔軟性があります。これらは相対的な長さの単位であるため、長さは固定されておらず、レスポンシブレイアウトに適しています。（emはcss2に属します）
emとremの違いは、1つの文に要約されています。つまり、emは親要素を基準にしており、remはルート要素を基準にしています。

2. Vhおよびvv：1vhはビューポートの高さ①の1/100に等しく、1vwはビューポートの幅の1/100に等しくなります。

3.さらに2つの単位があります：vmax、vmin、それぞれvhとvwの最大値と最小値です。

詳細なケースについては、https：//www.cnblogs.com/nannan1221/p/10772977.htmlを参照してください。

表示属性の一般的に使用される値を一覧表示します（5以上）

display：noneこの要素は表示されず、ページスペースを占有しません。display
：ブロックブロックレベルの要素の
表示：インラインインライン要素の
表示：インラインブロックインラインブロックレベルの要素の
表示：flexflexibleコンテナの
表示：テーブルはとして表示されますブロックレベルのテーブル

変換、遷移、アニメーションの役割を簡単に説明します

変換は変化、
遷移は遷移、
アニメーションはアニメーション

4つの属性を変換する

1. 回転：中心点を中心に度単位で回転します
2. translate（x、y）：位置pxをxy軸に移動します
3. scale：全体的なズーム率、scaleXscaleY軸に沿ったズーム
4. 軸に沿ったskew（x、y）せん断、scaleXscaleYせん断

cssの横横の書き方は、4種類以上書いてください。

水平方向に中央に配置

行内元素: text-align: center
块级元素: margin: 0 auto
position: absolute +left:50%+ transform:translateX(-50%)
display: flex + justify-content: center

垂直方向の中央

最適線-高さ等高さ
位置：絶対+上：50％+変換：変換Y （-50％）
表示：フレックス+整列-アイテム：中央
表示：テーブル+表示：テーブルセル+垂直-整列：中央;

画像は中央に配置されます（画像とその隣のテキストは中央に垂直に配置されます）

vertical-align:middle

三角形を描きますか？

これは単純なcssテストです。コンポーネントライブラリを使用するときは、ネイティブcssを忘れないでください。

.a{
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg); /*顺时针旋转90°*/
 }

<div class="a"></div>

0.5pxの線を引きますか？？

テストはcss3の変換です

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

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

1. 追加のラベルメソッド（最後のフローティングラベルの後に、新しいラベルを追加し、クリアに設定します：両方;）（非推奨）
2. 親BFCを作成します（オーバーフロー：非表示）
3. 親は:: after疑似要素を使用してfloatclearをクリアします：両方（推奨）

相対ポジショニング、絶対ポジショニング、固定ポジショニングの違い。

相対配置：相対配置された要素はドキュメントフローを離れません

絶対ポジショニング：ドキュメントフローから要素を作成します。絶対ポジショニングは、ポジショニングがオンになっている最も近い要素を基準にして、存在しない場合は本体を基準にします（したがって、通常は親要素にポジショニングを追加します）。要素の性質を変更します。インライン要素はブロック要素になります。

固定位置：ブラウザウィンドウの位置を基準にして配置されます。たとえば、フローティングカスタマーサービスを上に戻します。このタイプのボタンは固定位置を使用します。

ウェブページの上部、中央、下部の構造を上部と下部に固定し、高さ100ピクセル、中央に適応型の高さを備えたレイアウトを作成します。これは、ブラウザーの表示可能領域全体を占めます（jsなし、 html5要素タグとcssのみ）。。

1.絶対測位
を使用して、これら3つの列の絶対測位を実現します。ここで、中央の絶対測位の位置は上下の列の高さであり、フローバーのオーバーフロー：内容がを超えると中央に自動が表示されます。

2.
フレックスレイアウトを使用するフレックスレイアウトを使用してこのレイアウトを実現し、フレックス方向を列に設定し、配置方向を垂直として定義し、ページ全体の高さを100％として定義するように注意する必要もあります。

詳細なケースについては、以下を参照してください。上下の固定ミドルアダプティブレイアウト

1. 追加のラベルメソッド（最後のフローティングラベルの後に、新しいラベルを追加し、クリアに設定します：両方;）（非推奨）
2. オーバーフローを追加：親要素に非表示にし、BFCメソッドをトリガーすることでフローティングのクリアを実現します（非推奨）
3. after疑似要素を使用してフロートをクリアします（推奨）

いくつかのhtml3列レイアウトがあります（左右に固定、中央に適応）

フローティングレイアウトフロート、ポジショニングレイアウト、フレックスレイアウト、テーブルレイアウト、css3フェンスレイアウト

<style media="screen">    //浮动布局float
      .layout.float .left{
     
     
        float:left;
        width:300px;
        background: red;
      }
      .layout.float .center{
     
     
        background: yellow;
      }
      .layout.float .right{
     
     
        float:right;
        width:300px;
        background: blue;
      }
 </style>

<style>
        .layout.absolute .left-center-right>div{
     
        //定位布局
          position: absolute;
        }
        .layout.absolute .left{
     
     
          left:0;
          width: 300px;
          background: red;
        }
        .layout.absolute .center{
     
     
          left: 300px;
          right: 300px;
          background: yellow;
        }
        .layout.absolute .right{
     
     
          right:0;
          width: 300px;
          background: blue;
        }
</style>

<style>
        .layout.flexbox{
     
         //flex布局
          margin-top: 110px;
        }
        .layout.flexbox .left-center-right{
     
     
          display: flex;
        }
        .layout.flexbox .left{
     
     
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
     
     
          flex:1;
          background: yellow;
        }
        .layout.flexbox .right{
     
     
          width: 300px;
          background: blue;
        }
</style>

<style>
        .layout.table .left-center-right{
     
         //表格布局
          width:100%;
          height: 100px;
          display: table;
        }
        .layout.table .left-center-right>div{
     
     
          display: table-cell;
        }
        .layout.table .left{
     
     
          width: 300px;
          background: red;
        }
        .layout.table .center{
     
     
          background: yellow;
        }
        .layout.table .right{
     
     
          width: 300px;
          background: blue;
        }
</style>

sessionStorage、localStorage、cookieの違い

共通点：それらはすべてブラウザ側に保存され、同じ起源です

Cookieは、クライアントがユーザー情報を保存するためのメカニズムであり、一部のユーザー情報を記録するために使用されます。これは主にログイン情報を保存するために使用されます。Cookieはブラウザとサーバーの間で受け渡されますが、他の2つは受け渡されません。
アプリケーションシナリオ：次回自動的にログインするために、ユーザーがWebサイトにログインしたかどうかを確認します

。LocalStorageはhtml5の新しいローカルキャッシュスキームです。現在より多く使用されており、Ajaxから返されたデータを保存するために一般的に使用されています。次のページが開いたときにレンダリングを高速化します。

ローカルストレージを設定します。

 window.localstorage:
          localstorage.name="李皮";
          localstorage["name"] = "李皮"；
          localstorage.setItem(key,val);

localStorageを取得します。

localStorage.属性
          localStorage["属性"];
          localStorage.getItem(属性)

localStorageを削除します。

  localStorage.clear();
         localStorage.removeItem();

レスポンシブレイアウトとは何ですか？？達成する方法は？？

さまざまなサイズと解像度の画面は、レスポンシブレイアウトである、より良い結果を表示できます。

レスポンシブレイアウトのいくつかのアイデア：

1. 最も単純な解決策（固定コンテンツ領域幅）
   は、Webページのコンテンツ領域の幅を設定します。たとえば、900pxの場合、コンテンツ領域は中央に配置され、両側が空白のままになります。ほとんどのコンピューターモニターの幅は900pxを超えるため、異なるモニターの違いは、両側の「空白」のサイズのみです。
   比例ズーム（レム）
2. 比例スケーリング（rem）の
   全体的な考え方は
   、ルートノードのフォントサイズを設定することです。
   次に、他のすべてのサイズ単位にremを使用し
   、画面サイズを監視します。
   次に、ルートノードのフォントサイズをに応じて比例的に変更します。画面サイズ
   参照：画面サイズに応じてルートノードのフォントサイズを比例的に変更します
3. 最も正確な解決策（メディアクエリ、 @ media） @mediaの
   全体的な考え方は
   、さまざまなサイズのデバイスに個別の独立したcssプロパティを設定できるということです。
   たとえば、次の画面の幅未満500pxなど（携帯電話の画面）、どのとき
   に幅がある場合500pxなど（タブレット画面）、1000pxにどのよう
   に幅がある場合1000px（コンピュータ小画面）、1500pxにどのよう
   に幅は1500pxから2000px（通常のコンピューター画面）で、
   幅はどのようにどのようになっていますか......
   参照してください：@mediamedia query case
4. グリッドシステムブートストラップフレームワーク（主流のソリューション）

一般的なブラウザカーネルは何ですか？

IE：TridentカーネルFireFox：geckoカーネルOpera：元々はPrestoを使用していましたが、現在はBlinkを使用しています

Safari：webkitコアChrome：Blink（WebKitのブランチ）

一般的なブラウザの互換性の問題の解決策は？

1.問題の症状：スタイルを制御せずに、ランダムにいくつかのタグを記述します。それらのマージンとパディングはまったく異なります。

解決策：CSSの* {margin：0; padding：0;}

2.問題の症状：一般的な症状は、IE6の最後のブロックが次の行に追加されることです

解決策：display：inline;をfloatのラベルスタイルコントロールに追加し、インライン属性に変換します

備考：最も一般的に使用されるのはdiv + CSSレイアウトで、divは一般的なブロック属性タグです。通常はdiv floatを使用して水平レイアウトを実現します。水平間隔設定をマージンで実現すると、これは避けられません。互換性の問題が発生します。

3.問題の症状：複数のimgタグを組み合わせると、一部のブラウザにデフォルトの間隔が設定され、最初の質問で説明したワイルドカードが機能しなくなります。

解決策：imgレイアウトにfloat属性を使用する

注：imgタグはインライン属性タグであるため、コンテナーの幅を超えない限り、imgタグは一列に配置されますが、一部のブラウザーのimgタグの間にはスペースがあります。このギャップを取り除き、floatを使用するのが正しい方法です。（負のマージンを使用することは解決できますが、負のマージン自体はブラウザーの互換性の問題を引き起こしやすい使用法であるため、通常は使用されません）

4.CSSの透明性

IE：filter:alpha(opacity=60)。
FF：opacity:0.6。

5.ユニバーサルクリアフロート

.clearfix:after {
    
     
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 
}

ウェブサイトのパフォーマンスを向上させる方法は？SEO最適化？

httpリクエストを減らし、使用前に画像、スタイル、およびjsを圧縮し、cdnを使用し、スタイルとスクリプトに可能な限り外部リンクを使用し、dom操作を減らします。htmlセマンティクス。

ウェブサイトのヘッダーのタイトル、キーワード、説明が正しく記述されている; htmlセマンティクス;

回答は不完全または偏っています。コメント領域に追加して修正してください。