CSS中block与inline元素的特性与区别

最新推荐文章于 2021-05-25 06:40:56 发布
最新推荐文章于 2021-05-25 06:40:56 发布
阅读量203 收藏
点赞数
分类专栏： JavaScript 文章标签： CSS布局 块元素 行内元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32331073/article/details/82899969
版权

block块元素：

  • 默认占满宽度、自适应高度，但可修改宽高；
  • 前后均有换行符

inline行内元素：

  • 只需要必要的宽和高，且不可修改宽高；
  • 前后均无换行符

inline -block行内块元素：

  • 只需要必要的宽和高，但可修改宽高；
  • 前后均无换行符

特殊的，在css 常用布局display：table|grid|flex中items默认设置为inline- block

qq_32331073
关注
专栏目录
什么是块元素block和内联元素inline
11-22
什么是块元素block和内联元素inline，什么是块元素block和内联元素inline。。。
常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？
天心天地生的博客
09-15 1万+
每个html标签元素都有其默认的元素类型，主要包括两大类:inline内联元素、block块元素。除默认为以上两种，还有部分标签元素叫可变元素，会根据上下文语境决定该元素为inline元素或是block元素。在css里，有一个display的属性，他规定元素应该生成的框的类型。可能的值有很多，inline、block、inline-block,其中inline-block是在css2.1里新...
深入理解inline元素，block-level元素和display属性
jujuwuju的专栏
07-23 1022
行内元素和块级元素有什么异同？ 可能你觉得这是一个老掉牙的问题，但其实并没有那么简单。 对于初学者来说，当遇到面试官问到这个问题的时候，脑海里的第一印象是css的display属性，值为inline时为行内元素，值为block时为块级元素，那值为inline-block时呢，元素是块级行内元素吗？ 其实我们看问题的角度从一开始就错了，错误地站在了css的角度，而真正正确的是站在html的角度。因为这里的元素，本质上是指html的DOM元素。 下面我们就3个原理展开深入： 深入理解inline元.
常见的内联元素(inline)和块级元素(block)
初学者的博客
09-10 2万+
1.内联元素(inline)： a – 锚点  abbr – 缩写  b – 粗体(不推荐)  big – 大字体 br – 换行  cite – 引用 code – 计算机代码(在引用源码的时候需要) em – 强调  font – 字体设定(不推荐) i – 斜体 img – 图片 input – 输入框  kbd – 定义键盘文本 label – 表格标签 q – 短引用 span – 常...
HTML中display:inline;特性
lanseguhui的博客
05-24 1万+
display属性inline内嵌式布局特点:1.可以支持同行排列2.不支持宽高的设置,不支持上下margin设置,支持左右margin的设置,大小由内部的文字撑开3.内部的标签的只能是文字或者Inline型标签,项目中的inline主要用来套文字4.浏览器会解析文档中两个inline型标签之间的空白符为间隙,该间隙大小不可控,不同浏览器大小不一致消除该间隙的方法1.为其父级设置font-size...
详解CSS 去掉inline-block元素间隙的几种方法
09-22
inline-block是一种结合了内联元素与块级元素特性的CSS显示方式。它允许元素在一行内并排显示，同时还能设置宽度、高度和内外边距等块级元素的属性。例如，我们经常利用此特性来创建响应式布局或移动端页面。 二、...
CSS属性display:inline-block用法深入理解
09-25
首先，`display:inline-block`的作用是将元素呈现为内联对象，这意味着它们会与其他内联元素排列在同一行中，不会强制换行。同时，`inline-block`元素的内容会按照块级元素的方式处理，允许设置宽高、内外边距等。...
21.2 CSS 三大特性与页面布局
最新发布
08-22
CSS选择器是用于选取HTML或XML文档中元素的方式。它允许开发者精确地定位并应用样式。常见的选择器包括： - **类选择器**：以点号"."开头，如`.myClass`，用于选取具有特定类名的元素。 - **ID选择器**：以井号"+...
常见的inline元素、block元素、inline-block元素它们之间有什么区别
Geezer_007的博客
09-02 323
1⃣️什么是 block inline和 inline-block元素？ inline是内联元素 一个内联元素不会开始新的一行，并且只占有必要的宽度。 block是块级元素 一个块级元素总是开始新的一行，并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远) inline-block是内联块元素 它像内联元素...
HTML中哪些元素是inline？哪些是inline-block？哪些是block的? 有哪些区别？
精品小程序实战教程
02-12 2141
历史小故事 ：这三个元素到底是怎么产生的？ 在没有网络的时代，有一种叫做剪报的东西，它是把从报刊杂志等上面剪下的文字、图片资料，整理分类并集纳成册。我们可以把剪下来的纸块看成是block元素，而用笔记录的文字、图画，看成是line元素。最早在做浏览器的时候加入这两个元素，是遵循了同样的模式。 在2002年8月2日发布的css2.1版添加了display的inline-block值。为更好的进行...
block(块元素)、inline(内联元素)、可变元素　的区别
10-04 572
　　　所有的html元素，都要么是block(块元素)、要么是inline(内联元素)。下面了解一下block、inline各自的特点：　　　block元素的特点：　　总是在新行上开始；　　高度，行高以及顶和底边距都可控制；　　宽度缺省是它的容器的100%，除非设定一个宽度。　　　inline元素的特点： 　　和其他元素都在一行上；　　高，行高及顶和底边距不可改变；　　宽度就是它的
c语言的内联元素,内联元素(inline element)和块元素(block element)
weixin_32867521的博客
05-25 245
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，...
HTML元素分类：inline、inline-block、block
Finit的成长空间
10-16 6665
三者可以互相转化——设置display属性值：`inline、inline-block、block`
内联元素(inline)和块级元素(block)
Smallbo's Note
10-25 1577
常见的内联元素(inline)和块级元素(block)内联元素(inline)：a – 锚点 abbr – 缩写 acronym – 首字 b – 粗体(不推荐) big – 大字体 br – 换行 cite – 引用 code – 计算机代码(在引用源码的时候需要) dfn – 定义字段 em – 强调 font – 字体设定(不推荐) i – 斜体 img – 图片 i
关于input元素 和display:inline-block 的元素不在一水平线上的一点发现
acknowledged的博客
08-31 8276
每次用到了 元素 和inline-block的（不一定是span，其他一些inline的元素也是一样）元素，他们总是会不在一个水平线上，有时候用浮动可以解决。 但是有的时候并不想用浮动解决，这时候可以用vertical-aline来实现。 在W3School中，对于 vertical-aline 的介绍是：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。 也就是说，我在这个元素
常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？？
qq_43075771的博客
08-27 885
1.背景介绍 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元 素)。 block元素通常被显示为独立的一块，会单独占一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。 2.知识剖析 （1）大体来...
常用的块级元素（block）、行内元素（inline）以及行内块元素（inline-block）的解析
热门推荐
码飞_CC的博客
09-22 3万+
一.块级元素： 不废话，直接上图（div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等） 从浏览器的显示结果可以看出，块级元素新开启一行（即使是设置了width属性也是独占一行）、尽可能撑满父级元素的宽度，可以设置width和hei...
input标签和button放在一行写:inline元素的空白间隙问题
周公淡的博客
09-25 2万+
问题的缘由是因为我要写一个小组件,让一个input文本框和一个button按钮放在一行，类似如下的效果: 我的css设置如下：.same{ padding: 0; margin: 0; box-sizing: border-box; border: 0; height: 30px; } .div{ width: 300px; height:
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、付费专栏及课程。

余额充值