面试题1：简单介绍，有哪几种方法可以将内联元素转换为块级元素？

思路：
1.什么是内联元素？
2.什么是块级元素？
3.有几种方式？
最后能分别说出它们的优缺点就更好了。

答：
内联元素：
1.内联元素在浏览器中与相邻的内联元素同处一行显示，不够一行，自动换行。内联元素的宽度随着内容的变化而变化，并且不能插入块级元素。
2.内联元素不能设置宽高。
3.内联元素可以设置margin，padding，但是只在水平方向有效。
4.内联元素有：span,a ,label,strong等。

块级元素：
1.块级元素在浏览器中独占一行，默认宽度占满父元素的宽度。内部可以插入内联元素，块级元素。
2.块级元素可以设置宽高。
3.块级元素设置margin与padding在水平和垂直方向都有效。
4.块级元素有：div，h1~6，p，form，table等。

怎样将内联元素转换为块级元素？
内联元素未修饰的样子：
在这里插入图片描述
HTML代码都是一样的，后面不再赘述：

<body>
    <span class="span1">世界，你好span>
body>
1
2
3

一共有三种方式。
1.display:block;
chrome浏览器-显示效果：
在这里插入图片描述

CSS代码：

 .span1{
        display:block;
        width:200px;
        height:200px;
        background-color:orange;
       } 
1
2
3
4
5
6

2.浮动
float:left;
chrome浏览器-显示效果
在这里插入图片描述

 .span1{
        float:left;
        width:200px;
        height:200px;
        background-color:red;
       } 
1
2
3
4
5
6

3.绝对定位
position:absolute;
chrome浏览器-显示效果：
在这里插入图片描述
CSS代码：

 .span1{
        position:absolute;;
        width:200px;
        height:200px;
        background-color:blue;
       } 
1
2
3
4
5
6

浮动会产生高度塌陷，影响整个页面的布局，所以慎用。

相关阅读:
【云原生 • Kubernetes】kubernetes 核心技术 - RC、Replica Set 和 Deployment
CSDN竞赛4期题解
喜马拉雅追更攻略：如何订阅更新通知
Eureka：微服务中的服务注册与发现机制
小程序如何进行分包操作
【SpringBoot】请求处理——常用参数注释及使用
[技术杂谈]几款常用的安装包制作工具
TCGAbiolinks包学习
VMware上安装Centos7
【matplotlib 实战】--百分比柱状图

原文地址：https://blog.csdn.net/qq_40924992/article/details/126237825