CSS的display

CSS的display属性

一.所有元素可以设置display属性

二.作用

设置元素使用的框（盒）模型的类型

三.取值

1. none 这个元素不会显示，也不会占据页面空间
2. block 设置这个元素为块元素
3. inline 设置这个元素为行内元素（内联元素）
4. inline-block 设置这个元素为行内块元素

简单的说一下框的类型不同有什么区别：

(i) block，块元素（以下块元素讨论的前提是，元素处于文档流中）

在文档流中，多个块元素自上而下排列，每个块元素会独占一行，也就是说，一个块元素后面会默认跟一个换行符。

子块元素的width默认值为auto，也就是说，是处于文档流的父元素的宽度的100%

父块元素的height默认值处于文档流子元素的height，也就是说，“被处于文档流的子元素撑起来”

    

        
我是子元素，我撑起父元素
    

(ii) inline，行内元素（内联元素） （以下内联元素讨论的前提是，元素处于文档流中）

文档流中，多个内联元素从左向右一次排开。（如果一行不足以容纳，则会换行）

    我是一个内联元素
    我是一个内联元素
    我是一个内联元素

设置body的width，迫使内联元素换行

在文档流中，内联元素不能设置width和height，也就是说，内联元素的内容区的大小是内容决定的。

    
        我是一个内联元素
    

可见，文档流中，内联元素不能设置width和height的大小。

(iii)inline-block （设置为inline-block不会脱离文档流）

内联块元素结合了内联元素和块元素的部分特点。
1. 可以设置width和height（块元素特点）
2. 如果不设置width和height，width不是默认与父元素width相同，而是“被子元素撑开”（内联元素特点）
3. 与内联元素在文档流中的排布一样，多个inline-block会在一行内从左向右排列。

 

所以，可以设置width和height；不会独占一行

span{
    width: 100px;
    height:100px;
    display: inline-block;
}


    
    
    

四.注意的点

1.可以通过display来设置框的类型，span默认为内联元素，可以修改为块元素。

2.display为none时，既不显示，也不占用页面空间。