布萊恩的創業小窩

在那些前端工程師必學的CSS裡,今天就來教你那個叫"浮動屬性"的小傢伙~ CSS 的 float (浮動) 屬性 CSS 的 float (浮動) 屬性，是 前端工程師 在做網頁排版時，必用的基本語法之一。使用 CSS float 浮動屬性，可將一個元素往左移或是往右移，並允許其他元素圍繞它（例如文繞圖、圖繞文等）。 何時使用？－float 浮動屬性的使用時機 使用 <div> 等區塊元素排版時，預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時，就需要使用 float 屬性。 如下方例子，若我們使用一般的 div 區塊元素時，則所有的區塊就整齊的由左上出來，一個 <div> 區塊就佔用了一行。（溫馨提示：可以點擊下例視窗左上方的「 HTML 」與「CSS」按鈕來查看語法） See the Pen Float-example-1 by Tedutw ( @Tedutw ) on CodePen . 承上例，若在 CSS 中加一個「float: left;」，則結果如下（溫馨提示：可以點擊下例視窗左上方的「 HTML 」與「CSS」按鈕來查看語法）： See the Pen Float-example-2 by Tedutw ( @Tedutw ) on CodePen . 這是因為「float」屬性使 div 區塊元素「漂浮」起來，不再形成 div 區塊占滿整行的情況 承上例，若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right ;」，則所有的區塊就會由右側開始「飄」出來，結果如下（溫馨提示：可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法）： See the Pen Float-example-3 by Tedutw ( @Tedutw ) on CodePen . 你知道 CSS 的浮動屬性總共有三個參數嗎？分別是：left、right 與 none。left 與 right 顧名思義，就是控制區塊由左側還是右側浮出用的拉！如上方兩個例子所示。而 none 就是不使用浮動參數的意思。 下方是另一個文繞圖...

想成為前端工程師?今天讓我們一起來了解定位元素! 為了要設計出更複雜的網頁前端版面， 前端工程師 都必須知道 CSS 的所有「position 屬性」。 如下所示，它有一～大堆屬性值，這些屬性值不但不好理解，也不好記憶！而且稍一設定不好，就會讓許多 CSS 區塊若入走鐘、重疊等窘境。 別煩惱了！現在將會一個個介紹屬性，如下。也建議各位想當 前端工程師 的學員們把這頁加入網頁書籤中！以便日後方便查詢唷！ See the Pen CSS:Position 範例 by Tedutw ( @Tedu tw ) on CodePen .   CSS：Positioning Elements 定位元素 CSS 定位屬性（positioning properties）是用來定位元素使用。它可將一個元素置於另一個元素之後，還可以指定當某個元素的內容太大時該如何做。 所有的元素都可用 top（上）、bottom（下）、left（左） 與 right（右） 屬性來定位。但若沒事先將「定位屬性」設置好的話，以上四種屬性（top、bottom、left 與 right）皆不起作用。它們亦會依照定位方法的不同，而以不同的方式呈現。   靜態定位（position: fixed） 「靜態定位（position: fixed）」是所有 HTML 元素的預設值。當元素為「靜態定位（position: fixed）」時，會遵循「Normal flow （指從左到右、上到下的常態佈局）」來排列。 靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例，儘管我們 CSS 設定為「top: 30px;right: 5px;」（上方距離30px、右側距離50px），被靜態定位的 HTML 元素，排版仍不受這些 CSS 影響。 See the Pen position_static by Tedutw ( @Tedutw ) on CodePen .   固定定位（position:fixed） 固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。 不同於靜態定位，固定定位（posi...