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

首先,支持物理属性

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

推荐我的前端群: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>。

④使用定位

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

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

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

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

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

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

1.《行内元素 行内元素,块级元素,各自特点及其相互转化》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。

2.《行内元素 行内元素,块级元素,各自特点及其相互转化》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/jiaoyu/1665472.html