Fatal编程技术网
  • html/
  • Html 主要内容侵入我的标题

Html 主要内容侵入我的标题

html css

Html 主要内容侵入我的标题,html,css,Html,Css,我目前正在学习css/html，有人能向我解释一下为什么页面的主要内容（我还没有设置样式）会侵入我的标题吗？代码如下： body{ height: 100%; margin: 0; } #wrapper { width: 95%; height: 100%; background-color: #bbb; padding: 0; margin: 0 auto; font-family: monospace; fo

我目前正在学习css/html，有人能向我解释一下为什么页面的主要内容（我还没有设置样式）会侵入我的标题吗？代码如下：

    body{
    height: 100%;
    margin: 0;
}

#wrapper {

    width: 95%;
    height: 100%;
    background-color: #bbb;
    padding: 0;
    margin: 0 auto;
    font-family: monospace;
    font-size: 14px;

}

a{
    text-decoration: none;
    color: #000;
}


/*-----------Start Header-----------*/
header{

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    height: 200px;
    padding: 1%;
    margin: 1%;


}

header>img{

    width: 30%;
    height: 70%;
    float: left;
}
header>h1{

    width: 70%;
    height: 70%;
    float: right;
}


/*----------Start Nav-----------*/

#horznav {
    width: 100%;
    height: 30%;
    display: flex;
    text-align: center;

}
#horznav>a{

    width: 20%;
    margin: 1%;
    padding: 1%;
    border: 1px solid white;
    font-size: 1.75vw;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;

}



#horznav>a:hover{

    border-radius: 10px;
    background-color: #fff;
}

/*------------End Nav----------------------*/

/*----------- End Header --------------------*/
以下是html：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Project 1</title>
        <link rel="stylesheet" href="Styles/style.css">
        <script src="script.js"></script>



    </head>

    <body>

        <div id="wrapper">

            <header>

                    <img src="http://www.clipartbest.com/cliparts/yik/e79/yike79brT.png" alt="Lorem ipsum dolor sit amet.">

                    <h1>Lorem ipsum dolor sit amet.</h1>

                    <nav id="horznav">

                        <a class= 'navitems nav1' href="">Home</a>
                        <a class= 'navitems nav2' href="">About</a>
                        <a class= 'navitems nav3' href="">Contact</a>
                        <a class= 'navitems nav4' href="">Affiliates</a>
                        <a class= 'navitems nav5' href="">Coming Soon</a>

                    </nav>

            </header>

            <main id="content">

                <section class="part">
                    <article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
                    <article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
                </section>
                <section class="part">
                    <article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
                    <article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
                </section>
                <section class="part">
                    <article id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro at vero esse error eius laborum illum magni qui natus quisquam culpa, quaerat, ullam impedit. Nobis, repellendus itaque commodi! Iure, distinctio.</article>
                    <article id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil aut quis mollitia, voluptates alias odit amet ullam praesentium molestias sapiente ex est. Repudiandae expedita cupiditate illo quis veritatis nemo, voluptates architecto incidunt ratione in, voluptate neque amet quaerat eligendi ipsum earum aliquid dolorum inventore non natus. Autem dignissimos similique at possimus voluptatum, hic vel sunt velit. Rerum blanditiis voluptate animi molestias, hic ab natus vitae, cum labore facere harum, placeat ea illum officia magni quis. Earum atque illum sit voluptate, veritatis asperiores, facere velit ipsam laborum hic iusto blanditiis possimus, molestias maxime sed! Excepturi nemo, rem quisquam quae, dolore magni.</article>
                </section>

            </main> 

            <footer>

                <section id="left">

                    <p id="left">Lorem ipsum dolor sit amet, consectetur.</p>
                    <p id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur modi, quia consequuntur.</p>

                </section>

                <section id="right">

                    <img src="http://iconion.com/posts/images/social-icons.jpg" alt="Lorem ipsum dolor." id="socialmedia">

                </section>

            </footer>

        </div>

    </body>


</html>


