老师您好,请问为什么p标签浮上去了?

来源:5-2 项目作业

慕仔3411021

2020-12-10 22:04:09

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图
http://img.mukewang.com/climg/5fd22a810913d4ec12500146.jpg

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="css/css.css">

</head>

<body>

    <!-- aboutus -->

    <section class="aboutus">

        <div class="center-wrap">

            <h2>关于我们</h2>

            <p>about us</p>

        </div>

    </section>

</body>

</html>


/* aboutus */

.aboutus{

    height374px;

    padding-top32px;

}

.aboutus .center-wrap{

    width1201px;

    margin0 auto;

    positionrelative;

}

.aboutus .center-wrap h2{

    width128px;

    height42px;

    color#696868;

    font-size32px;

    line-height38px;

    text-aligncenter;

    positionabsolute;

    top0;

    left50%;

    margin-left-64px;

}

.aboutus .center-wrap h2::before{

    content'';

    width513px;

    height42px;

    border-bottom1px solid #808080;

    positionabsolute;

    top0;

    left-525px;

}

.aboutus .center-wrap h2::after{

    content'';

    width513px;

    height42px;

    border-bottom1px solid #808080;

    positionabsolute;

    top0;

    right-525px

}




在这里输入代码,可通过选择【代码语言】突出显示

写回答

1回答

好帮手慕张

2020-12-11

同学你好,问题回答如下:

1、p标签上浮是因为p标签和h2标签在同一个盒子里,而h2使用了绝对定位,绝对定位会使元素脱离正常的文档流,不占据空间,所以才会出现p标签上浮。同学可通过给p标签加绝对定位来调整p标签的位置,可参考下图老师的代码:

http://img.mukewang.com/climg/5fd30e93095ef01203010169.jpg

2、另外同学的代码有需要优化的地方,虽然效果都能实现,如果大量使用定位会导致接下来的布局很乱,都需要用定位来居中,代码量会很大。

3、建议可以把相同的样式放在一起设置,不用再单独进行设置,h2标签可以使用text-algin:cnter;属性实现居中,代码很灵活,实现方法很多种,但是要尽量考虑到选择最优化的方案。下图为老师整体修改的代码,结构不变,但是样式老师做了改动,同学可以对照自己的代码参考一下:

http://img.mukewang.com/climg/5fd30eb109d2a89204420627.jpg

​祝学习愉快!


0

0 学习 · 15276 问题

查看课程