block，inline和inline-block的概念以及区别

最新推荐文章于 2024-03-21 15:00:00 发布
最新推荐文章于 2024-03-21 15:00:00 发布
阅读量474 收藏
点赞数
分类专栏： css总结 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45432334/article/details/104500224
版权
本文详细介绍了CSS中的三种元素类型：block、inline和inline-block。block元素占据整行，支持宽高和内外边距设置；inline元素不独占行，宽度随内容变化，水平方向的margin和padding有效；inline-block则结合两者特性，允许同行显示并可调整宽高。常见block元素包括div、p、h1等，内联元素如a、img、span等。
摘要由CSDN通过智能技术生成

1、block块级元素

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

block元素可以设置margin和padding属性。

2、inline内联元素

inline元素不会独占一行，多个相邻的行内联元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

inline元素设置width,height属性无效。

inline元素的margin和padding属性，水平方向的padding-left,padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top,padding-bottom,margin-top, margin-bottom不会产生边距效果。水平有效果，竖直无效果

3、inline-block内联块

将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将ul元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

4、常见块级元素<

最低0.47元/天 解锁文章
喵半仙
关注
专栏目录
浅谈：block、inline和inline-block
qq_35363800的博客
07-31 207
浅谈：block、inline和inline-block 总体概念 1、block：block-level elements（块级元素）和 inline：inline elements （内联元素）是 HTML 元素的 display 属性，是 HTML 元素的布局形式。block 元素通常被实现为独立的一块，此类元素的前后会带有换行符；inline 元素通常都是在同一行显示（当该行排满后换行显示），其单个元素的前后不会产生换行符。 2、根据 CSS 规定，每一个 HTML 元素都有一个 display 属
block 和 inline 的区别
09-27
国内的论坛也好，国外的论坛也好，似乎大家都会比较疑惑这两者究竟是用来干什么的。想想其实好多人都会在这里犯一些比较常见错误，所以干脆就开一篇文章专门讲讲 block 和 inline 吧。
block，inline和inline-block概念和区别
lihei12345的专栏
07-13 1412
[转]  总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（
inline和inline-block的区别
qq_41240287的博客
05-06 325
https://blog.csdn.net/kalama/article/details/79057686
inline和inline-block有什么区别？
最新发布
alive_new的博客
03-21 611
inline 元素是内联元素，水平排列，不会独占一行，不可以设置宽度和高度。inline-block 元素是内联块级元素，水平排列，可以设置宽度和高度，可以在一行中排列，也可以在多行中换行。使用 inline 适合不需要设置宽度和高度，只需水平排列的元素。使用 inline-block 适合需要控制宽度和高度，同时水平排列的元素，以及在一行中排列多个元素或需要换行的场景。
inline和inline-block区别
qq_44823936的博客
08-26 249
最近在写页面的时候一直纠结这俩属性有什么区别，最后还特意查了下，一样可以在同行显示，但inline-block可以调节高度、宽度。 原文：https://zhidao.baidu.com/question/527108547.html
关于css display: inline block inline-block的区别分析
01-21
display:inline-block 将...不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似，为什么是“形似”而不是“神似”呢？这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症，比如使用这一属性后，
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
在网页布局中，`inline-block` 是一种常用的CSS布局方式，它允许元素保持内联特性的同时，具有块级元素的宽度和高度可调整性。然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的...
display:inline、block、inline-block的区别（转的）
08-07
本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别，帮助你更好地理解它们在实际开发中的应用。 首先，我们来看`display:inline`。这种模式使得元素...
转正测试——未答出的题目（JS基础）
漏气的可乐的博客
09-02 283
1.清除浮动的方法 答： 1.给父元素添加 overflow:auto;zoom:0.08; 2：给子元素后添加一个空的div, css属性设置为clear:both;height:0;line-height:0;font-sizing:0; 3：万能清除浮动法 ：after{clear:both;content:’.’;display:block;height:0;width:0;visib...
display:inline-block，block，inline的区别与用法
weixin_30608503的博客
06-01 211
一、首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。 ps:常见的块级元素:div,img,ul,form,p等 行级元素 与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以...
inline-block和block的区别
gao_zhennan的博客
02-24 5560
一、块级元素和内联（行内）元素的特点 块级元素 1. 独占一行 2. 可以设置属性：width、height、margin-top和margin-bottom 内联元素 1. 多个元素在一行显示
inline 与inline-block到底有什么区别
qill_qill的博客
06-04 619
之前对inline与inline-block一直感觉比较容易混淆他们之间的特性，特别是在看到这个图的时候，这是对“box2”设置为{display:inline-block;} 那么什么是inline呢，根据字面意思，它是在一条线上的，那么内联就是这些元素是排成一条线的； 那inline-block又是什么呢，在W3SCHOOL里面解释它就是排成线，但表现得像块一样，不过感觉还是很模糊；
常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？
热门推荐
天心天地生的博客
09-15 1万+
每个html标签元素都有其默认的元素类型，主要包括两大类:inline内联元素、block块元素。除默认为以上两种，还有部分标签元素叫可变元素，会根据上下文语境决定该元素为inline元素或是block元素。在css里，有一个display的属性，他规定元素应该生成的框的类型。可能的值有很多，inline、block、inline-block,其中inline-block是在css2.1里新...
【CSS篇】inline block和block的区别
weixin_33828101的博客
03-09 156
1.如图所示IFE(小薇学院)任务六，模拟报纸排版中需实现如下效果 开始我是用span将两个单词分别包裹，设置border-bottom来实现下划线的，可是当我企图用CSS3的伪元素first-letter将首字母选中调整其字体大小时发现，用span:first-letter根本无法选中首字母，样式不生效，后查看W3C示例时发现其是放在...
block，inline和inline-block的区别是什么？
m0_57236802的博客
07-14 331
块级元素会在其前后创建新的行，表现为“块状”。块级元素会尽可能宽，填满其父元素的宽度。你可以设置块级元素的宽度和高度。：行内元素不会在其前后创建新的行，它们会在一行内显示。行内元素只有包围它们的内容那么大，你不能设置行内元素的宽度和高度（元素会在一行内显示，不会在其前后创建新的行。但是，像块级元素一样，你可以设置。是一个行内元素，它在一行内显示，不能设置宽度和高度。元素，它在一行内显示，同时你可以设置它的宽度和高度。是一个块级元素，它在其前后创建了新的行。一些常见的行内元素包括。在这个例子中，红色的。
display: inline、block、inline-block的区别
qq_38719039的博客
07-13 407
     display:block就是将元素显示为块级元素。　　block元素的特点是： 此元素将显示为块级元素，此元素前后会带有换行符。　　高度，行高以及顶和底边距都可控制；　　宽度缺省是它的容器的100%，除非设定一个宽度　　&lt;div&gt;, &lt;p&gt;, &lt;h1&gt;, &lt;form&gt;, &lt;ul&gt; 和 &lt;li&gt;是块元素的例子。　　d...
layui-input-inline和layui-input-block的区别
05-05
`layui-input-inline` 和 `layui-input-block` 是两个不同的样式类，用于设置表单元素的显示方式。 `layui-input-inline` 用于将表单元素以行内方式（inline-block）展示，即表单元素之间不会换行，而是在同一行内...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值