css display的用法

 

none

此元素不会被显示。

block

此元素将显示为块级元素,此元素前后会带有换行符。

inline

默认。此元素会被显示为内联元素,元素前后没有换行符。

inline-block

行内块元素。(CSS2.1 新增的值)

list-item

此元素会作为列表显示。

run-in

此元素会根据上下文作为块级元素或内联元素显示。

compact

CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

marker

CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

table

此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

inline-table

此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。

table-row-group

此元素会作为一个或多个行的分组来显示(类似 <tbody>)。

table-header-group

此元素会作为一个或多个行的分组来显示(类似 <thead>)。

table-footer-group

此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。

table-row

此元素会作为一个表格行显示(类似 <tr>)。

table-column-group

此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。

table-column

此元素会作为一个单元格列显示(类似 <col>)

table-cell

此元素会作为一个表格单元格显示(类似 <td> 和 <th>)

table-caption

此元素会作为一个表格标题显示(类似 <caption>)

inherit

规定应该从父元素继承 display 属性的值。

 

### CSS `display` 属性常用方法及其封装技术 #### 一、`display` 属性概述 在网页开发中,`display` 是一个重要的 CSS 属性,用于控制元素的显示方式以及其内部子元素的行为模式。不同的取值决定了元素属于何种类型的盒模型,进而影响页面布局效果[^2]。 #### 二、常见 `display` 取值介绍 - **inline** - 行内元素,默认情况下不会独占一行展示,多个 inline 元素可以在同一行排列。 - **block** - 块级元素,每个 block 元素都会占据新的一行空间,并且宽度默认为父容器的100%。 - **inline-block** - 结合了上述两种特性的中间状态,既像行内元素那样允许在同一行并列存在,又具备块状元素可设置宽高特性。 - **none** - 隐藏该元素的同时移除它所占用的空间,在 DOM 流中完全消失。 - 创建弹性盒子容器,使直接子项成为灵活项目(Flex Items),能够方便地实现复杂而响应式的布局方案[^3]。 ```css /* 示例 */ .container { display: flex; } .item { /* 子元素自动变为 Flex Item */ } ``` #### 三、基于 `display` 的组件化封装实践 为了提高代码复用性和维护效率,可以通过预处理器如 SASS 或者 LESS 来创建混合宏(mixin)、函数等功能来简化样式编写过程;也可以利用现代前端框架 Vue/React 提供的状态管理机制配合 styled-components 等工具来进行更高级别的抽象与组合: ##### 使用 SCSS 编写 Mixin 实现通用按钮样式的快速应用 ```scss @mixin button-style($color, $bg-color) { color: $color; background-color: $bg-color; padding: 8px 16px; border-radius: 4px; cursor: pointer; &:hover, &:focus { opacity: 0.9; } } .btn-primary { @include button-style(#fff, #1e7bbf); } .btn-secondary { @include button-style(#000, #ddd); } ``` ##### 利用 React Hooks 构建动态切换可见性的模块 ```javascript import React, { useState } from &#39;react&#39;; import &#39;./ToggleableComponent.css&#39;; function ToggleableComponent({ children }) { const [isVisible, setIsVisible] = useState(true); function toggleVisibility() { setIsVisible(!isVisible); } return ( <div> <button onClick={toggleVisibility}> Click me to hide/show component </button> {/* 动态调整 display */} <div className={`content ${!isVisible ? &#39;hidden&#39; : &#39;&#39;}`}> {children} </div> </div> ); } export default ToggleableComponent; ``` ```css .hidden { display: none !important; } .content { transition: all ease-in-out 0.3s; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值