<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title> ;単一列レイアウト</title>
<style>
body{
margin:0;
パディング: 0;
}
.header{
width: 100 %;
高さ: 50px;
背景色: 緑;
}
.main{
幅: 90%;
/*高さ: 500px;*/
背景色: 茶色;
/* margin-right: auto; 右に押して、左に留まります
margin-left: auto; 左に押して、右に留まります*/
margin:5px auto; /*これは略語で、上下の余白は5px、左右の自動は中央揃え、フォーカスはブロック部分の水平中央にあります*/
}
.main .left{
width: 30%;
height : 500px;
background-color: ピンク;
float: left;/*一番上のレイヤーまで左にフロートさせたいので、そこから離れますドキュメント フローから下の行を上に移動します*/
}
.main .right{
width: 69%;
height: 500px;
background-color: deeppink;
float: right;/*右と左は同じ効果を持ち、フローティング後に新しいドキュメント フローを形成します*/
}
.footer{
. width: 90%;
height: 60px ;
背景色: 青紫;
マージン: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>
を直接使用する場合
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
用.main .left的优先级更高一些，它明确的告诉你这个样式是main这个类下的left,把范围限定了，可以让浏览器更精准的找到它要渲染的对象。
这是命名，没有一定的要求。随便起啥名都可以啊