html 什么叫做块元素 内联元素,HTML元素内联元素、块级元素的布局介绍

最新推荐文章于 2021-10-23 01:36:04 发布
最新推荐文章于 2021-10-23 01:36:04 发布
阅读量127 收藏
点赞数
文章标签： html 什么叫做块元素 内联元素
本文探讨了HTML元素在浏览器中的默认布局方式，强调内联元素与块级元素的区别。内联元素根据浏览器宽度填充，而块级元素在宽度减少时会自动扩展高度。设置了width属性的块级元素在浏览器宽度变化时，不会影响内部元素布局，但未设置width的块级元素则可能导致内嵌元素排版混乱。这一概念在创建如导航条等布局时尤其重要，合理使用width属性可以避免浏览器缩放引起的布局问题。
摘要由CSDN通过智能技术生成

5268f80b9b1e01f982625ef6fac83ca1.png

HTML元素布局展示

默认展示(未添加width和height属性)

①HTML元素在浏览器展示的方式是：从上到下，从左到右。

②内联元素，是根据浏览器的宽度及自身的width宽度来填充。若当前行剩余空白区域不够，就会换至下一行。

③块级元素，根据内联元素的展示方式展示大概区域；当浏览器的宽度减少时，会自动扩充块级元素的height属性的值，以容纳内嵌元素的展示

展示页面

0ad96b481f7c718af1f04c344785f3c4.png

增加了width属性的展示

块级元素(div)增加了width属性

ec994687a5fcbeb85038bf8f787eed10.png

结论

①当块级元素没设置width属性时，浏览器宽度的变更，会压缩块元素内嵌元素的排版。

②设置块级元素的width属性时，浏览器的width属性值变更，不会影响到块级元素里的内嵌元素的布局，他们(内嵌元素)受父级块级元素的影响。

适用范围：导航条(导航条里有多个a标签，可放在一个div里，并给div附加width属性；以免浏览器缩小，造成导航排版乱掉)；

