search

Home  >  Q&A  >  body text

Inline style issue

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ;Single column layout</title>
<style>
body{
        margin:0;
padding: 0;
}
    .header{
            width: 100 %;
height: 50px;
background-color: green;
}
.main{
 width: 90%;
/*height: 500px;*/
background-color: brown;

/* margin-right: auto; push to the right, stay on the left
    margin-left: auto; push to the left, stay on the right*/
margin:5px auto; /*This is the abbreviation, the top and bottom margins are 5px, the left and right auto are centered, the focus is on the horizontal centering of the block part*/
}
.main .left{
 width: 30%;
height : 500px;
background-color: pink;
float: left;/*I want to float left to the top layer, break away from the document flow, and move the bottom row up*/
}
.main .right{
width: 69%;
height: 500px;
background-color: deeppink;
float: right;/*right and left have the same effect, forming a new document flow after floating*/
}
.footer{
. width: 90%;
height: 60px;
background-color: blueviolet;
margin:0 auto;
}
. clear{
clear: both;
}

</style>
</head>
<body>
<div class="header" ></div>
<div class="main">
<div class="left"></div>
<div class="right"> ;</div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>

Why use .main .left

when setting the .left style in style and set the .clear style Use .clear

directly when
益伦益伦2513 days ago1483

reply all(2)I'll reply

  • phpcn_u19856

    phpcn_u198562018-01-15 11:14:19

    Using .main .left has a higher priority. It clearly tells you that this style is left under the main class. It limits the scope and allows the browser to find the object it wants to render more accurately.

    reply
    0
  • 韦小宝

    韦小宝2018-01-15 08:53:13

    This is naming, there are no certain requirements. You can name it whatever you want

    reply
    0
  • Cancelreply