CSS3-06 樣式 5

時間  2019-12-11
標籤 css3 css 樣式 欄目 CSS 简体版
原文   原文鏈接

浮動（Float）

關於浮動，要說的可能就是：一個設置了浮動的元素會盡可能向左移動或向右移動，且會對其後的元素形成影響，其後的元素會排列在其圍繞在其左下或右下部。彷佛就這麼簡單，可是在實際開發中，它應用這的是很是的多。在此，我會淺析浮動的基本原理，而後經過實例的方式儘可能讓你們對浮動有更加深入的理解
  • 關於浮動
    • 如何設置元素的浮動

      • 設置一個元素的浮動很簡單html

        // 只能設置一個元素左浮動或又浮動
float: left/right;

      • 須要特別注意的是：浮動 只能 做用於文檔流中的元素。也就是說對於四種定位方式，只對默認定位（Static）、相對定位（Relative）的元素起做用。web

    • 浮動對其周圍元素的做用
      • 浮動只對其後邊的元素有影響，對前邊的元素沒有任何影響。

        • 示例佈局

          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #red-div {
            background-color: red;
            width: 100px;
            height: 100px;
        }
        #blue-div {
            background-color: blue;
            width: 100px;
            height: 100px;
            float: right;
        }
    </style>
</head>
<body>
    <div id="red-div"></div>
    <p id="before">This is a paragraph. This is a paragraph. This is a paragraph. </p>
    <div id="blue-div"></div>
    <p id="after">This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.</p>
</body>
</html>

      • 浮動對其後邊元素的影響
        • 其後爲非浮動元素
          • 咱們說，「浮動元素後非浮動元素會圍繞在其左下或右下排布」。準確的說，「浮動元素後非浮動元素會按照文檔流的流失佈局來排布，只不過會空出浮動元素所佔的空間（浮動元素是處在文檔流中的，會佔據文檔流的空間）」。可是有一點你須要明白：其後邊元素的所在的容器的是不會爲浮動元素流出空間的。

          • 示例spa

            // 設置 blue 的透明度
#blue-div {
    background-color: rgba(0, 0, 255, 0.3);
    width: 100px;
    height: 100px;
    float: right;
}
// 改變 after 的內容長度
<p id="after">This is another paragraph.</p>

            觀察發現，after 按照正常的文檔流佈局方式排列3d

            // 設置 after 的背景色
#after {
    background-color: orange;
}

            觀察發現，after 佔據了整個屏幕寬度code

        • 其後爲浮動元素
          • 浮動元素後邊的浮動元素，在空間容許的狀況下會緊鄰其左下或右下方顯示（浮動方向相同）。

          • 示例htm

            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: lightgray;
        }
        div {
            margin-right: 10px;
        }
        #red-div {
            background-color: red;
            width: 100px;
            height: 100px;
            float: right;
        }
        #blue-div {
            background-color: blue;
            width: 100px;
            height: 100px;
            float: right;
        }
        #green-div {
            background-color: green;
            width: 100px;
            height: 100px;
            float: right;
        }
    </style>
</head>
<body>
    <div id="red-div"></div>
    <div id="blue-div"></div>
    <div id="green-div"></div>
</html>

            咱們能夠發現，浮動元素後的浮動元素，在空間充足的狀況下會緊鄰其左下或右下方顯示（能夠理解爲從浮動方向起，向相反方向排布）。咱們接下來看看空間不足的狀況。blog

            // 設置 blue 的款的爲 400px
#blue-div {
    background-color: blue;
    width: 400px;
    height: 100px;
    float: right;
}

            在空間不足的狀況下，其後的元素會排列在下一行，且從浮動方向起，向相反方向排列。接下來咱們設置不一樣的浮動方向。圖片

            // 設置 green 左浮動
#green-div {
    background-color: green;
    width: 100px;
    height: 100px;
    float: left;
}

            設置 green 左浮動後，其會從其在文檔流的當前高度開始左右浮動（其不會對其前方的元素形成影響）ip

    • 清除浮動

      • 你們都知道，浮動元素會對其後的元素形成影響。那麼，總有些時候，咱們是討厭這些影響的，這就須要清除浮動的影響。

        clear: both/left/right;

      • 示例

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: lightgray;
        }
        div {
            margin-right: 10px;
        }
        #red-div {
            background-color: red;
            width: 100px;
            height: 100px;
            float: right;
        }
        #blue-div {
            background-color: blue;
            width: 400px;
            height: 100px;
            float: right;
        }
        #green-div {
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="red-div"></div>
    <div id="blue-div"></div>
    <div id="green-div"></div>
</html>

        由圖可知，green-div 顯示到了 red-div 的左邊，其主要是受到 red-div 右浮動的影響。怎麼知道其是收到了 red-div 而不是 blue-div 的影響呢？

        // 改變 green-div 的寬度
#green-div {
    background-color: green;
    width: 30px;
    height: 100px;
}

        觀察發現，green-div 並沒顯示在 blue-div 的左邊（blue-div 的左邊足以容納 green-div）。接下來咱們看看清除浮動後的效果。

        // 清楚 green-div 的浮動
#green-div {
    background-color: green;
    width: 30px;
    height: 100px;
    clear: both;
}

        清除 green-div 的浮動後，green-div 從新按照文檔流默認的流式佈局方式排布。

  • 浮動兩列布局
    • 浮動的一個重要的應用是設置頁面的 兩列或三列 佈局，咱們經過示例看看如何使用浮動來實現頁面的兩列布局，及其注意事項。

    • 示例

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: lightgray;
        }
        #container {
            background-color: yellow;
        }
        #red-div {
            background-color: red;
            float: left;
        }
        #green-div {
            background-color: green;
            float: right;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="red-div"></div>
        <div id="green-div"></div>
    </div>
