块级元素、⾏内元素、替换元素和⾮替换元素解析《CSS权威指南》读书笔记以及知识补充
基本元素类型划分
块级元素和⾏内元素
块级元素
块元素会⽣成⼀个元素框，会默认填充其⽗元素的内容区（元素宽度不设置的情况下，默认占满⽗级的100%），旁边不能有其他元素。可以理解为块元素前后都⽣成了“分隔符”。
常见块元素：p，div，ol，ul，h1-h6，table，form
特殊的块元素：li，li会⽣成⼀个标记符这个标记符会关联到元素框。
padding是外边距还是内边距
MDN-块级元素
⾏内元素
在⼀个⽂本⾏内⽣成元素框，⽽不会打断这⾏⽂本。本⾝前后不会⽣成“分隔符”，所以可以出现在另⼀个元素的内容中，不会破坏其显⽰。
常见⾏内元素：span , a ,strong ,b ,em , i , big ,small ,label ,img
MDN-⾏内元素
⾏内元素和块元素的区别
1.HTML当中，块元素不能继承⾃⾏内元素（即不能嵌套在⾏内元素中），但是⾏内元素可以嵌套在块元素当中。在CSS
当中对于⾏内元素和块元素的嵌套没有限制。
2.⾏内元素不会另起新⾏，块元素会新起⼀⾏。
3.块元素可以设置width和height，不可替换的⾏内元素设置⽆效。
4.块元素可以设置margin和padding，⾏内元素padding有效；margin⽔平⽅向有效，竖直⽅向⽆效。
CSS基础-块级元素与⾏内元素
Q&A：为什么⾏内元素padding有效；margin⽔平⽅向有效，竖直⽅向⽆效？
虽然内联元素可以增加内边距，使其看上去好像将⾃⼰所占的地⽅扩⼤了，但是它的本质还是内联元素，它只能独占⼀⾏，第⼆⾏的元素不会在意padding的影响，所以两者会合在⼀起。所以垂直⽅向上的padding虽然可以添加，但是并不占据空间

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。