block,inline-block,inline之间的区别

本文详细介绍了CSS中三种常用的display属性:block、inline-block和inline的区别及应用。block元素会独占一行并可设置宽高;inline元素在同一行内显示且无法直接设置宽高;inline-block则兼具两者特性。此外,还列举了常见的块级和内联元素。

display的三种常用属性:block,inline-block,inline

block:此元素将显示为块级元素,此元素前后会带有换行符。
inline:默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block:行内块元素。(CSS2.1 新增的值)

block
1.块级元素的特点:
(1)元素独占一行,在未设置宽度时,其宽度随父容器的宽度
(2)可设置width,height,margin,padding属性
(3)可以容纳内联元素和其他块元素
2.常见的块级元素有:
◎ address - 地址
◎ blockquote - 块引用
◎ center - 居中对齐块
◎ dir - 目录列表
◎ div - 常用块级容器,也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - 大标题
◎ h2 - 副标题
◎ h3 - 3级标题
◎ h4 - 4级标题
◎ h5 - 5级标题
◎ h6 - 6级标题
◎ hr - 水平分隔线
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容)
◎ noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表(无序列表)

inline-block
inline-block比较特殊,它既有block的属性,也有inline的属性,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。但是这个属性目前不是所有的浏览器都支持,只有Opera和Safari支持,FireFox3和IE8据说将会支持,Firefox2和IE使用特殊办法可以实现这种效果。

inline
1.内联元素特点:
(1)一系列inline元素都在一行内显示,直到该行排满
(2)设置width,height属性无效,元素宽度随内容的多少而改变
(3)line-height、margin-top、margin-bottom设置无效
(4)只能容纳文本或者其他内联元素
2.常见内联元素
◎ a - 锚点
◎ abbr - 缩写
◎ acronym - 首字
◎ b - 粗体(不推荐)
◎ bdo - bidi override
◎ big - 大字体
◎ br - 换行
◎ cite - 引用
◎ code - 计算机代码(在引用源码的时候需要)
◎ dfn - 定义字段
◎ em - 强调
◎ font - 字体设定(不推荐)
◎ i - 斜体
◎ img - 图片
◎ input - 输入框
◎ kbd - 定义键盘文本
◎ label - 表格标签
◎ q - 短引用
◎ s - 中划线(不推荐)
◎ samp - 定义范例计算机代码
◎ select - 项目选择
◎ small - 小字体文本
◎ span - 常用内联容器,定义文本内区块
◎strike - 中划线
◎ strong - 粗体强调
◎ sub - 下标
◎ sup - 上标
◎ textarea - 多行文本输入框
◎ tt - 电传文本
◎ u - 下划线
◎ var - 定义变量

(完)

### display: inline-block `display: inline-block` 用于创建一个行内块级元素。该元素的行为类似于行内元素,但它内部的内容以块级元素的方式进行布局,这意味着可以为其设置宽度、高度、内边距和外边距,并且这些属性会生效。同时,该元素不会强制换行,因此它可以与相邻的行内元素或文本在同一行内显示。这种显示方式在需要对元素进行精确控制的同时又希望它能与其他内容在同一行展示时非常有用 [^2]。 ### display: inline-flex `display: inline-flex` 使元素成为一个弹性盒子容器(flex container),并且该容器的外层显示类型为“行内”(inline-level)。这表示该容器可以像文本或图片那样只占据自身内容所需的空间,并且可以和相邻的行内元素在一行内并排出现。与 `display: flex` 不同的是,`inline-flex` 容器不会独占一行,而是根据其内容的大小进行扩展 [^1]。 ### 主要区别 1. **布局模式**: - `display: inline-block` 的内部布局仍然是传统的盒模型布局,可以设置宽高,但不会自动调整子元素的排列方式 。 - `display: inline-flex` 触发 Flexbox 布局模型,其子元素会根据 Flexbox 规则自动排列,支持灵活的对齐、分布空间等功能 。 2. **对子元素的影响**: - `display: inline-block` 不影响其子元素的布局方式,子元素仍然按照传统的块级或行内元素进行布局。 - `display: inline-flex` 会将其直接子元素转换为 Flex 项目(flex items),这些子元素会受到 Flexbox 相关属性(如 `justify-content`、`align-items` 等)的控制 。 3. **适用场景**: - `display: inline-block` 更适合简单的行内布局需求,尤其是需要对宽高进行控制的场景。 - `display: inline-flex` 更适合需要高度灵活的布局场景,例如水平或垂直对齐多个元素、自动分配空间等。 ### 示例代码 #### `display: inline-block` 示例 ```html <div style="display: inline-block; width: 100px; height: 50px; background-color: lightblue; margin: 5px;"> inline-block </div> <span style="display: inline-block; width: 100px; height: 50px; background-color: lightgreen; margin: 5px;"> Another inline-block </span> ``` #### `display: inline-flex` 示例 ```html <div style="display: inline-flex; align-items: center; background-color: lightblue; padding: 10px; margin: 5px;"> <div style="margin: 5px;">Item 1</div> <div style="margin: 5px;">Item 2</div> </div> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值