</html>

      咱們先搭建頁面的結構，可是在界面上，你什麼都看不到。很明顯，對於 div，它默認的尺寸是其內容的尺寸，你沒有設置寬高，天然不會顯示。

      // 設置 red-div 和 blue-div 的尺寸
#red-div {
    background-color: red;
    width: 150px;
    height: 180px;
    float: left;
}
#green-div {
    background-color: green;
    width: 330px;
    height: 300px;
    float: right;
}

      如圖，設置 red-div 和 blue-div 後，其確實顯示出來了。可是咱們設置的父包含塊背景顏色卻沒有顯示出來。這明顯不符合上邊的說法「對於 div，它默認的尺寸是其內容的尺寸」，這又是怎麼一會事呢？先無論怎麼回事，咱們先把問題解決了。

      // 設置 container 的 overflow 屬性爲 hidden
#container {
    background-color: yellow;
    overflow: hidden;
}

      如圖所示，咱們發現，背景圖片顯示出來了。可是緣由是什麼？緣由是，當父包含塊中的子元素設置了浮動時，而其自己沒有設置浮動的狀況器，其自身的高度就無法擴展（不能隨着子元素的高度來改變本身的高度）。關於兩列布局，及如何解決這個問題，還有其餘的方案，在此咱們不在敘述。有興趣的朋友能夠和我一塊兒探討。

控制一個元素的顯示（Display）

咱們知道，一個元素至少有兩種顯示狀態：顯示 / 隱藏。而 HTML 元素又分爲塊級元素和內聯元素，咱們一般須要改變一個 HTML 元素的具體的顯示狀態，來知足實際的需求。在此，咱們就來看看如何經過 display 屬性來控制一個 HTML 元素的顯示狀態。

  • 控制 隱藏 或 顯示

    // 隱藏一個元素，元素默認顯示
display: none;

    使用 display 隱藏一個元素，被隱藏的元素不會再佔據文檔流的空間

    // 使用 visibility 屬性隱藏一個元素
visibility: hidden;

    使用 visibility 屬性隱藏一個元素，被隱藏的元素會佔據原有的文檔流空間

  • 控制以 塊級元素 或 內斂元素顯示

    • 默認狀況下

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: lightgray;
        }
        #red-div {
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <p>This is a paragraph.</p>
    <div id="red-div">This is a div.</div>
    <span>This is another paragraph.</span>
</html>

    • 使塊級元素顯示爲內聯元素

      // 使 red-div 顯示爲內聯元素
#red-div {
    background-color: red;
    width: 100px;
    height: 100px;
    display: inline;
}

      觀察發現 red-div 和 span 顯示在了一行（塊級元素默認會在其先後添加一個換行）；且 red-div 設置的寬高也沒有效果，這是必然的（只有塊纔有尺寸）。若是咱們想讓 red-div 顯示在如今的位置，且可設置寬高，那麼就讓它顯示爲一個行內塊級元素。

      #red-div {
    background-color: red;
    width: 100px;
    height: 100px;
    display: inline-block;
}

    • 使內聯元素顯示爲塊級元素

      // span 自己是一個內斂元素，設置它顯示爲塊級元素
span {
    display: block;
}

      圖示爲設置 span 爲塊級元素後的效果，可是咱們會發現，沒有在其前邊增長換行。

對齊方式

一般狀況下，咱們須要設置一個元素或元素內容的對齊方式，來美化咱們的界面。對齊主要在兩個方向上：水平和垂直
  • 元素
    • 左右對齊
      • 左右對齊

        • 使用 Absolute 定位實現左右對齊

          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: lightgray;
        }
        #red-div {
            background-color: red;
            width: 100px;
            height: 100px;
            /*設置右對齊*/
            position: absolute;
            right: 0px;
        }
    </style>
</head>
<body>
    <div id="red-div">This is a div.</div>
</html>

        • 使用 float 設置左右對齊

          #red-div {
    background-color: red;
    width: 100px;
    height: 100px;
    /*設置右對齊*/
    float: right;
}

      • 中心對齊

        #red-div {
    background-color: red;
    width: 100px;
    height: 100px;
    /*設置居中對齊*/
    margin: 0px auto;
}

        須要注意的是，在使用 margin 來設置一個元素的居中對齊時，這個元素必須設置有寬度
    • 上下對齊（主要用於圖文混排）

      • 設置垂直對齊

        vertical-align: top/middle/bottom;
      • 示例

        • 默認狀況（頂部對齊）

          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: lightgray;
        }
        #red-div {
            background-color: red;
            width: 100px;
            height: 100px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="red-div">This is a div.</div>
    <span>This is a paragraph.</span>
</html>

        • 設置垂直居中對齊

          #red-div {
    background-color: red;
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: middle;
}

  • 內容（水平對齊）

    • 使用 text-align 來設置文本內容的對齊方式

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            background-color: lightgray;
        }
        #red-div {
            background-color: red;
            width: 100px;
            height: 100px;
            text-align: center;
        }
        #content {
            background-color: yellow;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="red-div"><div id="content">div</div></div>
</html>

      咱們發現，設置 text-align 後，red-div 的子孫元素的文本內容水平居中對齊了，其子元素 content 並無居中對齊。咱們再試沒有辦法像控制元素同樣控制內容的垂直方向上的對齊方式。可是能夠採用其餘方案，如：邊距、填充等

後記

實在是枯燥無味，不知你是否能堅持看到這裏。關於 HTML 和 CSS 基礎的介紹，到此就告一段落了。有關更多細節的東西，會在後續的博客中少有涉及。接下來，會介紹 JavaScript 的基礎。本目前在從事 iOS 和 web 開發工做，處於小妖修煉階段，很但願與你們交流，共同進步。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程