display: block和display: inline的区别

最新推荐文章于 2023-05-18 15:53:55 发布
最新推荐文章于 2023-05-18 15:53:55 发布
阅读量439 收藏 2
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_zcq/article/details/86689851
版权

display:block

1.处于常规流中，width没有设置会自动填满父容器
2.margin，pading生效
3.高度没有设置的情况下，会被处于常规流中的子元素撑开
4.vertical-align无效

display:inline

1.margin、padding在竖直方向无效，水平方向有效
2.width、height对display:inline元素无效，对于inline-block元素有效，常见的inline-block有img、input
3.white-space，vertical-align有效
4.行框高由line-height决定
6.浮动，绝对定位会使得元素自动变成块状元素

csdn_zcq
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
display: block；和display: inline；的区别
liuhao9999的博客
03-22 209
block元素特点： 1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align inline元素特点 1.水平方向上根据direction依次布局 2.不会在元素前后进行换行 3.受white-space控制 4.margin/padding在竖直方向上无效，水平方向上有效 5.widt.
display:inline-block的原理分析
09-25
这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、高度以及垂直方向的 margin 和 padding。这对于创建复杂的网页布局和响应式...
display的block和inline属性
程序员小周的博客
07-31 230
block元素特点：1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-aligninline元素特点1.水平方向上根据direction依次布局 2.不会在元素前后进行换行 3
display:inline 和display:inline-block和display:block的区别
weixin_34121282的博客
11-21 110
之前讲过块级元素使用display：block 行内元素使用display:inline 那么今天我们就来区分一下display:inline，display:inline-block和display:block的区别 首先先说一个名词 :inline element：行内元素也叫作内联元素，内嵌元素，直进式元素 bl...
display:block和display:inline的区别
azirong的博客
07-10 582
block元素特点： 1、处于常规文档流中，如果没有设置width属性，会自动填充父类容器。 2、可以应用外边距margin、内边距padding。 3、在没有设置高度的情况下，会扩展高度，以包含常规文档流中的子元素。 4、总是在新行开始。 5、忽略vertical-align。 inline元素特点： 1、不会在元素前后换行，水平方向上依次布局。 2、宽度由元素内容决定。 3、m
display block 和 inline有什么区别
Aero_K的博客
08-29 468
元素分类 display: inline 表示的是行内元素，用单词inline表示，一个挨着一个，都在同一行从左到右的顺序显示。，也可以称为内联元素，内嵌元素等。 特点： display: block表示的是块级元素，用英文单词block表示，块级元素在浏览器显示时会独占一行，多个block元素会各自新起一行。 display: inline-block表示的是内联块状元素。内联块...
display:inline、display:block和display:inline-block的区别
star的博客
05-11 1281
display:inline 转化成内联元素，不换行 display:block 转换成块元素，换行 display:inline-block 内联块元素，既不换行又可以使用块元素所拥有 的属性，类似于块元素加了浮动效果，但低版本浏览器对这个不支持。
CSS属性display:inline-block用法深入理解
09-25
`display:inline-block`是其中一种特殊的值，它结合了`inline`和`block`两种显示特性的优点，使得元素既能像内联元素一样并排显示，又能像块级元素一样控制内容的宽度和高度。下面我们将深入探讨`display:inline-...
display:inline-block的使用示例
09-25
总结来说，`display:inline-block`是解决浮动元素换行问题的有效方法，配合`white-space:nowrap`和`font-size:0`可以实现紧密排列的多列布局。这种布局技术在网页设计中有着广泛的应用，尤其是在创建响应式布局和...
CSS之使用display:inline-block来布局
糖长老莫小贝的博客
09-21 530
本文转载于https://www.cnblogs.com/Ry-yuan/p/6848197.html 感谢博主分享 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是t.
display: block ，display：inline 和display：inline-block 区别
seimeii的博客
05-18 224
display: block ，display：inline 和display：inline-block 区别
HTML行内元素和块级元素的区别
zbb202013030229的博客
12-13 2362
　HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。 一，行内元素与块级元素的区别： 1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它...
display：inline-block,block,inline的区别与用法
大白的博客
03-15 1480
一.首先要了解什么是块级元素与行级元素 块级元素 大家在学习的HML的过程中可能已经发现，有些标签非常霸道，它是独占一行的，别的元素（即标签）不能和它共享同一行，其后的多个block元素也自动换行，可以设置width，height，设置了width后即使该行还有剩余的位置，也同样独占一行，同样也可以设置margin和padding属性。 PS：常见的块级元素：h1~h6，div ，img，ul，f...
display:block和inline-block、inline-block区别
Evan's Blog ٩(๑❛ᴗ❛๑)۶
12-16 3732
一个后端，在前端的道路上从零踩坑总是很困难的，要做混合开发，不得不学呀 TnT。简单总结下常见的块级元素和行内元素，顺便说明下区别。 一、常见的块级元素 块级元素：块级大多为结构性标记 <address>...</adderss> <center>...</center> 地址文字 <h1>...&l...
css display:block和display:inline 的区别
zy103118的博客
10-29 180
一个元素如果 display:block后面的东西会换行，display:inline则后面东西不会换行 css中的display是设置元素显示的方式,block是一块状元素的方式显示， inline是以内联元素的方式显示，none是不不显示； 块状元素会单独占据一样，其他元素跟他在同一行的会被迫换行，挤到下一行那里去，inline则不会这样。 ...
「前端早读君008」新手必踩坑之display: inline-block
weixin_34416754的博客
01-02 216
今日励志语 往日不可追，来日犹可期，祝大家2019年继往开来 迷之间隙 我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下： <div class="nav"> <div class="nav-item"><a>我</a></div> ...
面试题13：display的block、inline和inline-block的区别
qq_51066068的博客
04-23 1103
面试官：请说一下display的block、inline和inline-block的区别 答： （1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性； （2）inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin； （3）inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之.
display:inline
简单生活
08-26 1024
内联(display:inline;)元素不能设置宽高，因为内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高 display:inline就是将元素显示为行内元素. 例如一个testtest默认会占2行,如果设置display:inline;,就会在一行内显示 h1 {font-size:12px;}h2,h4{font-size:12px; display:inline;}-->
display: block和display: inline-block;区别
最新发布
06-03
display: block将元素呈现为块级元素，会在前后添加额外的空间，使其独占一行或多行。而display: inline-block将元素呈现为内联块级元素，不会独占一行，但是可以设置宽高等块级元素的属性。inline-block的元素排列会受到空格、换行符等文本节点的影响，而block不会。通常来说，使用display: block的元素用于布局或显示一整块内容，而使用display: inline-block的元素用于布局或显示一部分内容并允许其他内容在同一行内显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值