ホームページ > 記事 > ウェブフロントエンド > レイアウト表示

レイアウト表示

高洛峰オリジナル: 2016-11-01 15:16:551566ブラウズ

レイアウトとは: ブラウザは要素を正しい位置に正しいサイズで配置します。

レイアウト: 要素を配置するモード。

要素のサイズと位置に影響を与えるCSSプロパティ: 表示位置 float flex

display

サイズと位置を含む要素の表示モードを設定します。display の値は次のとおりです:

block

inline

inline- block

none

display:block

block要素は「ブロックレベル要素」とも呼ばれます

レイアウト表示

display:inline

レイアウト表示

display:line features:

1デフォルトの幅はコンテンツ幅

2 です。幅と高さは同じ行の行レベル要素

3 に設定できないためです。前の要素と後続の要素の両方が display:inline (行レベルの要素) である場合、それらは同じ行に表示されます。要素内で行を折り返すことができます。

デフォルトの表示: インライン要素span、a、label、cite、em、…

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>display_inline</title>
    <style type="text/css">
    .sample{
        background-color: pink;
    }

    /* 行级元素设置宽高无效 */
    .sample{
        width: 200px;
        height: 200px;
    }

    /* 指定em为块级元素 ，块级元素换行显示（自身相对前序元素是换行的）*/
    em{
        display: block;
    }

    </style>
</head>
<body>

<span>before inline</span>
<span class="sample">display : inline;</span>
<em>after inline</em>
</body>
</html>

レイアウト表示

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSのリセット次の記事：CSSのリセット

続きを見る

レイアウト表示

関連記事