一般的に使用される Div
absolute: 位置決め
relative: 相対位置決め、絶対一致、相対は通常親の概念です
コードの表示
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 5 <meta http-equiv="Content-Style-Type" content="text/css" /> 6 <title>三?式版面</title> 7 <style type="text/css"> 8 #wrapper { 9 width: 100%; /* ?定???度 */10 }11 #header {12 background-color: #DDDDDD;13 height: 50px;14 }15 #container {16 position: relative;17 margin: 10px 0;18 width: 100%;19 }20 #primary {21 margin: 0 200px; /* ?定左右?界155px */22 background-color: #C7D5ED;23 }24 #secondary {25 position: absolute;26 left: 0px;27 top: 0px;28 width: 145px; /* ?定???度 */29 background-color: #F9CFBA;30 }31 #advertisement {32 position: absolute; /* ?配置方式值指定?absolute */33 right: 0px; /* 指定???右?的距? */34 top: 0px; /* 指定???上方的距? */35 width: 145px; /* ?定???度 */36 background-color: #E5C7ED;37 }38 #footer {39 background-color: #DDDDDD;40 height: 50px;41 }42 </style>43 </head>44 45 <body>46 <div id="wrapper">47 <div id="header"><br /></div>48 <div id="container">49 <div id="primary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>50 <div id="secondary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>51 <div id="advertisement"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>52 </div>53 <div id="footer"><br /></div>54 </div>55 </body>56 </html>ログイン後にコピー
float: div が決定されている場合、それは相対です。後ろのテキスト、下のクリアの上のフロートは正常です。フロートを決定するには、幅プロパティを決定する必要があります
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 5 <meta http-equiv="Content-Style-Type" content="text/css" /> 6 <title>?作涵?其它??的Box</title> 7 <style type="text/css"> 8 #wrapper { 9 width: 760px;10 }11 #header {12 background-color: #DDDDDD;13 height: 50px;14 }15 #container {16 float: left; /* 指定??向左浮? */17 width: 605px; /* 指定???度 */18 }19 #primary {20 float: right; /* 指定??向右浮? */21 width: 450px;22 margin: 10px 0;23 background-color: #C7D5ED;24 }25 #secondary {26 float: left;27 width: 145px;28 margin: 10px 0 10px 0px; /* 只修改上、下?界的值 */29 background-color: #F9CFBA;30 }31 #advertisement {32 float: right;33 width: 145px;34 margin: 10px 0;35 background-color: #E5C7ED;36 }37 #footer {38 clear: both;39 background-color: #DDDDDD;40 height: 50px;41 }42 </style>43 </head>44 45 <body>46 <div id="wrapper">47 <div id="header"><br /></div>48 <div id="container">49 <div id="primary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>50 <div id="secondary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>51 </div>52 <div id="advertisement"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>53 <div id="footer"><br /></div>54 </div>55 </body>56 </html>ログイン後にコピー
margin: コンテナ間のギャップ、コンテナの幅が100% に設定すると、マージンは ? になります。これは、コンテナが次のコンテナおよび前のコンテナの値から遠く離れていることを意味します
コードを表示
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-TW" lang="zh-TW"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=big5" /> 5 <meta http-equiv="Content-Style-Type" content="text/css" /> 6 <title>以??界?作可自??整?度的??</title> 7 <style type="text/css"> 8 #wrapper { 9 width: 100%; /* 修改??的?度?定 */10 }11 #header {12 background-color: #DDDDDD;13 height: 50px;14 }15 #container {16 float: left;17 width: 100%; /* 修改??的?度?定 */18 margin-right: -145px; /* ?定右?界的值??值 */19 }20 #primary {21 float: right;22 width: 100%; /* 修改??的?度?定 */23 margin: 10px 0 10px -145px; /* ?定左?界的值??值 */24 background-color: #C7D5ED;25 }26 #content {27 margin: 0 155px; /* ?定左右?界 */28 background-color: #CAEDC7;29 }30 #secondary {31 float: left;32 width: 145px;33 margin: 10px 0 10px 0px;34 background-color: #F9CFBA;35 }36 #advertisement {37 float: right;38 width: 145px;39 margin: 10px 0;40 background-color: #E5C7ED;41 }42 #footer {43 clear: both;44 background-color: #DDDDDD;45 height: 50px;46 }47 </style>48 </head>49 50 <body>51 <div id="wrapper">52 <div id="header"><br /></div>53 <div id="container">54 <div id="primary">55 <div id="content"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>56 </div>57 <div id="secondary"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>58 </div>59 <div id="advertisement"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>60 <div id="footer"><br /></div>61 </div>62 </body>63 </html>ログイン後にコピー
from :csslayout ?human?ladder
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
