1.標準的なCSSのケースモデルを紹介しますか?低バージョンIEのケースモデルは何が違いますか?

1.ケースモデルは2種類あり、IEケースモデル、W 3 Cケースモデル;2.ボックスモデル:コンテンツ(content)、内側余白(padding)、枠線(border)、外側余白(margin)3.違い:IEのcontent部分はborderとpaddingを計算した

2.CSSセレクタはどれらがありますか?継承できる属性はどれですか?

1.idセレクタ(#id);2.クラスセレクタ(.class);3.ラベル選択器(div);4.隣接セレクタ(h 1+p);5.サブセレクタ(ul>li);6.子孫セレクタ(li a);7.ワイルドカード(*);8.属性セレクタ(a[rel='xyz'];9.擬似クラスセレクタ(a:hover,li:nth-child);
継承可能スタイル:font-size font-family color ul li dl dd dt;継承不可スタイル:border padding margin width height;

3.CSS優先度アルゴリズムはどのように計算しますか?

優先度近接の原則は、最近接スタイルを定義し、最近接スタイルを準ロードスタイルとして定義し、最後にロードされた位置を準とします.
優先度:!important>id>class>tag>*(ワイルドカード)

4.displayにはどのような値がありますか?彼らの役割を説明する

1.block:設定要素がブロックレベルの要素になり、行全体を占有し、幅の高さを設定することができる.2.inline-block:要素を行内のブロック要素に設定し、幅と高さを設定し、1行に複数表示できる.3.inline:行内の要素、幅の高さを設定することができなくて、1行は複数を表示することができます;4.none:要素が表示されないように設定します.5.flex:フレックスレイアウトを開く;6.table:ブロックレベル表として表示する;7.list-item:ブロックレベル要素のように表示し、スタイルリストタグを追加します.8.inherit:親要素のdisplay属性を継承します.

5.positionの値relativeとabsoluteの位置決め原点は？

relative:相対位置決め、正常位置に対して位置決めabsolute:絶対位置決め、親要素の最近のpositionに対してstatic(静的、無位置決め)位置決め;fixed:ブラウザウィンドウに対して位置決め;static:デフォルト、位置決めなし;inherit:親要素の位置を継承します.

6.CSS 3はどんな新しい特性がありますか?

1.フィレット--』border-radius 2.シャドウと反射--』shadow,reflect 3.テキスト特効--』text-shadow 4.テキストレンダリング--』text-decoration 5.線形グラデーション--gradient 6.回転--』transformスケール、位置決め、傾斜、アニメーション、マルチバックグラウンドtransform:scale(1.1,1.2);transform:translate(x,y); transform:skew(9deg,0deg)

7.純CSSで三角形を作成する

上、左、右の色を透明にするのが原理です

    #demo{
    width:0;
    height:0;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent red transparent;
    }

8.一般的なブラウザ互換性の問題とその解決方法、よく使われるhack方法。

1.png 24ビットピクチャはIE 6ブラウザに背景が現れ、解決方法:ピクチャをpng 8にする;2.ブラウザのデフォルトのスタイルが異なります.解決方法:初期スタイルのクリアを設定します.またはnormalizeを使用する.cssでスタイルを統一します.3.IE 6では2倍の外側距離の問題が発生し、IE 6ではブロック要素がフローティングに設定された後、marginを設定すると2つの外側距離の問題が発生する.解決方法:css-hackを使用して、元のmargin:10 pxで;後に_を追加margin:10px; 4.Chrome中国語インタフェースの次回のデフォルトは12 px未満のテキストを強制的に12 pxで表示し、解決方法:CSS属性-webkit-text-size-adjust:noneを加える;
注意点ハイパーリンクアクセス後、hoverスタイルは有効になりません.解決方法:L-V-H-A順にa:link-->a:visited-->a:hover-->a:activeと書きます.

9.liラベル間の空白ギャップの原因とその解決方法

行の配列は中間空白(リターン/スペース)の影響を受けます.スペースも文字であるため、スタイルも適用され、スペース解決方法になります.文字サイズを0に設定します.問題拡張:ブロックレベル要素にimgラベルを含めると、ギャップの問題が発生します.ピクチャテキストなどのinline要素のデフォルトの和親要素はbaselineであり、baselineは親の下部にギャップがあるためです.(w 3 cにおけるimgラベルのデフォルトはinlineラベル)解決方法:整列方式をbaseline以外のいずれかに設定する:vertical-align:top/bottom/text-top/text-bottom実はこの隙間はieが箱モデルに対して設定したinline-heightとfont-sizeである.だからimgにdisplay:blockを設定することもできます.font-size:0;しかし、構造にとっては、本末転倒の意味がある.

10.CSSではvisibilityにcollapseプロパティがありますが、何をしていますか?

collapseは崩壊し、失効するという意味です.通常の要素visibility:collapseとdisplay:noneは同じ表現で、要素を非表示にし、空間を占有しません.しかしtableにとってtableは隠されるが,依然として空間を占有する(ieはサポートしない)

11.フローティングをクリアする理由フローティングをクリアする方法は?

フローティングをクリアするのは、フローティングを使用する要素の影響をクリアするためです.フローティング要素は、高さが陥没し、レイアウトに不利です.解決方法:1.親divに高さheight 2を設定.親divも一緒にフローティング3.親要素にoverf:hiddenを設定します.4.clearfixクラス名の使用

    .clearfix:before,.clearfix:after{
        content:"";
        display:block;
        height:0;
        line-height:0;
        visibility:hidden;
        clear:both
    }
    .clearfix{
        *zoom:1;
    }

12.エレメントの縦方向のパーセンテージ設定は、コンテナに対する高さですか?

heightプロパティの場合、パーセンテージの設定はコンテナに対するパーセンテージの設定です.margin、paddingの場合、垂直パーセンテージの設定はコンテナの幅で計算されます.

13.レスポンスデザインとは?応答式設計の基本原理は何ですか。

レスポンスデザイン(Responsive Web design):ページの画像レイアウトサイズを集中的に作成し、ユーザーが使用するデバイス環境(システムプラットフォーム、画面サイズ、画面指向など)に応じてスマートに対応できるレイアウト.基本原理:@mediaメディアクエリーを使用し、異なるCSSルールを使用してスクリーンの最適なレイアウトを実現します.

14.position:fixed;携帯電話の下で無効にするにはどうすればいいですか?

fixedの要素はページ全体に対して固定されており、画面上でスライドするとviewport全体がスライドします.元のページはまだあり、fixedも位置を変えていないので、携帯電話側がfixedをサポートしていないわけではありませんが、fixed要素は携帯電話の画面に対して固定されていないので、を設定することができます.

15.divの中央をどのように実現しますか?

1.水平方向中央

1.divに幅を設定し、margin:0 autoを使用する.

    div{
    width:100px;
    height:100px;
    margin:0 auto;
    background:hotpink;
    }

2.絶対位置決めの使用

    div{
        position:absolute；
        width:100px;
        height:100px;
        left:50%;
        margin-left:-50px;
        background-color:skyblue;
    }

2.水平垂直中央

1.絶対位置の使用

    div{
        position:absolute；
        width:100px;
        height:100px;
        left:50%;
        top:50%;
        margin-left:-50px;
        margin-top:-50px;
        background-color:skyblue;
    }

2.transformプロパティの使用

    div{
        position:absolute；
        width:100px;
        height:100px;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%)
        background-color:skyblue;
    }

3.フレックスレイアウトの使用

    .container{
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .container div{
        width:100px;
        height:100px;
        background-color:hotpink;
    }