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

塊級元素和行內元素

HTML裏的元素能夠分爲塊級元素和行內元素兩大類：css

🅰塊級元素：塊級元素典型特色就是它要獨佔一行，它後面跟隨的其它元素都會被擠到下一行，能夠將塊級元素理解爲一個矩形容器，有本身的寬度和高度。好比：<div><p><hi><form><ul><li>等都是塊級元素。html

🅱行內元素：行內元素與塊級元素相反，在寬度容許的狀況下，一行能夠容納多個行內元素，它沒有固定形狀，沒法設置高度與寬度。好比：<span><a><input><img><strong><em>等都是行內元素。瀏覽器

相互轉換：咱們能夠使用display:inline將塊級元素轉換爲行內元素，能夠使用display:block將行內元素轉換爲塊級元素。ide

示例代碼：佈局

<!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>

流動佈局

流動佈局就是元素按照正常文檔流自上而下的排列，全部元素按前後順序逐行往下排序，塊級元素獨佔一行，行內元素在每行中按照從左到右的順序依次排列。流動佈局是網頁默認的顯示規則。ui

示例代碼：spa

<!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盒子怎麼辦呢？浮動就能夠完成這個事情。看個例子：code

<!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都設置了邊距和背景。orm

▶div1未設置浮動，它在大盒子裏面獨佔一行，爲它設置了紅色的虛線邊框，設置了邊距。xml

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

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

定位佈局

浮動佈局比較靈活，不易控制。定位佈局相對而言較易使用，固然，在實際開發中，每每是二者配合使用，以知足佈局的個性需求。定位佈局主要是經過爲【position】屬性設置不一樣的值來完成佈局的。該值主要有如下三種：

一、值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>

二、值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>

三、值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 --------------------------

原文出處：https://www.cnblogs.com/nnzhang/p/10955097.html