【WEB基礎】HTML & CSS 基礎入門（10）佈局與定位

青衫煙雨客發表於2019-05-31
WebHTMLCSS

塊級元素和行內元素

HTML裡的元素可以分為塊級元素和行內元素兩大類：

?塊級元素：塊級元素典型特點就是它要獨佔一行，它後面跟隨的其它元素都會被擠到下一行，可以將塊級元素理解為一個矩形容器，有自己的寬度和高度。比如：<div><p><hi><form><ul><li>等都是塊級元素。

?行內元素：行內元素與塊級元素相反，在寬度允許的情況下，一行可以容納多個行內元素，它沒有固定形狀，無法設定高度與寬度。比如：<span><a><input><img><strong><em>等都是行內元素。

相互轉換：我們可以使用display:inline將塊級元素轉換為行內元素，可以使用display:block將行內元素轉換為塊級元素。

示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*為每個元素加上不同的背景色加以區分*/
        div { background-color:#00FFFF;}
        span { background-color: #66FF33;}
        strong { background-color:#CC9900;}
        p { background-color:#CC99FF; }
        a { background-color:#ADFF2F; }

        #p1 { display:inline;}
        #span1 { display:block;}
    </style>
</head>
<body>
    <div id="div1">塊元素div獨佔一行</div>
    <p>塊元素p獨佔一行</p>
    <span>行內元素span</span>
    <a>行內元素a</a>
    <strong>行內元素strong</strong>
    <p id="p1">塊元素p轉換為行內元素</p>
    <span id="span1">行內元素span轉換為塊級元素,獨佔一行</span>
</body>
</html>

流動佈局

流動佈局就是元素按照正常文件流自上而下的排列，所有元素按先後順序逐行往下排序，塊級元素獨佔一行，行內元素在每行中按照從左到右的順序依次排列。流動佈局是網頁預設的顯示規則。

示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        /*為每個元素加上不同的背景色加以區分*/
        div { background-color:#00FFFF;}
        span { background-color: #66FF33;}
        strong { background-color:#CC9900;}
        p { background-color:#CC99FF; }
        i { background-color:#ADFF2F; }
        em { 
            background-color:#D19275; 
            display:block;/*將em轉換為塊級元素*/
        }
    </style>
</head>
<body><!--正常文件流，按先後順序依次排列-->
    <div>div塊級元素（獨佔一行）</div>
    <span>span1行內元素</span><strong>strong行內元素</strong>
    <p>p塊級元素（獨佔一行）</p>
    <i>i行內元素</i><em>em行內元素(轉換為塊級元素，獨佔一行)</em>
</body>
</html>

浮動佈局

浮動佈局是利用CSS完成網頁佈局最重要的方式，使用極其靈活多變，這裡僅說明基本的概念，要熟練掌握還需多看、多練。在上面的流動佈局我們瞭解到以div為首的塊級元素會獨佔一行，在網頁佈局中，最常用的就是div，通常把div當做一個盒子，再來把一個個div盒子進行排列。但是div獨佔一行，我們想在一行並列放置兩個、甚至三個div盒子怎麼辦呢？浮動就可以完成這個事情。看個例子：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #outside {/*外層div樣式*/
            width:280px;
            height:160px;
            background-color:#F0E68C;
            border:1px solid red;
        }
        #div1 {/*div1樣式，不浮動*/
            height:25px;
            padding:10px;
            margin:5px;
            border:2px dashed red;
        }
        #div2 {/*div2樣式，左浮動*/
            padding:10px;
            margin:5px;
            width:120px;
            height:60px;
            background-color:green;
            float:left;/*設定左浮動*/
        }
        #div3 {/*div3樣式，右浮動*/
            padding:10px;
            margin:5px;
            background-color:red;
            float:right;/*設定右浮動*/
        }
    </style>
</head>
<body>
    <div id="outside"><!--外層div-->
        <div id="div1">div1未設定浮動，獨佔一行</div>
        <div id="div2">div2左浮動,設定了寬和高</div>
        <div id="div3">div3右浮動</div>
    </div>
</body>
</html>

上面的例子定義了4個div元素，【outside】是最外層div，可以理解為一個大盒子裡面放三個小盒子，為顯示直觀，每個div都設定了邊距和背景。

▶div1未設定浮動，它在大盒子裡面獨佔一行，為它設定了紅色的虛線邊框，設定了邊距。

▶div2設定了左浮動，填充了綠色背景，設定了寬和高，此時div2不在獨佔一行，而是按照設定的寬度和高度靠左顯示。

▶div3設定了右浮動，填充了紅色背景，沒有設定寬和高，此時div3會根據裡面的內容確定其尺寸，然後靠右顯示，同樣不在獨佔一行。

定位佈局

浮動佈局比較靈活，不易控制。定位佈局相對而言較易使用，當然，在實際開發中，往往是兩者配合使用，以滿足佈局的個性需求。定位佈局主要是通過為【position】屬性設定不同的值來完成佈局的。該值主要有以下三種：

1、值fixed（固定定位）：以瀏覽器為基準，指定定位元素與瀏覽器4條邊的距離完成定位，分別通過top、bottom、left和right這四個屬性的設定來完成。其實，這4個屬性未必全部都需要設定，只需要設定top和left即可。當元素設定了固定定位，如果頁面過長出現滾動條，它也不會隨滾動條的滾動而移動。

 示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1
        {
            width:220px;
            height:600px;
            background-color:#DDA0DD;
        }
        #div2
        {
            position:fixed;/*設定元素為固定定位*/
            top:40px;/*與瀏覽器頂部邊框距離40px*/
            left:150px;/*與瀏覽器左部邊框距離150px*/
            width:120px;
            height:100px;
            background-color:#DAA520;
        }
    </style>
</head>
<body>
    <div id="div1">div1:未定位<br />第二行<br />第三行<br />第四行</div>
    <div id="div2">div2：設定固定定位，距離瀏覽器上邊框40px,左邊框150px</div>
</body>
</html>

2、值relative（相對定位）：以需定位元素按正常文件流所在位置為參照，然後使定位元素相對於它在原本的正常文件流的位置偏移指定的距離。

示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div{/*將三個div設定相同的邊距、邊框和尺寸*/
            margin:20px;
            padding:10px;
            border:2px dashed red;
            width:100px;
            height:34px;
        }
        /*將三個div設定不同的背景*/
        #div1{background-color:#98FB98;}
        #div2{
            background-color:#87CEEB;
            position:relative;/*設定相對定位*/
            top:30px;
            left:40px;
        }
        #div3{background-color:#FF00FF;}
    </style>
</head>
<body>
    <div id="div1">第一個盒子</div>
    <div id="div2">第二個盒子</div>
    <div id="div3">第三個盒子</div>
</body>
</html>

3、值absolute（絕對定位）：絕對定位的元素是相對於離它最近的一個已定位的父元素為參照進行定位的（預設是body）。下面的示例有兩個div，可以理解為父盒子和子盒子，父盒子設定絕對定位，以body為參照設定位置。子盒子也是絕對定位，以父盒子為定位參照。

示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #father{/*外層父盒子*/
          width: 200px;
          height: 170px;
          background-color: orange;
          position: absolute;/*絕對定位*/
          top:30px;/*頂部距離body上邊框30px*/
          left:50px;/*左側距離body左邊框50px*/
        }
        #son{/*裡層盒子*/
          width: 100px;
          height: 80px;
          background-color: pink;
          position: absolute;/*絕對定位*/
          top:40px;/*頂部距離父盒子上邊框40px*/
          left:60px;/*左側距離父盒子左邊框60px*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html>

在圖上加上點註釋看得會更清楚。

-------------------------- END --------------------------

相關文章