Lazy loaded image
前端 笔记
CSS display 属性速查
字数 1279阅读时长≈ 4 分钟
2024-12-19
2024-12-19

CSS display 属性速查

 
💡
速查~
 
 

一、CSS display 属性速查表

显示类型
参数
功能
Block-Level Box
block
元素作为块级元素显示，前后带有换行符。占据其包含块的全部宽度。
Inline-Level Box
inline
元素作为内联元素显示，不会以新行开始，并且只占据所需的空间。
Inline-Block
inline-block
元素表现为内联元素，但可以设置宽度和高度，就像块级元素一样。
Flex Container
flex
定义一个弹性盒容器，其子元素（项目）将按照弹性盒模型布局。
Grid Container
grid
定义一个网格容器，其子元素（项目）将按照网格布局模型布局。
Table Elements
table
模拟表格的行为，允许使用类似HTML表格标签的样式。
ㅤ
inline-table
类似于table，但是作为内联元素处理。
ㅤ
table-row-group
表示一组行，类似于HTML中的<tbody>。
ㅤ
table-header-group
表示表头组，类似于HTML中的<thead>。
ㅤ
table-footer-group
表示表脚组，类似于HTML中的<tfoot>。
ㅤ
table-row
表示一行，类似于HTML中的<tr>。
ㅤ
table-column-group
表示一组列，类似于HTML中的<colgroup>。
ㅤ
table-column
表示一列，类似于HTML中的<col>。
ㅤ
table-cell
表示单元格，类似于HTML中的<td>或<th>。
ㅤ
table-caption
表示表格标题，类似于HTML中的<caption>。
Flow Root
flow-root
创建一个新的块格式化上下文（BFC），不影响元素的显示方式。
None
none
元素不生成任何框，即它完全从文档流中移除。
Contents
contents
元素本身不会被渲染，但它的子元素会替代它在文档流中出现的位置。
List Item
list-item
元素作为列表项显示，通常带有序号或项目符号。

二、详细教程

Display属性详解

display属性用于定义元素生成的框类型以及它如何与其他元素一起布局。不同的值可以让元素以不同方式呈现，从而影响页面的布局结构。
  1. Block-Level Box (block)
      • 当元素设置为block时，它会在页面上占据一整行，即使它的内容实际上不需要那么多空间。
      • 示例代码：
    1. Inline-Level Box (inline)
        • inline元素仅占用必要的空间，它们之间没有换行符。
        • 示例代码：
      1. Inline-Block (inline-block)
          • inline-block元素结合了inline和block的特点，可以设置宽度和高度，同时保持在同一行。
          • 示例代码：
        1. Flex Container (flex) 和 Grid Container (grid)
            • 这两个值分别创建弹性盒和网格布局容器，提供强大的布局控制能力。
            • 示例代码：
          1. Table Elements
              • 使用这些值可以模拟HTML表格的布局行为，适用于需要表格外观但不想使用实际表格标签的情况。
              • 示例代码：
            1. Flow Root (flow-root)
                • 创建一个新的块格式化上下文，这有助于解决浮动或绝对定位元素引起的布局问题。
                • 示例代码：
              1. None (none)
                  • 设置display: none会使元素完全不可见，也不会占用任何空间。
                  • 示例代码：
                1. Contents (contents)
                    • 此值使得元素自身不会被渲染，但它所有的孩子元素仍然会被渲染到页面中。
                    • 示例代码：
                  1. List Item (list-item)
                      • list-item元素会显示为带有项目符号或编号的列表项。
                      • 示例代码：

                    三、Position属性及其应用案例

                    position属性决定了元素在文档中的定位方式。下面是一些常见的position值及其实例：
                    • .relative：相对定位。元素相对于其正常位置进行定位，但不会脱离文档流。
                    • .absolute：绝对定位。元素相对于最近的非static定位祖先元素进行定位；如果没有这样的祖先，则相对于初始包含块（通常是视口）。
                    • .fixed：固定定位。元素相对于浏览器窗口进行定位，滚动页面时元素位置固定不变。
                    • .sticky：粘性定位。元素根据用户的滚动位置来定位，它基于用户滚动的位置在相对定位和固定定位之间切换。
                    以上是关于display属性的速查表和教程，以及position属性的应用实例。通过理解和运用这些属性，您可以更灵活地控制网页的布局和元素之间的关系。
                    上一篇
                    CSS Flex布局和浮动及Position属性
                    下一篇
                    使用GitHub Pages发布静态网页
                    评论
                    Loading...
                    目录