， 8 2月 2021 作者 847954981@qq.com 前端学习, 我的编程之路 行内元素与块元素间的转换及行内块元素 在HTML中行内元素和块元素间的区分，本质上是其标签默认存在了一个 display...借此原理，我们可以让指定标签在块元素与行内元素之间转换。...注，display 属性的值也可以设置为 none 此时表示此标签隐藏 在前面的文章中，我们知道了行内元素与块元素的区别 链接地址 但如果我们将 display 的值调节为 inline-block 此标签即为...行内块元素，简单来说就是能在同一行显示的块元素。...2.给父元素添加 word-spacing 属性 word-spacing 即单词与单词间的距离，将两个块放在统一父元素下，将父元素的单词间距调整为负数(这里的值要尽量小，一般为-20px)，这样回车造成的文字空白就消失了
1.行内元素： 特点： 与其他行内元素并排，不能设置宽高，默认的宽度就是文字的宽度。...行内元素有： 除了p之外，所有的文本级标签，都是行内元素。p是个文本级标签，但是是个块级元素。 ... ......块级元素：所有的容器级标签，都是块级元素，以及p标签。div , h系列 , li , dt ,dd。...注意： 段落元素（文字元素）内不能放块元素 例如，p标签里不能放div标签，h1中也不能放div ... ...... 3.行内块元素 特点： 和相邻的行内元素（包含行内块）在一行上，它们直接会有空白缝隙； 一行可以显示多个； 默认宽度就是内容的宽度； 高度、宽度、内外边距都可以自定义； 注意了：
行内元素： 行内元素只占据它对应边框所包含的空间，行内元素的 width 、 height 、 line-height 等设定长、宽和行高的属性都不起作用。...常用的块级元素有 div ， ul ， ol ， li ， form ， h1 - h6 ， hr ， table 。...行内块级元素： 行内块级元素也被称为可置换元素，它们既可以设置宽高又不会占据一整行的空间。 常见的行内块级元素有 img ， button ， input ， select ， textarea 。...当然，可以使用 CSS 的 display 属性给元素设置行内、块和行内块。...» 行内元素、块级元素和行内块级元素的区别和联系
块级元素与行内元素的区别以及BFC布局的简单解释 工作中其实经常用到一些span标签和div标签来进行内容的显示，但涉及到文本标签的换行，总得多花那么一两分钟多写一下，今天就专门来瞅一瞅。...按照标签的分类可以分为块级元素和行内元素 什么是块级元素？ 独占其父元素的整个水平空间，垂直空间等于其内容高度的元素称之为块级元素。...我们常用的div、h、p等标签都属于块级元素 可以看到，对于一个普通的div标签而言，其内部元素是可以超出其限定高度进行显示，有与外界内容重叠的情况 <!...也就是说对于文档流（Normal flow/正常流）而言块级元素将款级元素自从上往下、行内元素在每行中从左往右，从上往下的顺序排列。...来避免其与div2中的内容重叠。
文章目录 一、盒子模型位置摆放三大机制 - 普通流、浮动、定位 二、行内块元素的摆放缺陷 一、盒子模型位置摆放三大机制 - 普通流、浮动、定位 ---- 盒子模型位置摆放三大机制 : 普通流 : 默认的摆放样式...; 块级元素 摆放 : 每个 块级元素 独占一行 , 排列顺序 从上到下 ; 如 : div , p , h1 等 ; 行内元素 摆放 : 多个 行内元素 在同一行显示 , 排列顺序 从左到右...绝对布局 ; 二、行内块元素的摆放缺陷 ---- 行内块元素的摆放缺陷 : 缝隙无法控制 : 行内块元素 之间 有缝隙 , 该缝隙大小无法控制 ; 排列顺序无法控制 : 行内块元素只能从左到右进行排列..., 不能 左右对齐 或 右对齐 排列 ; 下面的示例中 , 行内块元素之间始终有一条 无法控制的缝隙 ; 行内元素代码示例 : <!...; height: 200px; background-color: pink; }
比如设定了width但未设置height, img的height会根据图片的大小按比列缩放。 3.html中行内块元素与行内元素和块级元素的区别？...如下图： image.png 那么这个行内块元素与行内元素和块级元素有什么区别呢？首先说一下行内元素与块级元素的区别。行内元素又称为“内联”元素。...（3）块级元素可以包含行内元素或块级元素，行内元素最好不要包含块级元素。因为不同浏览器有不同的容错处理，所以浏览器解析时可能会出错。...行内块元素：顾名思义就是行内的块级元素，拥有块级元素的特性但是却不独占一行，是行内元素与块级元素的折衷产品，这也是它与行内元素和块级元素的区别。其对应的框叫做行内块框。...但是不同的元素显示的方式会有所不同，例如和就不同，而和也不一样。
这次要细说的只是块级元素和行内元素的内容，如有不对，请轻喷。 块级元素和行内元素 默认情况下块级元素会始终占居一行，而行内元素并不会。...块级元素盒子（一个很重要的概念————盒模型）会扩展到与父元素同宽，这也是为什么块级元素会占居一行的原因了，因为所有块级元素的父元素都是 body，而它的默认宽度就是浏览器的视口大小，所以默认情况下块级元素的宽度也和浏览器的视口一样宽...相比于块级元素会扩展到与父元素同宽，然而行内元素的行为却是恰恰相反，它会尽量的收缩包裹其内容，这也就是为什么几个行内元素会并排显示在一行直到它们排满一行才会另起一行，而每个块级元素会直接另起一行的原因了...下表列出了一些常见的块级元素和行内元素： 块级元素 行内元素 div span form a table img header label aside input section select article...：它是块级元素还是行内元素，因为它们在盒模型上的表现有很大的不同，不过在了解它们的不同之前我们还得先知道另外一个概念————替换元素和非替换元素，其中替换元素就是指浏览器是根据元素的属性来判断具体要显示的内容的元素
元素的默认样式 是什么决定了元素的样式？为什么有的元素独占一行，而有的元素能共处一行？ ? 这要归因于元素的默认样式，这其中就有我们要探讨的第一个 CSS 知识点：行内元素和块级元素。...注意，在上面的例子中，为什么即使 img 标签是行内元素，头像图片依然独占一行？因为它下方的 div 是块级元素。 然后要注意，为什么 @handle、用户名和时间都在同一行？...这三个 span 和 文字 “insightful message” 处于不同行，因为（a）它们被包在一个 div 中，div 后面自然要另起一行；（b）p 标签同样是块级元素，它自然从新行开始排列。...此空间的大小也由默认样式控制：p 标签的顶部和底部都有 margin。 你也会注意到按钮列表的圆点，以及列表的缩进行为。这些也都是默认样式。我们马上就要修改这些默认样式了。...你可能会根据刚刚探讨的行内和块级知识来推断，认为只要把右侧的元素都包裹到一个如 span 标签般的行内元素中，就完事大吉了。 但这是行不通的。行内元素并不能阻止其内部的块级元素另起一行。
应该说是块级元素，或行内级元素。有一些网上教程沿用了旧说法，但不准确。 相关概念 块block，一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向上按照顺序依次堆叠。...与块级元素一样，元素是否是行内级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。 行内级盒子：inline-level box，由行内级元素生成。...与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。...盒子的概念 盒子有不同的类型，不同类型的盒子的格式化方法也有所不同。盒子的类型取决于 CSS display 属性。...块级盒子与块容器盒子是不同的，前者描述了元素与其父元素，和兄弟元素之间的行为，而后者描述了元素跟其后代子元素之间的行为。 同时是块容器盒子的块级盒子称为块盒子（block box）。
也是后一个元素的层级比前一个元素的层级高，不过和两个块级元素不同的是行内块元素的背景层级比文字高。...和行内块的行为一样，背景层级比文字高，并且也是后一个元素比前一个元素层级高。 小总结 当两个元素为正常流时，默认情况下后一个元素比前一个元素层级高，并且允许后面的元素透上来。...行内元素层级比行内块元素高，背景比文字层级高。 浮动系列 浮动和浮动，后一个比前一个层级高。 浮动和块元素，浮动层级高。 浮动和行内块，行内块层级高。 浮动和行内，行内层级高。 效果如下： ? ?...在没有设置背景的情况下，元素的背景是透明的，并且允许后面的元素透上来。 块元素和其他任意除定位元素以外，文字层级比背景层级高。 浮动和块元素，浮动层级高。 浮动和行内块，行内块层级高。...它们的前后顺序：小于0的z-index < 块 < 浮动 < 行内块 < 行内 < 定位 < 大于0的z-index 层叠上下文 如果你认真看完上一节，会不会奇怪一个问题，那就是在无特殊情况下为什么定位元素总是比普通元素层级高
块级元素和行内元素 3.1 块级元素 普通流中，块元素独占一行。例如：div，p，h1等。 3.2 行内元素 普通流中，行内元素左右可以有其他行内元素。 4....典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置，这也是为什么img是行内元素，但可以设置宽高的原因。...因此视觉效果就是与前面的行重叠。 margin左右作用起作用，上下不起作用，原因在于：行内非替换元素的外边距不会改变一个元素的行高 5....块级元素和行内元素的转换 5.1 块级->行内 display: inline 5.2 行内->块级 display: block 设置float css 行内元素 块元素 替换元素 非替换元素 以及这些元素的...替换元素和不可替换元素；块级元素和行内元素 置换元素(替换元素)和非置换元素(不可替换元素) 行内元素与块级元素的总结 置换和非置换元素
一、布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”，其实是一个错误的理解，导致了很多人过度依赖与滥用DIV标签， HTML提供了我们一共七八十个标签，其中常用的有三十个左右，DIV不过是一个相对的空标签而已...二、标签的差异 共性：都是一个容器，可以在其中放置内容 差异：分为行内和块级两个大类，且不同便签有相应含义上的预设，如：h-标题，p-段落，a-链接，等等 三、标签语义化的好处 a、让结构更简洁，让搜索引擎更友好... 定义一个块级元素的空盒子。 to 定义标题部分，默认有外边距，块级元素。 定义无序列表，默认有外边距和内边距，块级元素。... 自定义列表的标题，嵌套在内，与区别，块级元素。 自定义列表的内容，嵌套在内，与区别，块级元素。 定义段落，默认有一个行高的外边距。... 定义表单中的按钮 (push button)。 定义表单中的输入控件。 定义表单中的选择列表（下拉列表）。
这里的选项二可以点击文字达到点击单选框的效果。...导航 aside 不重要内容 em/strong 强调 i icon 0x5 HTML元素分类 按默认样式分 块级 block 行内 inline inline-block 表单、下拉框、输入框 DIV元素 //块级 内联元素内联元素好巧，我也是内联元素 //行内 下拉框 //inline-block 你猜左边是什么元素 1234 DIV元素 //块级...查看官方文档 0x6 HTML元素嵌套 块级元素可以包含行内元素 块级元素不一定能包含块级元素 “行内元素一般不能包含块级元素” 0x7 HTML默认样式 除特别注明外，本站所有文章均为慕白博客原创
不能混杂）； 如果块框内部有块级元素也有行内元素，那么行内元素会被匿名块框包围 匿名块框的生成： some inline text...more text div生成了一个块框，包含了另一个块框p以及文本内容some inline text，此时文本内容会被强制加到一个匿名的块框里面，被div.../div> div元素生成一个块框，其中有几个行内框（如em）以及文本some和text，此时会专门为这些文本生成匿名行内框； display属性的影响 display的几个属性也可以影响不同框的生成...（这也是为什么会产生BFC）； none，不生成框，不再格式化结构中，而另一个visibility：hidden则会产生一个不可见的框 总结： 如果一个框里，有一个块级元素，那么这个框里的内容都会被当作块框来进行格式化...FC内部的渲染）； 内部的规则可以是：如何定位、宽高计算、margin折叠等等 不同类型的框参与的FC类型不同，譬如块级框对应BFC，行内框对应IFC 注意：并不是说所有的框都会产生FC，而是符合特定的条件才会产生
个人感觉那些额外的框是用来放置标志的，比如，LI 元素前面的点。 匿名行框，例如： Some text More text DIV 看来包含行内内容和块内容。...最后的框(boxes)是围绕 SPAN 的DIV形成的块框，包含 C1 的匿名块框，P 的块框，和另一个包含 C2 的匿名块框。...注意，行框(line box)和行内框(inline box)是两个不同的概念，后续会说到行框(line box)。...后者就称为匿名行内控制框，因为它们没有与之相关的行内元素，所以，这些框被叫做匿名行内框。 这样的行内框从其父块框那里继承可以继承的属性。非继承属性取它们的初始值。...子孙元素也不产生任何框；该行为不能由设置子孙元素的 ‘display’ 属性而被覆盖。 请注意 ‘none’ 的显示特性并不生成一个不可见的框；它根本不生成框。
class="left">left right 我们希望得到的是两个行内块div，而且这两个div...没有设置间距，但上面代码的效果却带了间距： 这是由于浏览器解析行内或行内块标签时，若标签换行，那么效果也出现一个换行的距离。...➢ 常见标准流排版规则： 块级元素：从上往下，垂直布局，独占一行 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行 ---- 浮动 例如word里的图片环绕文字四周。...(行内块) 下一个浮动会挨着上一个浮动 浮动标签的margin: 0 auto;居中失效，但可外面嵌套div实现 ---- 清除浮动 作用：清除浮动带来的影响 场景：父盒子不方便设置高度，子孩子有多少内容展示多少...例如：h系列，p，div…… > 行内元素/行内块元素一行显示多个 ==> 水平布局。
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，...i内容展示为斜体， em 表示强调的文本； 6.实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？...c、表单按钮：包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。...，float布局最常见的浏览器兼容问题） 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性 备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签...14.为什么要初始化CSS样式？ 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
u reset：重置按钮。将表单恢复到默认值。 u image：图形提交按钮，通过src给按钮设置图片。 u button：普通按钮，常用于与JavaScript结合使用。...行内样式通过标签的属性来控制样式，这样并没有做到结构与表现（HTML展示结构、CSS显示效果）相分离，所以一般很少使用。学习阶段有时候为了快速编程，偶有使用。...1.2.5.2 转换：display HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。 块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。...常见的块元素：、、等 行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。...常见的行内元素：、 等 在开发中，希望行内元素具有块元素的特性，需要使用display进行转换 选择器{display:属性值} 常用的属性值： inline：此元素将显示为行内元素（
html中的行内元素和块级元素有哪些： 在html中，元素主要分为行内元素和块级元素； 行内元素指的是书写完成后不会自动换行，并且元素没有宽和高。 块级元素写完后会自动换行，有宽高可以修改。...还有一种特殊的元素叫做行内块元素。...html table button hr p ol ul dl cnter div 行内块元素常见的有： img input td 以上就是常见的行内元素和块级元素，还有常见的行内块元素 实例1：如何把元素显示为内联元素... 而 div 元素不会显示出来！ div 元素的内容不会显示出来！ ?... 两个 span 元素之间产生了一个换行行为。 ?
; 有限元素可以设置上下的外边距，有些元素则不能设置; 通过上述问题，我们可以推断出，html元素是有不同类别的。...分类总结 html元素可以分为三大类：块元素、行内元素、行内块元素，特性如下所述： 块元素：可以设置宽高，可以设置所有外边距，独立成行。...行内块元素（内联块元素）：可以设置宽高，可以设置外边距，不独立成行。 行内元素（内联元素）：不可以设置宽高，不可以设置上下外边距，不独立成行。 元素归类 在我们常用的标签中，按元素的分类，如下所示。...块元素：h、div、ul、li、p、form; 行内块元素（内联块元素）：img、input; 行内元素（内联元素）：a、span; 元素类型转换 通过display属性，可以将元素的类型转换成其他类型...通过float属性也可以将一个行内元素或者款元素设置为右对齐，例如融职教育首页的查看更多按钮，示例代码如下所示： 1 教学文档 查看更多<
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
