行内元素 行内元素，块级元素，各自特点及其相互转化

作为一个小型前端，块级元素和内嵌元素已经被使用了上千次。除了“块级独占一行，但行内不独占”之外，对细节属性的理解非常匮乏。今天对一些属性进行了测试和阐述。

首先，支持物理属性

注意:行中元素的填充无效。请参考下面的例子。

推荐我的前端群:524262608。不管你是小白还是大牛，我都欢迎。我时不时分享干货，包括2017年最新前端资料和自己编的零基础入门教程。欢迎新手和高级朋友。

这是上下填充的效果:

这是移除上下衬垫的效果:

{

背景色:# eee左填充:20px填充-右侧:20px边框:1px实心# 666；

}

可以看出，span元素和文本内容的位置，以及相邻div元素的位置都没有改变，只是上下填充渲染了对应的上下背景色。

第二，如何将行中的元素转换成块级别

①显示:块；转换到正常块级别

②显示:内嵌块；转换为内嵌块级，不仅仅独占一行

③浮动:左/右；转换为内嵌块级，不仅独占一行，而且浮动使该行中的元素脱离文档流，记得用clear来清除浮动

span {

float:左；

宽度:100px

高度:100px

背景色:# eee

左填充:20px

填充-右侧:20px

边框:1px实心# 666；

} & lt！-相应的html代码->:

& ltspan>。测试跨度<。/span>。

& ltspan>。测试跨度<。/span>。

& ltspan>。测试跨度<。/span>。

& ltdiv style = " clear:both；">。& lt/div>。

& ltdiv style = " width:100 px；高度:100px背景色:浅蓝色>。test-div<。/div>。

& ltdiv style = " width:100 px；高度:100px背景色:黄色>。test-div<。/div>。

④使用定位

使用绝对或固定定位也可以隐式地将内嵌元素转换为块级元素，但也会脱离原始文档流。

总而言之，浮点和定位都可以隐式地将内嵌元素转换为块级元素。

第三，块级被转换成内嵌元素

①显示:内嵌；转换为内嵌元素

②显示:内嵌块；转换为内嵌块级，不仅仅独占一行

声明|文章版权归作者所有。如有侵权，请联系边肖删除。