当前位置：首页 > wzjs >正文

建设银行上海分行招聘网站经典案例网站

wzjs 2025/9/18 7:08:21

建设银行上海分行招聘网站,经典案例网站,南宁seo企业优化,wordpress 白边CSS display 属性详解属性设置元素是否被视为块级或行级盒子以及用于子元素的布局，例如流式布局、网格布局或弹性布局。一、基础显示模式 1. block 作用： 元素独占一行可设置宽高和内外边距默认宽度撑满父容器应用场景： 布局容器&a…

CSS display 属性详解

属性设置元素是否被视为块级或行级盒子以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

一、基础显示模式

1. block

作用：

元素独占一行
可设置宽高和内外边距
默认宽度撑满父容器

应用场景：

布局容器（div/section/article）
段落文本（p）
列表项（li默认样式）

div {display: block;width: 80%;margin: 0 auto;
}
/* 创建通栏页眉 */
.header {display: block;width: 100%;height: 60px;background: #333;
}

1. inline

作用：

元素水平排列
不可设置宽高
宽度由内容决定

应用场景：

文字修饰元素（span/em/strong）
超链接（a）默认样式
行内文本元素

span {display: inline;color: red;/* width: 100px; 无效 */
}

3. inline-block

作用：

兼具块级与行内特性
可设置宽高
元素水平排列

应用场景：

导航菜单项
图标按钮
表单控件对齐

.nav-item {display: inline-block;width: 120px;padding: 10px;
}

二、现代布局模式

1. flex

快速了解CSS弹性布局

主要设置元素

作用：

创建弹性盒子布局
主轴/交叉轴排列控制
子元素弹性伸缩

应用场景：

响应式导航栏
卡片等分布局
垂直居中实现

.container {display: flex;justify-content: space-between;align-items: center;
}.card-container {display: flex;gap: 20px;justify-content: space-around;align-items: center;
}

1. grid

作用：

创建网格布局
二维布局控制
精确行列定义

应用场景：

仪表盘布局
图片画廊
复杂表单布局

.grid-container {display: grid;grid-template-columns: 1fr 2fr;gap: 20px;
}

三、特殊显示模式

1. none

作用：

元素完全隐藏
不占据文档流空间

应用场景：

动态显示/隐藏元素
响应式隐藏某些内容


.mobile-menu {display: none;
}
@media (max-width: 768px) {.mobile-menu {display: block;}
}

table 系列

属性值	作用	应用场景
table	模拟<table>元素	表格样式布局
table-row	模拟<tr>	配合表格布局使用
table-cell	模拟<td>/<th>	垂直居中解决方案


/* 传统垂直居中方案 */
.vertical-center {display: table-cell;vertical-align: middle;height: 200px;
}

3. list-item

作用：

显示为列表项
生成标记框（如圆点）

应用场景：

自定义列表样式
有序/无序列表改造

.custom-list {display: list-item;list-style-type: square;margin-left: 20px;
}

四、混合模式

1. inline-flex

特点：

行内级弹性容器
外部表现像inline
内部使用flex布局


.inline-flex-container {display: inline-flex;align-items: center;
}

2. inline-grid

特点：

行内级网格容器
外部表现像inline
内部使用grid布局

.inline-grid-container {display: inline-grid;grid-template-columns: repeat(3, 100px);
}

其他

1. contents

作用：

元素自身不生成盒子
子元素提升到父级层级

应用场景：

无障碍优化
布局结构调整

示例：

<!-- 移除中间容器层级 -->
<div class="wrapper" style="display: contents"><section>直接内容</section>
</div>

2. flow-root

作用：

创建BFC块级格式化上下文
解决浮动塌陷问题

应用场景：

清除浮动
防止外边距合并

📌 使用建议

优先使用现代布局：Flex/Grid > Float/Table

注意浏览器兼容性：

Grid布局需要IE11+
flow-root需要Chrome58+/Firefox53+

📚 综合对比表

属性值	布局维度	是否换行	尺寸控制	典型应用
block	一维	是	支持	结构容器
inline	一维	否	不支持	文本元素
inline-block	一维	否	支持	导航项
flex	一维	可选	支持	响应式布局
grid	二维	可选	支持	复杂布局
table	-cell	一维	否	支持