行内元素与块级元素在宽高方面的不同

最新推荐文章于 2024-07-20 21:01:09 发布
最新推荐文章于 2024-07-20 21:01:09 发布
阅读量117 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dizaowudishenhua/article/details/127066779
版权

块级元素

块级元素可以指定宽高，指定宽高后，块级元素的宽高不再会被内部子元素撑开，即块级元素不会被子元素改变宽高，子元素大于块级元素的部分是溢出

行内元素

行内元素不可以指定宽高，会被内部子元素撑开，即行内元素会被子元素改变宽高。行内元素不会出现溢出

dizaowudishenhua
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
块级元素、行内元素、行内块元素
qq_42240113的博客
06-11 542
块级元素、行内元素、行内块元素块级元素(display:block)行内元素(display:inline)行内块元素(display:inline-block) 块级元素(display:block) 块级元素的特点： 可以设置宽度和高度 <span></span> span { display: block; width: 200px;`在这里插入代码片` height: 200px; } 行内元素(display:inline)
HTML 之 块级元素、行内元素和行内块元素之间的嵌套规则
weixin_45092437的博客
09-07 3056
之前对元素之间的嵌套规则没有进行系统的梳理，一直以为各种元素之间可以随意进行嵌套，但在实际敲代码的过程中发现并不是这样，大部分标签之间是可以随意嵌套的，但也存在一些特殊规则，比如：p标签内不能再嵌套p标签和div标签等块级标签。 这篇博客就是为了彻底搞清楚不同类型元素之间的嵌套规则。
CSS彻底理解行内、块级元素 及display属性转换
大超子
06-12 856
最明显的区别就是：块级元素会自动换行，而行内元素不会自动换行 行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素 转换行内元素display：inline 行内元素和其他行内元素都会在一条水平线上排列，不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置margin、padding上下无效，左右有效 转换块级元素display：block 块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列块，独占一行可以
行内元素与块级元素
CareChere的博客
04-29 375
我们在做页面布局的时候,一般会将html元素分为两种，即块级元素和行内元素。 块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。 行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内
【前端面试之HTML】行内元素和块级元素
mengStudents的博客
12-07 247
1、元素类型的定义 1-1、行内元素 行内元素主要是指strong或span之类的元素，该元素不会在元素之前或者元素之后生成“行分隔符”； 行内元素会水平排列成一行； 行内元素又分为置换元素和非置换元素； 1-2、 块级元素 块级元素主要是指div或者标题之类的元素，这些元素独占一行，多个块级元素在正常流中垂直排列。 2、元素分类 行内置换元素：img、input、textarea、se...
行内元素与块级元素比较全面的区别和转换
渴望飞翔的猪
10-01 773
引言        一次偶然的面试遇到的题目，虽然当时知道块级元素和行内元素的区别，但是没有仔细去想。 一、行内元素与块级元素 块级元素列表 定义地址 定义表格标题 定义列表中定义条目 定义文档中的分区或节 定义列表 定义列表中的项目
微信小程序布局之行内元素和块级元素
03-29
元素按照显示方式主要可以分为块级元素和行内元素，元素的显示方式由display属性控制。 块级元素特点总结： 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
全面了解行内元素与块级元素的区别
09-24
下面小编就为大家带来一篇全面了解行内元素与块级元素的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML行内元素与块级元素有哪些及区别？
01-08
当然块级元素与行内元素之间的特性是可以相互转换的。HTML可以将元素分为行内元素、块状元素和行内块状元素三种。 使用display属性能够将三者任意转换：  (1)display:inline;转换为行内元素； 　(2)display:block;...
对行内元素和块级元素的一些认识
09-24
块级元素的特点是它们之间有明显的换行，即每个块级元素会独占一行，可以设置宽高（width和height），并且margin和padding属性对上下左右四个方向都有效，允许我们控制元素之间的间距。 相比之下，行内元素则更为...
行内元素和块级元素，block，inline，inline-block
weixin_44076775的博客
12-04 932
常见的块级元素 div、p、h1~h6、ul、li、ol、dl、dd、dt、table、hr、blockquote、address、pre、menu h5新增 header、footer、aside、section 块级元素 display：block; 特点 ：独占一行，可设置宽度和高度，可设置padding和margin 常见的行内元素 span、a、label、sup、sub、abbr、s、i、em、u、strong、small 行内元素 display：inline; 特点 ：不能独占一行
块级元素一定要设置宽度高度
dabaoai123123的博客
11-19 1148
块级元素一定要设置宽度高度
最新！CSSCI（2023-2024）期刊目录公布！
2301_76900678的博客
07-19 409
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1327
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
DAY05 CSS
最新发布
adminstate的博客
07-20 724
CSS样式
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 720
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 580
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
Html_Css问答集(11)
白话魔法师
07-16 846
html与css学习中的一些疑问，问答中轻松获取知识。
行内元素转换块级元素
05-22
1. 使用CSS的display属性来设置行内元素为块级元素，方法是将display属性的值设置为“block”或“inline-block”。 例如，将一个标签转换为块级元素的CSS代码可以写成： ``` a { display: block; } ``` 2. 使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值