Unknown code in HTML page

Question

Unknown code in HTML page

Asked 2 years, 10 months ago

Viewed 36 times

-1

I’m doing a basic project to put the learning into practice.

I have a very strange problem, which is this code appearing next to my content, on the browser page.

It appears whenever I select the display as flex on the dial * { } CSS. I can’t say for sure, but it seems to have something to do with live server, the Vscode extension.

<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Tag link que é utilizada para incorporar o arquivo css -->
    <link rel="stylesheet" href="style.css">
    <script async src="./index.js" ></script> 
    <title>IMC</title>
</head>
<body>
    <div class="container">
    <header id="cabelçalho" >
        <h1>Calculadora - IMC</h1>
    </header>
    <main class="corpo">
        <div>
            <p>Nome:</p>
            <input id="nome" type="text">
        </div>
        <div>
            <p>Altura</p>
            <input id="altura" type="number">
        </div>
        <div>
            <p>Peso</p>
            <input id="peso" type="number">
        </div>
        <button id="botão">Calcular</button>
    </main>
    <!-- <footer id="resultado">
        <textarea name="resposta" id="resposta" cols="30" rows="10"></textarea>
    </footer> -->
    </div>

CSS:

/* "Zerando" o HTML */
*{
    margin: 0;
    /* box-sizing eh utilizado para usar o box model */
    box-sizing: border-box;
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       */
       display: flex;
}
.container{
    
    flex-direction: column;
    
    /* Dexia a altura do container centralizada independente do dispositivo */
    height: 100vh;
    align-items: center;
    justify-content:center ;
    background: tomato;
}

1

This answers your question? What does <! [CDATA []]> in XML?

– Augusto Vasques

2021/08/31 at 14:37
Please edit the question to limit it to a specific problem with sufficient detail to identify an appropriate answer.

–

2021/08/31 at 16:42

1 answer

Browser other questions tagged html css web-application

You are not signed in. Login or sign up in order to post.

by Artur Ribeiro • 1 point · Answer 1 · 2021-08-31T14:51:55+00:00

I identified the problem.

You are using Flex Display on *.

This way you are changing the display state of the entire window, not just what is inside your body. So the whole document became flexible, getting the size of its content and subscribing to any other display parameter that existed, eg display None.

This text you are seeing is actually live server, but it does not appear on screen, because it is hidden with display None. When you switched to flex display made this content visible.

Solution: use flex display directly in fields where you want the size to be flexible, it is very difficult to manipulate sizes and positions when a document has a very high level in flex display.

In this case use the flex display in body{} and go testing, if it doesn’t look good .

hope I’ve helped,.