块元素与行内元素的区别和转换

最新推荐文章于 2023-05-13 15:39:05 发布
最新推荐文章于 2023-05-13 15:39:05 发布
阅读量96 收藏
点赞数
文章标签： html css3 html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50723623/article/details/109006080
版权

css将元素分为以下三类:

  • 块元素
    • 独占一行，自上而下排列
    • 默认宽度为父元素的100%
    • 自动换行
    • 可以设置宽度和高度
  • 行内元素
    • 并列显示，自左向右排列
    • 不能设置宽度和高度，但是可以设置padding、margin、border
    • 不会自动换行
  • 行内块
    • 可以设置宽高
    • 可以在一行显示，不会自动换行

display:显示方式

  • inline： 将元素设置为行内元素
  • block：将元素设置为块元素
  • inline-block：将元素设置为行内块
  • none：不显示
斑码大前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
行内元素和块元素的区别
张大晴的博客
03-26 7305
块元素：不管内容多少，块元素都会在浏览器中独占一行。可设置宽高，如果不设置宽高那么它的宽度是100%（占满父级元素一整行）    缺点：1.相邻元素垂直。相邻外边距会重叠。margin-bottom和margin-top重叠（重叠之后的值是两个值中的最大值）                第一种解决方案：原理bfc相关               2.父子的相邻，父元素的margin-top和子元...
【HTML】行内元素与块级元素
weixin_34068198的博客
08-11 798
一、行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别 行内元素会在一条直线上排列，都是同一行的，水平方向排列 块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 3.行内元素与块级元素属性的不同，主要是盒模型属性上 行内元素设置width无效，height无效(可以设...
块元素和行内元素及其元素转换
阿珂学cv
10-23 6777
怎么区分块元素、行内元素以及行内块元素呢，以及他们之间怎么相互转换呢？
关于块元素和行元素之间的转换
ceike的博客
05-13 5567
将块级元素设置为行内元素(inline),可以通过以下几种方式:1. display: inline;这个是最直接的方式,通过设置display样式为inline,可以将块级元素变为行内元素。例如:cssdiv {将div元素变为行内元素。当一个元素设置float属性后,其display属性会被重置为行内块inline-block,产生行内元素的效果。例如:cssdiv {
块级元素和行内元素的区别
gao_zhennan的博客
03-26 1万+
无论是初学者或者是即将面试的前端工程师，行内元素及块级元素都是非常重要的知识点，在布局设置宽高和边距时经常由于混淆行内元素及块级元素出现问题。 一、显示元素 （一）块级元素 div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre HTML5：header、section、article、footer等等，还...
块元素、行内元素和行内块元素的区别以及转换
zheng_14451的博客
08-23 615
块元素（block） 可以设置其宽度、高度，内外边距，独占一行 默认宽度为100% 不受空格影响 可以容纳行内元素和其他块元素 常见的块元素：div，h1~h6，ul，li，p，table等 行内元素（inline-level） 不支持宽高（宽高根据内容大小自动撑开），自左向右排列 受空格影响 默认宽度是自身内容的宽度 不独占一行 常见的行内元素：span，i，a，b，strong，em，sub，sup等 行内块元素（inline-block） 支持宽高，自左向右排列 受空格影响 不独占一行 具备
行内元素与块级元素
Peter-H
08-11 3278
一、行内元素与块级元素的三个区别 1.行内元素与块级元素直观上的区别     行内元素会在一条直线上排列，都是同一行的，水平方向排列     块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。 3.行内元素与块级元素属性的不同，主要是盒模型属性上 行内元素设置width无效，height无效
关于css 行元素和块元素 相互转换 居中
12-13
与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素...
微信小程序布局之行内元素和块级元素
03-29
元素按照显示方式主要可以分为块级元素和行内元素，元素的显示方式由display属性控制。 块级元素特点总结： 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
css中行内元素和块级元素的区别
09-27
本文主要介绍了行内元素和块级元素的区别，具有很好的参考价值，下面跟着小编一起来看下吧
前端日记01_行内元素和块级元素
01-20
前端日记01_行内元素和块级元素欢迎大家来跟胖胖一起xio习！基本知识分类速览块级元素和行级元素的转换参考链接 欢迎大家来跟胖胖一起xio习！ Hey，这里是胖胖的博客，目前正在学有关前端的知识，有时候会把一些遇到...
行内元素与块级元素比较全面的区别和转换
热门推荐
Get Things Done
07-11 10万+
引言        一次偶然的面试遇到的题目，虽然当时知道块级元素和行内元素的区别，但是没有仔细去想。 一、行内元素与块级元素 块级元素列表 定义地址 定义表格标题 定义列表中定义条目 定义文档中的分区或节 定义列表 定义列表中的项目
块级元素与行内元素的区别以及相互转化
说不清的一切
05-24 1380
昨天师兄给我做个面试测试的时候问到这个问题，当时只答到块级元素和行内元素的基础知识，被追问到行内元素的margin padding line-height这些的时候一个都答不出来。 块级元素列表 定义地址 定义表格标题 定义列表中定义条目 定义文档中的分区或节 定义列表
说说行内元素与块级元素以及之间的转换？
kingfaker的博客
12-12 762
块级元素与行内元素 块级元素会扩展到与元素同宽。行内元素会“收缩包裹” 其内容，并且会尽可能包紧。 （以上这两个总结，来自于《css设计指南》这本书） 其默认css样式 块级元素其高度为其内容高度，宽度会扩展到与父元素同宽。所以导致块级元素会独占一行，无法在其后容纳其他块级元素与行内元素。行内元素其高度为其内容高度，宽度会收缩包裹其内容。奇怪的一点：行内元素之间有一定的距离，使用控
3.块元素，行内元素，行内块元素及其元素转换
weixin_62061392的博客
04-09 4586
html块级，行内，行内块元素特点及其转换
div和span的区别以及行内元素和块元素的转换？
glyly555的博客
05-22 1万+
div和span的区别以及行元素和块元素的转换？相同点：div和span都可以将HTML元素组合起来，类似一个盒子将里面的内容当作一个整体来处理，从而实现整体作用效果，提高效率。不同点：div是块级元素，是可用于组合其他HTML元素的容器，其常用的用途是文档布局，主要用于页面的排版。span是内联元素（行内元素），主要用于容纳文字。span只是把内容定义成一个整体进行操作，不影响布局和显示，而且s...
HTML学习之块级元素和行内元素的特征和区别（一）
liuying1802028915的博客
10-13 1万+
这几天在学习HTML，这里总结一下块级元素和行内元素的特征和区别，本文也是来自于其他同行的一些文章，在这里感谢一下那些作者，下面先把这些原文粘贴出来 http://www.cnblogs.com/Jackie0714/p/4923639.html http://blog.csdn.net/yuyanqiao/article/details/8558118 一，下面从概念的角度来说一下
块元素和行内元素相互转换
Makesure_的博客
09-16 330
行内元素转换为块级元素 a{ display:block; } 块级元素转换为行内元素 <divstyle="display:inline;">1</div>
行内元素和块级元素&块级元素与行内元素之间的转换
Queen-Shir的博客
11-15 6443
1、行内元素&块级元素 行内元素：指该元素标记的内容不不会对现在的结构造成影响。 块级元素：单独占据一行。 常见的行内元素： 内联元素(inline element)： a - 锚点，abbr - 缩写，acronym - 首字，b - 粗体(不推荐)，bdo - bidi override，big - 大字体，br - 换行，cite - 引用，code - 计算
块元素、行内元素、行内块元素的区别，如何转换
最新发布
06-12
块元素、行内元素和行内块元素是 HTML 元素的三种基本类型，它们的区别在于它们在页面中的布局和显示方式不同。 1. 块元素（block）：独占一行的元素，可以设置宽度、高度、内外边距等样式属性，可以容纳其他块级...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值