块状元素、内联元素、和内联块状元素的概念与区别

最新推荐文章于 2023-08-14 16:27:28 发布
最新推荐文章于 2023-08-14 16:27:28 发布
阅读量1.3k 收藏 8
点赞数 1
分类专栏： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fesfsefgs/article/details/94732866
版权
本文介绍了HTML中三种基本元素类型：块状元素、内联元素和内联块状元素。块状元素占据整行，支持设置margin和padding；内联元素在同一行显示，仅支持水平margin和全部padding；内联块状元素结合两者特性，可设置宽高及所有边距。
摘要由CSDN通过智能技术生成

块状元素block：该元素前后会有换行符，可以设置margin和padding

内联元素inline：元素前后没有换行符，和其他元素在一行上，水平方向可以设置margin，竖直方向不可以，padding水平竖直都可以设置

而内联元素inline-block：既有块状元素的性质又有内联元素的性质，即：1、和其他元素都在一行上；2、元素的高度、宽度、行高以及顶和底边距都可设置。

                                              ## 常见的块状元素与内联元素
块状元素 内联元素
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定
列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 有序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 无序列表
li		 a - 锚点
最低0.47元/天 解锁文章
codingWeb
关注
专栏目录
块状元素、内联元素、内联-块状元素的区别
xiamocsdn的博客
05-06 1972
块状元素 块状元素最大的特点是可以独占一行。div是html中典型的块状元素。我们可以给块状元素设置宽度（width）、高度（height）、外间距（margin）、内间距（padding）。 我们在一个html文件里写入块状元素、内联元素、内联-块状元素，并给它们分别设置样式来看一看效果： <!DOCTYPE html> <html> <head> <...
块状元素和内联元素
cui_angel的专栏
06-21 4448
在用CSS布局页面的时候，我们会将HTML标签分成两种： 块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。 块状元素 一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。 内联元素 内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于
块状元素和内联元素的区别
gladys_1111的博客
08-16 485
内联元素、块状元素、内联块的转换： 内联元素->块状元素：display:block; 块状元素->内联元素：display:inline; 元素->内联块状元素：display:inline-block; 块状元素（div、ul、ol、dl、li、p、h1~h6、table、form等）： 独占一行； 支持所有样式； 不设置宽度时宽度为父元素宽度； 换行符不解析。 内联元素（span、a、stro
块状元素和行内元素
where_slr的博客
05-21 422
块状元素： *{box-sizing:border-box}给盒子设置宽度块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度（可设置宽高）. ，可以用display：inline设置成行内元素；常用块状元素：
Html的块状元素和内联元素
Mantouya_的博客
05-23 665
Html的块状元素和内联元素 块级元素和内联元素（通常说行内元素）的区别是块级有独立空间。它本身显示在一行，不管多少字节。而行内是没有display：block的特性的。 1 块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table 2 行内元素：span, stro...
css 块状元素和内联元素
09-25
块状元素可以包含内联元素和其他块状元素，形成复杂的布局结构。在上述示例中，`#div1`是一个块状元素，包含了另一个块状元素`#div2`。 内联元素，如`<a>`标签，通常用于文本内容，如链接。它们可以与其他内联元素...
CSS 盒模型、块状元素与内联元素、CSS选择器
09-25
/* 将块状元素变成内联块状元素 */ width: 100px; height: 100px; background-color: #ccc; } .inline { display: inline; /* 将元素设置为内联元素 */ width: 100px; height: 100px; background-color: #...
css块状元素与内联元素以及inline-block
11-06
CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素（Block Elements）和内联元素（Inline Elements）是两种基本的元素类型，它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...
CSS系列之块状元素 内联元素 内联块状元素(四)
dapyandxpy的博客
06-12 390
<!DOCTYPE html> <html lang="en" xmlns:width="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>演示块状元素</title> <style type="text/css"> </style> </head> <body> <div st
内联 块状元素
piheai9556的博客
09-09 985
内陆 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度: display：block; 内联元素加上display：block;后被块级化。块级元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。因此，可以定义其宽度和高度。 ...
块状元素与内联元素的区别
ld513508088的专栏
07-10 8801
块状元素与内联元素的区别
前端——块元素和内联元素的概念以及区别
qq_36625232的博客
01-04 823
块元素： (1)前后有换行符，独占一行，默认情况下，垂直排列 (2)默认情况下高度有内容决定（就比如由里边的图片和文字决定高度），宽度是父级的宽度，父级是多宽，它就有多宽。width height 可以控制宽高。 (3)margin和padding可以控制距离 （4）常见的块元素有：div p ul li hr【 水平线】form等标签 内联元素： (1)前后没有换行符，不独占一行。默认情况下，水...
块状元素、内联元素、和内联块状元素
heni6560的博客
05-18 637
一、前言 工作中使用较多的是js，java，所以一直忽略对css的学习，好多样式方面的东西全靠百度，很少去总结学习。最近写样式的事挺多的，所以该学习学习了。 二、块状元素、内联元素、和内联块状元素 1.特点 块状元素（block ）： 一个元素占一行，有高度 块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块...
块级元素、行内元素、行内块元素的区别
m0_59717262的博客
06-25 4297
不管块级元素还是行内元素，区别:一是排列方式，二是宽高边距设置，三是默认宽度。块级元素会独占一行，而行内元素和行内块元素则会在一行内显示；块级元素和行内块元素可设置 width、height 属性，而行内元素设置无效；块级元素的 width 默认为 100%，而行内元素则是根据其自身的内容或子元素来决定其宽度；而行内块级元素又同时拥有块级元素和行内元素的特点。
HTML行内元素、块状元素、行内块状元素的区别
热门推荐
zhanglir333的博客
01-27 2万+
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换： 　　(1)display:inline;转换为行内元素 　　(2)display:block;转换为块状元素 　　(3)display:inline-block;转换为行内块状元素 1.行内元素 　　行内元素最常使用的就是s
块状元素、行内元素、行内块状元素
最新发布
bestyinjun的专栏
08-14 80
块状元素、行内元素、行内块状元素
块状元素与内联元素
技术宅--火狼的专栏
08-12 719
块状元素：一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)和高度(height)起作用，margin和padding也起作用。常见块状元素为div和p。 内联元素：内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)和高度(height)不起作用，垂直方向的margin和padding不起作用，水平
了解一下块级元素和内联元素
我本可以
06-05 1376
块级元素是指单独撑满一行的元素，如`div、ul、li、table、p、h1`等元素。这些元素的display值默认是`block、table、list-item`等。 内联元素又叫行内元素，不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构，如`span、a、em、i、img、td、button`等。这些元素的display值默认是`inline、inline-block、inline-table、table-cell`等。
理解CSS布局：块状元素与内联元素
在CSS布局中，块状元素（Block Element）和内联元素（Inline Element）是两个基础概念，对于创建网页布局至关重要。了解它们的区别和用法是每个前端开发者必备的技能。 块状元素，如`div`和`p`，通常是其他元素的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

codingWeb

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值