# CSS布局 ###### tags: `JavaWeb CSS` ```htmlembedded= <html> <head> <meta charset="utf-8"> <style type="text/css"> #div1{ width: 400px; height: 400px; background-color: greenyellow; /*border 邊框樣式*/ border-width: 1px; /*邊框粗細*/ border-style: solid;/*邊框樣式：solid(實線)、dotted(點狀線)*/ border-color: blue;/*邊框顏色*/ /*border: 4px double blue;*/ /*border-top: 4px dotted blue;*/ } #div2{ width: 200px; height: 200px; background-color: gold; margin-top: 100px; margin-left: 100px; /*margin: 100px 100px 50px 150px;!*一個值：四個方向統一，兩個值：上下、左右，三個值：上、左右、下，四個值：上右下左*!*/ /*padding：填充*/ padding-top: 50px; padding-left: 50px; } #div3{ width: 100px; height: 100px; background-color: green; } #div4{ width: 200px; height: 200px; margin-ledt: 100px; background-color: greenyellow; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3">&nbsp;</div> </div> </div> <div id="div4"> </div> </body> </html> <!-- IE瀏覽器：實際尺寸 = width chrome瀏覽器：實際尺寸 = width + 左右border-width + padding CSS盒子模型： 1.border 邊框 2.margin 間距 3.padding 填充 --> ``` ![](https://i.imgur.com/HwGGxsU.png) ```htmlembedded= <html> <head> <meta charset="utf-8"> <style type="text/css"> body{ margin: 0; padding: 0; } #div1{ width: 200px; height: 50px; background-color: greenyellow; /*絕對定位*/ position: absolute; left:100px; top:100px; } #div2{ width: 200px; height: 50px; background-color: pink; /*相對定位*/ position: relative; float: left; margin-left: 20px; } #div3{ height: 50px; background-color: aqua; } #div4{ width: 200px; height: 50px; background-color: olivedrab; float: left; } #div5{ width: 200px; height: 50px; background-color: orange; float: left; } div{ position: relative; } </style> </head> <body> <div id="div1">&nbsp;</div> <div id="div2">&nbsp;</div> <div id="div3"> <div id="div4">&nbsp;</div> <div id="div5">&nbsp;</div> </div> </body> </html> <!-- position absolute：絕對定位，需要配合使用left、top relative：相對定位，一般會和float、magrin、padding...一起使用 float --> ``` ![](https://i.imgur.com/CM8vd29.png) ```htmlembedded= <html> <head> <meta charset="utf-8"> <style type="text/css"> body{ margin: 0; padding: 0; background-color: gray; } div{ position: relative; } #div_top{ background-color: orange; height: 20%; } #div_left{ background-color: greenyellow; height: 85%; width: 10%; float: left; } #div_main{ background-color: whitesmoke; height: 70%; float: left; width: 85%; } #div_bottom{ background-color: sandybrown; height: 10%; width: 85%; float: left; } #div_container{ width: 80%; height: 100%; border: 1px solid blue; margin-left: 10%; float: left; } </style> </head> <body> <div id="div_container"> <div id="div_top">div_top</div> <div id="div_left">div_left</div> <div id="div_main">div_main</div> <div id="div_bottom">div_bottom</div> </div> </body> </html> ``` ![](https://i.imgur.com/vIWGKvy.png)