html - 一道简单CSS的面试题

Question

今天刚刚碰到的 hr要求一个半小时完成

要求p自适应大小

边距都是30px，剩下的p全部自适应屏幕 如果有根据屏幕大小自动变化CSS样式的更好

要求已经写在图上了 有没有萌新前来练手

Answer 1

<style type="text/css">
<!--
            html,ボディ{
                高さ: 100%;
            }
            体、
            体 * {
                マージン: 0;
                パディング: 0;
            }
            p {
                ボックスのサイズ設定: ボーダーボックス;
                -webkit-box-sizing: ボーダーボックス;
                ボーダー: 1px ソリッド #333;
            }
            .header_left、
            .header_right {
                高さ: 40%;
                フロート: 左;
                マージントップ: 10%;
            }
            .header_left {
                幅: 40%;
            }
            .header_right {
                幅: 60%;
                ボーダー左スタイル: なし; 
            }
            。クリア {
                クリア：両方。
                境界線: なし。
            }
            。主要 {
                マージントップ: 5%;
                高さ: 45%;
                色: 赤;
                テキスト整列: 中央;
            }
            .main_left、
            .main_right {
                フロート: 左;
                幅: 60%;
                高さ: 100%;
                境界線: なし。
            }
            .main_right {
                幅: 40%;
                ボーダー左: 1px ソリッド #333;
            }
        .main_left_top、
        .main_left_middle、
        .main_left_bottom、
        .main_right_top、
        .main_right_bottom {
         マージン: 30px;
        }
-->
        </スタイル>
    <p class="header_left"></p><p class="header_right"></p><p class="clear"></p>
    <p class="main"><p class="main_left">
        <p class="main_left_top">付随コンテンツ适应大小</p>
        <p class="main_left_top">付随コンテンツ适应大小</p>
        <p class="main_left_bottom">付随コンテンツ适应大小</p>
    </p><p class="main_right">
        <p class="main_right_top">付随コンテンツ适应大小</p>
        <p class="main_right_bottom">付随コンテンツ适应大小</p>
        </p>
        <p class="クリア"></p>
    </p>

Answer 2

float レイアウトと flex を実装するには 2 つの方法がありますが、flex の互換性はあまり良くない可能性があります
float レイアウト

フレックスレイアウト

Answer 3

この問題は難しくありません。私は数分で解決できる方法を知っています。

Answer 4

絵は非常に詳細に書かれています。あなたがしなければならないのは、絵に基づいて対応するレイアウトを書くことだけです。それでも混乱する場合は、p レイアウトを統合することをお勧めします。

Answer 5

これは非常にシンプルですが、応答型ではなく適応型であり、すべてパーセンテージでマークされている点が異なります。