项目1
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet，奉献精英。这是一个巨大的错误，因为它是一个罪魁祸首，一个罪魁祸首，一个罪魁祸首。Nobis，我是你的朋友！优等生，优等生。
Lorem ipsum dolor sit amet，奉献精英。我的名字叫阿梅特·乌拉姆·穆尔斯蒂亚，是一位智者。德意志联邦共和国是一个真正的国家，它的建筑学是理性的，它的发明者是非自然的。在possimus voluptatum，有一种类似的尊严，它的等级必须是最高的。勃兰氏动植物（Rerum blanditiis voluptate animi molectias），它是一种生命之物，也是一种劳动之物，放在一个大酒厂里。我的眼睛是透明的，我的眼睛是透明的，我的眼睛是透明的，我的眼睛是黑色的，我的眼睛是最大的！除了尼莫，雷姆·奎斯夸姆·夸伊，多洛尔·马格尼。
Lorem ipsum dolor sit amet，奉献精英。这是一个巨大的错误，因为它是一个罪魁祸首，一个罪魁祸首，一个罪魁祸首。Nobis，我是你的朋友！优等生，优等生。
Lorem ipsum dolor sit amet，奉献精英。我的名字叫阿梅特·乌拉姆·穆尔斯蒂亚，是一位智者。德意志联邦共和国是一个真正的国家，它的建筑学是理性的，它的发明者是非自然的。在possimus voluptatum，有一种类似的尊严，它的等级必须是最高的。勃兰氏动植物（Rerum blanditiis voluptate animi molectias），它是一种生命之物，也是一种劳动之物，放在一个大酒厂里。我的眼睛是透明的，我的眼睛是透明的，我的眼睛是透明的，我的眼睛是黑色的，我的眼睛是最大的！除了尼莫，雷姆·奎斯夸姆·夸伊，多洛尔·马格尼。
Lorem ipsum dolor sit amet，奉献精英。这是一个巨大的错误，因为它是一个罪魁祸首，一个罪魁祸首，一个罪魁祸首。Nobis，我是你的朋友！优等生，优等生。
Lorem ipsum dolor sit amet，奉献精英。我的名字叫阿梅特·乌拉姆·穆尔斯蒂亚，是一位智者。德意志联邦共和国是一个真正的国家，它的建筑学是理性的，它的发明者是非自然的。在possimus voluptatum，有一种类似的尊严，它的等级必须是最高的。勃兰氏动植物（Rerum blanditiis voluptate animi molectias），它是一种生命之物，也是一种劳动之物，放在一个大酒厂里。我的眼睛是透明的，我的眼睛是透明的，我的眼睛是透明的，我的眼睛是黑色的，我的眼睛是最大的！除了尼莫，雷姆·奎斯夸姆·夸伊，多洛尔·马格尼。

Lorem ipsum dolor sit amet，Concertetur


Lorem ipsum door sit amet，奉献精英。莫迪顾问，我的顾问
我希望这是一个简单的解决办法，请解释发生这种情况的原因

谢谢大家。

尝试将溢出：隐藏添加到标题。因为您在头中浮动元素，所以头正在折叠。将边框添加到页眉以了解我的意思。如果对元素使用float，则需要溢出：隐藏其父元素以防止发生这种情况

希望对您有所帮助

尝试在页眉中添加溢出：隐藏。因为您在头中浮动元素，所以头正在折叠。将边框添加到页眉以了解我的意思。如果对元素使用float，则需要溢出：隐藏其父元素以防止发生这种情况

希望它有帮助，因为您正在应用高度，这意味着如果里面的内容高度大于它将溢出的高度。请使用
min height
，以便在需要时可以扩展

另外，你需要写更多值得尊敬的代码。在任何地方使用%都是非常糟糕的做法

正文{
身高：100%；
保证金：0；
}
#包装纸{
宽度：95%；
身高：100%；
背景色：#bbb；
填充：0；
保证金：0自动；
字体系列：monospace；
字体大小：14px；
}
a{
文字装饰：无；
颜色：#000；
}
/*-----------起始标题-----------*/
标题{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
最小高度：200px；
填充：1%；
利润率：1%；
}
标题>img{
宽度：30%；
身高：70%；
浮动：左；
}
标题>h1{
宽度：70%；
身高：70%；
浮动：对；
}
/*----------起始导航-----------*/
#霍兹纳夫{
宽度：100%；
最小高度：30%；
显示器：flex；
文本对齐：居中；
}
#horznav>a{
宽度：20%；
利润率：1%；
填充：1%；
边框：1px纯白；
字体大小：1.75vw；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
-webkit过渡：所有300毫秒的易入易出；
-moz转换：所有300毫秒的输入输出都很容易；

header {
  height: 200px;
}



header {
  height: auto;
}



header>h1{

    width: 70%;
    height: 70%;
    float: right;
}



header{

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    height: 200px;
    padding: 1%;
    margin: 1%;


}