非零基础自学前端最后一遍一 HTML+CSS 9 CSS继承-层叠-元素类型 9.3 HTML元素的特性-块级-行内级-display

╰+哭是因爲堅強的太久メ 2024-03-25 19:17 68阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  9 CSS继承-层叠-元素类型
         *   *  9.3 HTML元素的特性-块级-行内级-display
             *   *  9.3.1 HTML元素的类型
                 *  9.3.2 通过CSS修改元素类型

![在这里插入图片描述][a0d38426af424b3785b8067f2bc44d76.png_pic_center]

#### 一 HTML+CSS ####

#### 9 CSS继承-层叠-元素类型 ####

##### 9.3 HTML元素的特性-块级-行内级-display #####

###### 9.3.1 HTML元素的类型 ######

*  在前面我们会经常提到div是块级元素会独占一行, span是行内级元素会在同一行显示.
    
     *  到底什么是块级元素, 什么是行内级元素呢?
 *  HTML定义元素类型的思路:
    
     *  HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等;
     *  当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?
        
         *  为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的;
     *  比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起;
     *  比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起;
     *  而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行;
 *  所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:
    
     *  块级元素（block-level elements）: 独占父元素的一行 ，如h、p、div
     *  行内级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示，如a、img、span

![在这里插入图片描述][8f88468183154fd4a1a880e3a7f87aec.png_pic_center]

###### 9.3.2 通过CSS修改元素类型 ######

*  前面我们说过, 事实上元素没有本质的区别:
    
     *  div是块级元素, span是行内级元素;
     *  div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已;
    
    ![在这里插入图片描述][f343cb1ca3c24110af57474af50e87f6.png_pic_center]
 *  那么我们是否可以通过display来改变元素的特性呢?
    
     *  当然可以!

![在这里插入图片描述][0b6fe300c81040d4b22039a0d1bedf4a.png_pic_center]

瞬间变行内

![在这里插入图片描述][446e9422274f4a8e8db07bdb56e62871.png_pic_center]

瞬间变块级。

[a0d38426af424b3785b8067f2bc44d76.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/698c0fcdfefa4eec87b11294a59cd7f6.png
[8f88468183154fd4a1a880e3a7f87aec.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8147c9ab59bd45389b2755621b598327.png
[f343cb1ca3c24110af57474af50e87f6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ffe1997ec4034840ab4edc3091b47cf0.png
[0b6fe300c81040d4b22039a0d1bedf4a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c6c3344b4b7346e3904f78ad26316d86.png
[446e9422274f4a8e8db07bdb56e62871.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e22d6ec31fa44a59b44e5abb248c9841.png