• HTML display 属性 和 行内元素、块状元素、行内块状元素的区别


    定义

    display 属性规定元素应该生成的框的类型。

    注意:这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。

    属性值

    说明 (索引中有详细介绍)
    inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
    block 此元素将显示为块级元素。
    content 盒子文本正常绘制,而围绕在盒子中的框并不会生成。
    flex 此元素将显示为弹性盒容器。
    grid 此元素将显示为栅格容器。
    inline-block 此元素将显示为行内块元素。
    inline-flex 此元素将显示为行内弹性盒容器。
    inline-grid 此元素将显示为行内栅格容器。
    inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。
    list-item 此元素会作为列表显示。
    run-in 此元素会根据上下文作为块级元素或内联元素显示。
    table 此元素会作为块级表格来显示(类似 table元素),表格前后带有换行符。
    table-caption 此元素会作为一个表格标题显示(类似 caption 元素)。
    table-column-group 此元素会作为一个或多个列的分组来显示(类似 colgroup 元素)。
    table-header-group 此元素会作为一个或多个行的分组来显示(类似 thead 元素)。
    table-footer-group 此元素会作为一个或多个行的分组来显示(类似 tfoot 元素)。
    table-row-group 此元素会作为一个或多个行的分组来显示(类似 tbody 元素)。
    table-cell 此元素会作为一个表格单元格显示(类似 td 元素)
    table-column 此元素会作为一个单元格列显示(类似 col 元素)
    table-row 此元素会作为一个表格行显示(类似 tr 元素)。
    none 此元素不会被显示。
    initial 设置该属性为默认元素。
    inherit 规定应该从父元素继承 display 属性的值。

    其次:   行内元素、块状元素、行内块状元素的区别:

    1.行内元素特征:(1)设置宽高无效

             (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间

             (3)不会自动进行换行

    2.块状元素特征:(1)能够识别宽高

             (2)margin和padding的上下左右均对其有效

             (3)可以自动换行

             (4)多个块状元素标签写在一起,默认排列方式为从上至下


    3.行内块状元素

      行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。

      行内块状元素特征:(1)不自动换行

               (2)能够识别宽高

               (3)默认排列方式为从左到右


    1 块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table

    2 行内元素:span, strong, em, br, img , input, label, select, textarea, cite,

    本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/14821150.html

  • 相关阅读:
    lua -- encode and decode
    lua二进制操作函数
    linux C++多线程使用pthread_cond 条件变量
    linux c 多线程编程--互斥锁与条件变量
    linux C--多线程基本概念及API函数
    linux C多线程编程
    2.5 linux C 进程与多线程入门--(5)使用互斥量进行同步
    linux C多线程编程入门(基本API及多线程的同步与互斥)
    2.4 linux C 进程与多线程入门--(4)简单多线程程序
    2.3 linux C 进程与多线程入门--(3)信号
  • 原文地址:https://www.cnblogs.com/bi-hu/p/14821150.html
Copyright © 2020-2023  润新知