位置：广州松河 > 技术支持 > CSS小技巧：position:absolute以及float:left/right都可以使用元素变为display:inline-block（块状元

CSS小技巧：position:absolute以及float:left/right都可以使用元素变为display:inline-block（块状元素）_CSS学习

来源：网络整理时间：2023/3/4 0:56:49 共 3645 浏览

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1. position : absolute

2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是没有效果的，但是设置为 position:absolute 以后，就可以了。

<div class="container">
    <a href="#" title="">这里是单行文字。</a>
</div>

css代码

<style>
.container a{
    position:absolute;
    width:300px;
    height: 200px;
    background:#ccc;
    text-align: center;
    line-height: 200px;
}
</style>

与display相关的文章：

text-align:center与display:inline组合块居中，多个行内元素/块状元素居中方法

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：清除浮动的三种方法 clear: both、width: 100%;overflow: hidden、换行_CSS学习 | ·下一条：css :after伪类+content使用说明和方法_CSS学习