【CSS】——display:inline与display:block

最新推荐文章于 2024-12-09 22:46:21 发布
原创 最新推荐文章于 2024-12-09 22:46:21 发布 · 416 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解释了CSS中display属性的几种用法，包括如何使用display:inline将块级元素变为行内元素，使用display:block将行内元素变为块级元素。此外还介绍了hidden与display:none的区别：前者使元素不可见但仍占据空间，后者则使元素既不可见也不占据空间。

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

display:inline是将块级元素变成行内元素，对应的不显示是display:none。

display:block是将行内元素变成块级元素，对应的不显示是hidden。

关于hidden与display:none的区别是：hidden是不显示但占用地方，而display:none不显示也不占用地方。

25-display:block；display: inline；display: inline-block；
qq_47462646的博客
12-05 454
【代码】25-块标签,行内标签,行内块标签，特殊标签。
关于css display: inline block inline-block的区别分析
01-21
display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有：Opera、Safari。 但很遗憾，最...
css display:block和display:inline 的区别
zy103118的博客
10-29 218
一个元素如果 display:block后面的东西会换行，display:inline则后面东西不会换行 css中的display是设置元素显示的方式,block是一块状元素的方式显示， inline是以内联元素的方式显示，none是不不显示； 块状元素会单独占据一样，其他元素跟他在同一行的会被迫换行，挤到下一行那里去，inline则不会这样。 ...
css display:inline-block 和display:block的区别
god_wen的博客
01-04 803
display:block之后有换号符号，所以会排成竖线 display:inline-block：没有换行符，所以会排成横线
display:block和display:inline的区别
azirong的博客
07-10 626
block元素特点： 1、处于常规文档流中，如果没有设置width属性，会自动填充父类容器。 2、可以应用外边距margin、内边距padding。 3、在没有设置高度的情况下，会扩展高度，以包含常规文档流中的子元素。 4、总是在新行开始。 5、忽略vertical-align。 inline元素特点： 1、不会在元素前后换行，水平方向上依次布局。 2、宽度由元素内容决定。 3、m
block、inline、inline-block三者的区别
清徐柳的博客
03-27 4966
block、inline、inline-block地区别
block、inline和inline-block
热门推荐
每个人为不同的理由带着面具说谎，动机也只有一种名字那 叫做欲望
01-07 1万+
block、inline、inline-block行内元素和块级元素blockinlineinline-block行内元素和块级元素的区别常见用法 行内元素：又叫内联元素， 块级元素：是一个元素，占用了全部宽度，在前后都是换行符
【CSS 面经】display: block、display: inline 和 display: inline-block 的区别
lph159的博客
12-09 2843
的元素会占据页面中从左到右的整行，通常会从新的一行开始显示。这类元素会导致页面的布局结构发生变化，因为它们会自动填满父元素的宽度，并且可以设置宽度、高度、外边距和内边距等属性。与block元素不同，的元素不会从新的一行开始显示，而是依照其内容的大小水平排列。inline元素只占据它实际内容所需的宽度，并且不支持设置宽度和高度属性。是inline和block两者的结合体。元素会像inline元素一样排列在同一行内，但又可以像block元素一样设置宽度和高度。
CSS样式的display: inline-block
听海边涛声
05-23 429
CSS样式的display: inline-block
CSS属性display:inline-block用法深入理解
09-25
首先，`display:inline-block`的作用是将元素呈现为内联对象，这意味着它们会与其他内联元素排列在同一行中，不会强制换行。同时，`inline-block`元素的内容会按照块级元素的方式处理，允许设置宽高、内外边距等。...
关于display的属性：block和inline-block以及inline的区别
sinat_31311369的博客
09-03 1万+
介绍一些简单的布局，block，inline-block，inline的简单区别，处女作哈哈
CSS中display为flex和inline-flex的区别
侯阮悦的博客
06-20 5317
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。 display: flex 将对象作为弹性伸缩盒显示 display: inline-flex 将对象作为内联块级弹性伸缩盒显示 flex 效果： 没有为父元素设置宽度，所以父元素的宽度为100%，而高度则是由子元素撑开，既高...
hadoop搭建细节超全
08-20
Hadoop超细节搭建，可以看看
Notepad++批量转UTF-8脚本
08-20
Notepad++批量转UTF-8脚本
Java-ssm423基于ssm框架的智能停车系统+vue-MySQL+开发环境（代码完整可运行）.zip
08-20
本项目是基于Java-ssm423框架开发的智能停车系统，结合Vue前端技术和MySQL数据库，旨在解决传统停车场管理效率低下、信息不透明等问题。系统主要功能包括车位实时监控、预约停车、在线支付、用户信息管理以及管理员后台操作等，通过智能化手段提升停车体验和管理效率。项目采用SSM（Spring+SpringMVC+MyBatis）框架作为后端基础，利用Vue框架构建用户友好的前端界面，MySQL数据库负责数据存储与处理，开发环境配置完整，代码结构清晰，可直接运行。该系统通过整合现代技术手段，实现了停车资源的优化配置和便捷管理，适用于各类停车场场景。毕设项目源码常年开发定制更新，希望对需要的同学有帮助。
内蒙古大学计算机视觉课程实验一任务内容概述
08-20
资源下载链接为： https://pan.quark.cn/s/c4888a611f17 内蒙古大学计算机视觉课程实验一任务内容概述（最新、最全版本！打开链接下载即可用！）
2025年高处作业吊篮安装拆卸工应知应会考试题库(含答案) .pdf
最新发布
08-20
2025年高处作业吊篮安装拆卸工应知应会考试题库(含答案) .pdf
基于Python+Selenium的招聘信息智能采集与分析系统_毕业论文和答辩稿.zip
08-20
基于Python+Selenium的招聘信息智能采集与分析系统_毕业论文和答辩稿.zip
css样式display: inline-block
03-18
### CSS `display: inline-block` 的使用方法及特性 #### 特性概述 `display: inline-block` 是一种 CSS 显示模式，它融合了行内元素 (`inline`) 和块级元素 (`block`) 的部分特性。具体来说，这种显示方式允许元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值