当前位置:网站首页>块级元素和行内元素
块级元素和行内元素
2020-11-09 12:27:00 【归子莫】
块级元素和行内元素
<!-- more -->
博客说明
文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!
行内元素和块级元素的区别:
行内元素:
- 与其他行内元素并排
- 不能设置宽高,默认的宽度就是文字的宽度
块级元素:
- 霸占一行,不能与其他任何元素并列。
- 能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%。
块级元素和行内元素的分类:
-
在HTML的角度来讲,标签分为:
-
文本级标签:p , span , a , b , i , u , em
-
容器级标签:div , h系列 , li , dt ,dd
p:里面只能放文字和图片和表单元素,p里面不能放h和ul,也不能放p。
从CSS的角度讲,CSS的分类和上面的很像,就p不一样:
行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级标签,但是是个块级元素。
块级元素:所有的容器级标签,都是块级元素,以及p标签。
块级元素和行内元素的相互转换:
通过display属性将块级元素(比如div)和行内元素进行相互转换。
-
display:inline;
那么这个标签将变为行内元素,即:
1,此时这个div将不能设置宽度和高度了。
2,此时这个div可以和其他行内元素并排了。
用display将行内元素(比如span)转行成块级元素。
-
display:block;
那么这个span标签将变为块级标签,即:
1,此时这个span能够设置宽度,高度。
2,此时这个span必须独占一行,其他元素无法与之并排。
3,如果不设置宽度,将占满父级。
感谢
万能的网络
版权声明
本文为[归子莫]所创,转载请带上原文链接,感谢
https://my.oschina.net/guizimo/blog/4708904
边栏推荐
- An attempt to read or write to protected memory occurred using the CopyMemory API. This usually indicates that other memory is corrupted.
- 关于无相互作用极化率的计算
- 线上服务的FGC问题排查,看这篇就够了!
- Suning's practice of large scale alarm convergence and root cause location based on Knowledge Map
- Open source ERP recruitment
- 微信视频号播主排行榜2020年10月
- 在企业的降本增效诉求下,Cube如何助力科盾业务容器化“一步到位”?
- Android check box and echo
- Wealth and freedom? Ant financial services suspended listing, valuation or decline after regulation
- Reread reconstruction
猜你喜欢
嗯,查询滑动窗口最大值的这4种方法不错....
SQL Chapter 2 Chapter 3
Introduction to zero based im development (4): what is message timing consistency in IM systems?
Handwriting Koa.js Source code
Vscode plug-in configuration pointing North
JVM learning (6) - memory model and thread
安卓开发——服务应用,计时器的实现(线程+服务)
On the calculation of non interaction polarizability
Adobe experience design / XD 2020 software installation package (with installation tutorial)
Looking for better dynamic getter and setter solutions
随机推荐
苏宁基于知识图谱的大规模告警收敛和根因定位实践
Vscode plug-in configuration pointing North
从编码、网络传输、架构设计揭秘腾讯云高质量、高可用实时音视频技术实践...
Nine kinds of distributed primary key ID generation schemes of sub database and sub table are quite comprehensive
Three practical skills of Medical Project Management
Safety (miscellany)
Configure switch trunk interface traffic local priority forwarding (cluster / stack)
Jsliang job series - 08 - handwritten promise
Recommended tools for Mac
Understanding data structures starts with this article~
Kubernetes业务日志收集与监控
JVM学习(四)-垃圾回收器和内存分配
TiDB x 微众银行 | 耗时降低 58%,分布式架构助力实现普惠金融
微信圈子
libssl对CentOS登录的影响
El table dynamic header
医疗项目管理的三种实用技巧
Looking for better dynamic getter and setter solutions
The third way to realize webrtc in embedded devices
解决IDEA快捷键 Alt+Insert 失效的问题