css inline, block, inline-block的区别

最新推荐文章于 2020-12-24 22:49:30 发布
最新推荐文章于 2020-12-24 22:49:30 发布
阅读量95 收藏
点赞数
分类专栏： CSS 文章标签： css display
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SJ1551/article/details/109389540
版权
本文将解析内联元素如`inline`、块级元素如`block`及它们的混合形式`inline-block`之间的区别，包括换行行为、尺寸控制、边距设置以及特殊应用场景。了解这些概念有助于提升CSS布局技巧。
摘要由CSDN通过智能技术生成
区别inlineblockinline-block
名称内联元素块级元素内联块
换行不换行，多个内联元素排列在一行，直至空间不够才换行独占一行与内联元素相同
大小只与内容有关，无法通过width/height修改大小可以使用width/height设置与块级元素相同
边距只可设置水平方向的margin, padding可设置与块级元素相同

补充：

  1. 块级元素即使设置了宽度，也会独占一行
  2. 内联元素设置垂直方向的padding时，background-color 会标识其 padding 区域，但元素高度不会发生变化，也就是不会再垂直方向上“挤压”到其他元素
Novice-XiaoSong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
block，inline和inline-block的概念以及区别
weixin_45432334的博客
02-25 462
1、block块级元素 block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。 block元素可以设置margin和padding属性。 2、inline内联元素 inline元素不会独占一行，多个相邻的行内联元素会排列在同一行里，直到一行排列不下...
HTML/CSS 元素的类型block, inline, inline-block
Discowei的博客
04-06 416
HTML/CSS 元素的类型block, inline, inline-block <!-- 1. block --> <div class="block-div">独占一行</div>standalone in one line <div class="block-div">我也独占一行</div> <!-- 2. inline --> <span class="inline-span">我是一个span</sp
block，inline和inline-block概念和区别
lihei12345的专栏
07-13 1393
[转]  总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（
CSS中display属性：block、inline和inline-block的区别
热门推荐
aty
02-28 1万+
设置span的高度和宽度无效,span的margin和padding无效
关于 display: inline 、block 、inline-block (二)
ChanGlz1314的专栏
08-29 743
display:block就是将元素显示为块级元素. block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度, , , , 和 是块元素的例子。display:inline就是将元素显示为行内元素.inline元素的特点是： 和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。, , ,
关于css display: inline block inline-block的区别分析
09-25
`display: inline`、`display: block` 和 `display: inline-block` 是三种常见的值，它们各自具有不同的行为和用途。 1. **display: inline** - `display: inline` 使得元素以行内元素的方式呈现，这意味着它们会...
CSS属性display:inline-block用法深入理解
09-25
总的来说，`display:inline-block`是一种强大的CSS属性，能够帮助开发者创建更加灵活和复杂的网页布局。尽管存在浏览器兼容性挑战，但通过合理的CSS hack和技巧，我们可以克服这些问题，实现跨浏览器的`inline-block...
兼容浏览器的css inline-block写法
09-24
在CSS中，display属性主要有四个值：none、block、inline和inline-block。其中block是默认值，代表块级元素，比如div，它会独占一行；inline则是内联元素的默认值，例如span，它不会独占一行；而inline-block则是...
CSS inline-block属性概述及其使用示例
09-25
CSS中的`inline-block`属性是`display`属性的一个值，它允许元素同时具有行内元素（inline elements）和块级元素（block elements）的特点。理解`inline-block`的关键在于其结合了两者的优势：行内元素的水平布局...
css 粘性布局
Novice-XiaoSong的博客
10-31 1万+
一、粘性布局 position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局 二、坑 粘性布局只在其父元素空间内生效，且要实现 “粘性” 效果，对其父元素有以下要求，否则粘性效果会失效 （1）必须满足父元素在需要粘的轴上的空间 > 粘性布局子元素在需要粘的轴上的大小（例如子元素设置top/bottom粘垂直轴，父元素的高度需要大于子元素的高度，这样才有可以活动的空间嘛） （2）父元素中不能设置 overflow: hidden 或 overf
css 设置元素不可见的几种方法
Novice-XiaoSong的博客
10-30 1747
display: none; 设置后元素（及其子元素）不占据空间 visibility: hidden; 设置后元素（及其子元素）占据空间 opacity: 0; 设置后元素（及其子元素）占据空间 其他一些不建议的方法 （1）设置text-indent、位置等让元素超出用户屏幕可见区域） （2）font-size: 0;, height: 0; overflow: hidden; 改变元素大小、空间 ...
css 设置文字溢出部分使用省略号代替
Novice-XiaoSong的博客
08-08 377
/* 溢出的文字直接省略 */ { white-space:nowrap; /* 文本不换行 */ overflow-x: hidden; /* x方向溢出部分隐藏 */ text-overflow:ellipsis; /* 溢出使用省略号表示 */ }
css 实现水平垂直居中
Novice-XiaoSong的博客
12-24 294
一、通过设置子元素 .parent{ position: absolute; /* 非static即可 */ width: 500px; height: 300px; } 子元素知道 width, height position, top, left, transform .child{ width: 100px; height: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50px, -2
CSS 知识点汇总
Novice-XiaoSong的博客
10-31 168
一、简介 CSS：Cascading Style Sheets 二、CSS选择器 元素: div { ... } id: #id { ... } class: .className { ... } 子孙: div p { ... } div的所有p子孙 子: div>p { ... } div的所有p子结点（不包含孙结点） 兄弟: div~p { ... } div的所有p兄弟结点 相邻兄弟: div+p div的所有p相邻兄弟结点，只匹配下相邻兄弟 属性: [ src$='.pdf' ] 中括
css 优先级
Novice-XiaoSong的博客
10-31 167
一、总结 层叠优先级 内联样式 > 样式表 > 外部样式表 > @import > 浏览器缺省 样式表优先级 ID选择器 > (伪)类选择器, 属性选择器 > (伪)元素选择器 > 通配符选择器 !important 标识的优先级最高。多个 !Important 按前2点计算相对优先级 二、注意 同优先级的选择器，后定义的覆盖先定义的 虽然伪元素的优先级较低，但伪元素选择器会创建新的元素，所以伪元素选择器设置的css会覆盖该伪元素继承而来的c
css position
Novice-XiaoSong的博客
08-07 133
可能的值 描述 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 fixed 相对于浏览器窗口进行绝对定位。元素通过 “left”, “top”, “right” 以及 “bottom” 属性设置位置。 absolute 相对于父元素进行绝对定位。元素通过 “left”, “top”, “right” 以及 “bottom” 属性设置位置。 relative 生成相对定位的元素，相对于其正...
css 定位
Novice-XiaoSong的博客
10-30 131
一、position 值 说明 是否脱离文本流 static 默认值，按照文本流定位 否 absolute 从父级向上查找第一个非 position: static 的元素，相对其进行绝对定位 是 relative 元素相对其在文本流的位置进行定位 否 fixed 相对浏览器窗口定位 是 inherit 从父元素继承 - 二、float 值 说明 是否脱离文本流 none 元素不浮动，在其文本流位置 否 left 向左浮动 是 right 向右浮动
css 伪类、伪元素
Novice-XiaoSong的博客
11-18 113
一、伪类、伪元素的共同点 伪类、伪元素存在的原因：css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。 二、伪元素、伪类的区别 **伪类：**伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。 伪元素：伪元素用于创建一些不在文档树中的元素，并为其添加样式。 ...
css BFC
Novice-XiaoSong的博客
11-19 113
BFC(Block Formatting Context)：块级格式上下文 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此 一、布局规则 内部块级盒子（block-level box）垂直方向的间距由 margin 决定 同属于一个BFC的内部块级盒子垂直方向的 margin 会发生重叠。 可以通过将内部块级盒子变为BFC来解决这个问题。 每个内部块级盒子外边距左边界，与外部的BFC的左边界（注意是content的左边界，需要偏移掉BFC的内外边距.
css的block与inline-block区别
最新发布
06-02
`block` 和 `inline-block` 都是 CSS 中用于设置元素显示方式的属性，它们之间的主要区别在于： 1. 盒子模型大小：`block` 元素通常会生成一个矩形框，它会占据整个可用的宽度（除非设置了具体的宽度），并且会在垂直方向上占用一整行。而 `inline-block` 元素则会根据内容自适应宽度，并且不会在垂直方向上占用整行，它们的盒子模型大小由它们的内容和盒子模型属性共同决定。 2. 布局方式：`block` 元素会将后续元素推到下一行，而 `inline-block` 元素则会允许其他元素在同一行内显示。这也就是为什么在使用 `inline-block` 元素时，你需要注意元素之间的空格和换行符会产生额外的空白间隔。 3. 位置属性：`block` 元素的 `position` 属性默认为 `relative`，而 `inline-block` 元素的 `position` 属性默认为 `static`。 在实际开发中，我们通常会使用 `block` 元素来布局页面的主要结构，例如标题、段落、图像等，而使用 `inline-block` 元素来设置一些内联元素的样式，例如按钮、输入框、超链接等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值