Heim > Artikel > Web-Frontend > 布局display

布局display

高洛峰Original: 2016-11-01 15:16:551566Durchsuche

什么是布局：浏览器以正确的大小将元素摆放在正确的位置上。

布局：元素摆放的模式。

影响元素大小和位置的css属性： display position float flex

display

设置元素的显示方式，包括大小和位置 , display的取值有：

block

inline

inline-block

none

display : block

block元素又称为『块级元素』

QQ图片20161101114531.png

display : inline

QQ图片20161101114531.png

display: line的特性：

1.默认宽度为内容宽度

2.不可设置宽高，因为行级元素是不可设置宽高的

3.同行显示。如果前序元素和后续元素都是 display:inline (行级元素) ，那么他们是同行显示的。可以在元素内部换行。

默认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>

QQ图片20161101114531.png

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS ResetNächster Artikel：CSS Float 以及相关布局模式

In Verbindung stehende Artikel

Mehr sehen