css中display元素inline和block的概念及其

本文详细解析了HTML中块级元素与内联元素的区别,包括它们的默认行为、如何通过CSS改变显示方式,以及常见元素举例。了解这些基础知识有助于更精确地控制网页布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

inline、block总体的概念

  1. block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
  2. 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
    • 常见的块级元素有 div, form, table, p, pre, h1~h6, dl, ol, ul,li 等。
    • 常见的内联元素有 span, a, strong, em, lable, input, select, textarea, img, br 等。
  3. block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如p 元素,只能包含inline元素,而不能包含block元素。但是a元素是个例外,它可以包含块级元素和行内元素。
  4. 一般来说,可以通过display:inline和display:block的设置,来设置元素的排列和显示方式

主要区排列别对比:

  • display:inline;
  1.  inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  2. inline元素设置width,height属性无效。
  3. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  •  display:block;
  1.  block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
  2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  3. block元素可以设置margin和padding属性。
  • display:inline-block 
  1.  看元素的名称就知道,inline-block是block和inline的结合体,具有block和inline的全部特征
  2. 默认宽度就是它本身内容的宽度。
  3. 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
### CSS `display: inline-block` 的使用方法及特性 #### 特性概述 `display: inline-block` 是一种 CSS 显示模式,它融合了行内元素 (`inline`) 块级元素 (`block`) 的部分特性。具体来说,这种显示方式允许元素拥有块级元素的宽度高度控制能力,同时也保留了行内元素在同一行排列的特点[^1]。 #### 主要特点 - **可设置宽高**: 虽然该元素表现为行内元素,但它支持定义宽度 (`width`) 高度 (`height`) 属性,这通常只有块级元素才具备的能力[^2]。 - **不独占整行**: 不同于标准的块级元素(如 `<div>`),`inline-block` 元素不会强制占据一整行,而是能够其他相邻的 `inline-block` 或者其他行内元素并列展示。 - **垂直对齐功能**: 支持通过 `vertical-align` 属性调整其相对于周围内容的垂直位置,比如顶部、中部或者底部对齐等[^3]。 #### 基本语法结构 以下是应用此样式的简单 HTML CSS 示例: ```html <div style="border: 1px solid black;"> <span style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">Item</span> <span style="display: inline-block; width: 100px; height: 50px; background-color: salmon;">Another Item</span> </div> ``` 在这个例子中,两个 `<span>` 元素被赋予了 `inline-block` 样式,因此它们可以在同一行上呈现,并且各自具有指定的高度宽度。 #### 解决常见问题 当运用 `display: inline-block` 时可能会遇到一些间距问题,这是因为浏览器默认会在这些元素之间处理空白字符作为间隙。可以通过移除 HTML 中的实际空格或利用负边距等方式消除不必要的间隔。 #### 实际应用场景举例 - 创建水平导航菜单:每个菜单项都可以设为 `inline-block` 来实现横向布局的同时还能单独设定尺寸大小。 - 图片画廊设计:让图片容器既能按需调整大小又能紧密排列在一起形成网格效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值