• 面试题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

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

  • 相关阅读:
    找出一个数组中未出现的数Java
    强烈建议：语文教师能不吃的苦尽量别吃
    APT级全面免杀与企业纵深防御体系的红蓝对抗
    降重小技巧
    【Unity】【VRTK】【VR开发】同时保持高效打包和调试的VRTK项目设置方式
    第二篇 部署前准备工作
    【设计模式】Java设计模式 -工厂模式
    美摄AI商品图解决方案
    Vue 纯 css 编写鱼骨图
    国科大卜东波算法设计作业
  • 原文地址：https://blog.csdn.net/qq_40924992/article/details/126237825