---
# System prepended metadata

title: CSS布局
tags: [JavaWeb CSS]

---

# 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)

