布局display

高洛峰
高洛峰asal
2016-11-01 15:16:551632semak imbas

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

布局:元素摆放的模式。

影响元素大小和位置的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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:CSS ResetArtikel seterusnya:CSS Float 以及相关布局模式