都灵Turin
关注
常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？
IT修真院：初学者转行到互联网的聚集地
05-21 1267
这里是修真院前端小课堂，本篇分析的主题是 【常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？】 大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师（职业）css任务1，深度思考中的知识点——常见的inline元素、block元素、inline-block元素有哪些？它们之间有什...
CSS day_03(6.14) 内外间距、元素隐藏溢出、版心
m0_70328115的博客
06-14 676
内外间距、元素的隐藏与显示、页面的版心、元素的溢出与处理、怪异盒子模型、拓展（实现两张图片留白的方案）
块元素、内联元素、内联块元素
weixin_33961829的博客
12-17 248
元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。 块元素 块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为： 支持全部的样式 如果没有设置宽度，默认的宽度为父级宽度100% 盒子占据一行、即使设置了宽度 内联元素内联元素...
什么是块级元素和内联级元素
weixin_33747129的博客
11-17 291
block（块）元素的特点： ①总是在新行上开始； ②高度，行高以及外边距和内边距都可控制； ③宽度缺省是它的容器的100%，除非设定一个宽度。 ④它可以容纳内联元素和其他块元素 inline元素的特点： ①和其他元素都在一行上； ②高，行高及外边距和内边距不可改变； ③宽度就是它的文字或...
什么是块级元素和内联元素
e891377的专栏
01-14 713
块级元素(block)特性：  •总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;  •宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;  内联元素(inline)特性：  •和相邻的内联元素在同一行;  •宽度(width)、高度(height)、内边距的top/bottom(padding-top/paddi
HTML基础（四）常用的内联元素
汝嫣兮的博客
04-11 2013
上次的教程介绍的是块级元素，其中也谈到了内联元素的概念，这次便介绍常用的内联元素。 内联元素又称之为行内元素，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。 常见的内联元素有链接元素a、图像元素img、强调元素em、文本内区块元素span与换行元素br等 文章目录图像元素img链接元素a文本区块元素span 图像元素img img元素在网页中嵌入一幅图像。 img标签的基本语法如下...
前端css+html+布局笔记
09-14
一般使用块元素对页面进行布局 常见的块元素 div p h1~h6 内联元素 内联元素只占用自身的大小，不会独占一行 内联元素也叫行内元素（inline） 一般内联元素都是用来为文本来设置效果 常见的...
用html和css布局如下图像,HTML CSS + DIV实现整体布局
weixin_39685459的博客
06-16 1877
什么是 HTML？HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是...
HTML（一）：行级标签、块级标签、其他标签
m0_50134014的博客
10-23 1850
这里写目录标题一、HTML1.1 HTML概述1.1.1 HTML是什么1.1.2 HTML基本结构1.1.3 HTML语法细节1.2 字体标签1.2.1 Font标签1.2.2 标题标签1.2.3 特殊字符1.2.4 颜色表示1.3 列表标签1.3.1 定义列表1.3.2 有序列表1.3.3 无序列表1.4 图像1.4.1 Img1.4.2 Map1.5 超链接1.5.1 超链接概述1.5.2 链接资源1.5.3 定位标记1.6 表格1.6.1 table1.6.2 caption1.6.3 TBODY、
html 什么叫做块元素 内联元素,html常见的块元素与内联（行内）元素用法说明（一），html内联元素有哪些分享...
weixin_34334554的博客
06-05 187
块元素的属性：无论内容是什么，都会独占一整行。主要用于页面布局。内联元素的属性：只占自身大小的元素，不会占用一行。主要用于选中文本设置样式。div块元素仅仅只用于进行页面布局，它自身不带任何默认样式。span内联元素可以用来选中文本设置文本的样式，其自身不会带默认样式。一般情况下，只使用块元素包含内联元素，而不会使用内联元素去包含块元素。a元素可以包含任意元素，除了其本身。p元素不可包含任何的块元...
块级元素和级联元素的含义
weixin_33947521的博客
04-11 159
块级元素和级联元素的含义 Block element 块级元素顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的<div>、<p>、<ul>默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:b...
html中内联元素是什么意思,html中的块元素和内联元素的区别
weixin_33497800的博客
06-05 518
一、定义块元素一般都从新行开始，它可以容纳内联元素和其他块元素，可设置高度、宽度和边距等。内联元素一般都是基于语义级的基本元素，它只能容纳文本或其他内联元素，主要特点是：和其他元素位于同一行上，高度、宽度和边距不可改变。二、分类块元素(block element)* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - ...
html 内联元素转换,HTML中什么是内联元素？
weixin_27541383的博客
06-02 103
在HTML中，内联元素是指display属性为inline的元素；内联元素也叫行内元素，在网页中总是随着文字流出现在“行内”，这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。(推荐教程：html教程)根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，而display属性为...
HTML中的块级元素和内联元素
一元梦寻1rmb.cc
04-10 470
在HTML常用标签中提到了块级元素和内联元素，这里为大家讲解一下它们 块级元素： 块级元素标签使用后，无论内容是否填充满，会独占一行显示 且具有宽高样式，可以对宽高大小进行设置 内联元素： 内联元素标签使用后，并不影响整行显示效果，不会独占一行显示 没有宽高样式，无法设置其宽高 来看看我们熟悉的div和span吧 先定义一个大的宽高为100的灰色背景div，里面放两个宽...
HTML中的内联元素外边据
xvzhengyang的博客
01-13 375
&lt;!-- 通常我们总是希望使用与内容含义最接近的元素来标记内容 --&gt;         &lt;!-- 可以设置内联元素的宽度,但是在对这些元素定位之前,可能注意不到宽度改变的效果,另外可以对这些元素增加          内边距/外边据和边框等,内联元素上的外边据和内边距与块元素稍有不同,如果一个内联元素四周都加上外边据,只能看到左边和右边增加空间          .你也可以对内联...
什么是块元素block和内联元素inline
foyoto的博客
04-17 142
我们首先要了解，所有的html元素，都要么是block(块元素)、要么是inline(内联元素)。下面了解一下block、inline各自的特点： 　　block元素的特点： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度。 　　inline元素的特点： 和其他元素都在一行上； 高，行高及顶和底边距不可改变； 宽度就是...
【块级标签结构的搭建】案例：制作导航栏
菜鸟成长日记
04-24 266
css 层叠样式表 内部样式 外部样式 内联样式（行内样式，嵌入式样式） <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>内部样式表</title> <!-- 内部样式 --> <style typ...
CSS编程：深入解析块级元素与内联元素
本文深入探讨了CSS编程中的块级元素（Block elements）和行内元素（Inline elements），这两种元素是理解网页布局和样式设计的基础。块级元素如、、默认占据整行，高度和宽度可调整，并可以通过display属性转化为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值