天天看點
傳回

Html 基礎 三

浮動

浮動最直接的價值就在于他可以多個div并排在同一行。

當然也可以設定盒子的樣式為 inline-block， 但是帶來的問題也随之而來，首先就是盒子之間右空隙，其次，盒子會依次從左到右并排，雖然可以通過padding控制他們之間的間距，但是變數太大了

  • 浮動會讓盒子脫離标準流，盒子不再占用位置。
  • 浮動的盒子總是會找到離他最近的父元素進行對齊，但是不會超出内邊距的範圍。
  • 浮動的盒子不能越過父盒子的padding值

常見的布局

如下圖，每一個圖檔都在一個div中，為了讓他們可以并排在一行上，肯定就得添加浮動，同時浮動會影響其他标準流，所在在這些标記浮動的元素的最外層添加一個div，清除這些盒子的浮動。同時給最外層的盒子添加高，讓他占位。這樣再往下的标準流就不會再受到影響了。

Html 基礎 三

嘗試浮動

讓多個div并排在同一列，給下面的兩個div同時添加浮動即刻

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        .dv2 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>

浮動僅僅會影響他下面的元素，看下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv1 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .dv2 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>

最終的效果就像下面這樣, 雖然水藍色的盒子添加了浮動，但是這也是僅僅是會影響他之後的元素，而他上面的元素不會受到影響。

Html 基礎 三

推斷，父盒子中有多個子盒子，如果其中一個盒子存在浮動，那麼其他的所有盒子都需要浮動。才能在一行内并排

浮動隐藏的模式轉換

浮動可以讓盒子隐式的轉換成行内塊元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dv1 {
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
<div class="dv1">123</div>
</body>
</html>

效果：

Html 基礎 三

布局和版心

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top,
        .footer,
        .main,
        .banner{
            background-color: #eee;
            width: 1190px;
        }
        .top {
            height: 80px;
            margin: 0 auto 5px;
        }
        .banner {
            height: 200px;
            margin: 0 auto 5px;
        }
        .main {
              height: 600px;
              margin: 0 auto 5px;
          }
        .footer {
            height: 80px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="top">123</div>
<div class="banner">123</div>
<div class="main">123</div>
<div class="footer">123</div>
</body>
</html>

效果圖：

Html 基礎 三

示例2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top,
        .footer,
        .main,
        .banner{
            background-color: #eee;
            width: 1190px;
        }
        .top {
            height: 80px;
            margin: 0 auto 5px;
        }
        .banner {
            height: 200px;
            margin: 0 auto 5px;
        }
        .main {
              height: 600px;
              margin: 0 auto 5px;
        }
        .left {
            background-color: pink;
            height: 600px;
            width: 300px;
            float: left;
        }
        .right {
            background-color: aqua;
            height: 600px;
            width: 890px;
            float: right;
        }
        .footer {
            height: 80px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="top">123</div>
<div class="banner">123</div>
<div class="main">
        <div class="left"></div>
        <div class="right"></div>
</div>
<div class="footer">123</div>
</body>
</html>

注意點，比如main部分，父盒子的寬度是1190px， 裡面的兩個子盒子發生浮動實作了并排，這時如果子盒子的寬度相加大于父盒子的寬度，最終的效果就是右邊的子盒子會被擠下去。 為了防止他們不被擠下去，就得修改相應的子盒子的寬度

此外，像這種布局方式，我們用滑鼠推動着浏覽器往左滑動，盒子是不會被擠下去的。

效果：

Html 基礎 三

清除浮動

清除浮動的本質： 就是為了解決父級元素因為子集元素浮動後而導緻高度為0的情況。

看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 1190px;
            background-color: #eee;
            margin: 0 auto 5px;
        }
        .left {
            background-color: pink;
            height: 600px;
            width: 300px;
            float: left;
        }
        .right {
            background-color: aqua;
            height: 600px;
            width: 890px;
            float: right;
        }
        .footer {
            width: 100%;
            height: 80px;
            margin: 0 auto;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<nav>

</nav>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer">123</div>
</body>
</html>

因為我們并沒有給main盒子設定高度，導緻讓它裡面的子盒子發生發動脫離文檔流後，沒有人撐開它，他就重新變成了一條線

前面的解決方式是我們給main盒子設定一個固定的高度，但是很多情況下，我們的需求是根據子盒子的本身的高度去撐開盒子，而不是把高度寫死，于是我們可以使用清除浮動。

清除浮動實作的最終效果就是：父盒子中子盒子并排，父盒子的高度 = 最高的子盒子的高度

  • 清除浮動方式1：

w3c推薦的方式，在存在浮動的元素後面添加一個新的空标簽，如下：

<body>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
<!-就像下面這樣-->
<div style="clear: both;"></div>
<div class="footer">123</div>
</body>
  • 清除浮動方式2：

第二種方式清除浮動，可以通過給父盒子添加屬性 overflow

.main {
    width: 1190px;
    background-color: #eee;
    margin: 0 auto 5px;
    /*同樣可以實作清除浮動*/
    overflow: hidden;
}

元素的定位

元素的定位屬性主要是包含兩部分： 定位模式 + 邊偏移

邊偏移

邊偏移屬性 描述
top 頂部偏移量：定義元素相對于其父元素上邊距的距離
bottom 底部偏移量：定義元素相對于其父元素下邊距的距離
left 左側偏移量
right 右側偏移量

四種定位模式

css中，通過position屬性定義元素的定位模式，基本的文法如下

值 描述
static 預設值，自動定位。
relative 相對定位，相對于其文檔流的位置進行定位。
absolute 絕對定位，相對于其上一個元素的父元素進行定位。
fixed 固定定位，相對于浏覽器的視窗進行定位。
靜态定位

網頁中的元素預設的都是靜态定位，比如一個div預設會自己獨占一行，多個span可以并排在一行。

靜态定位的唯一的作用就是取消其他的定位模式。

相對定位

相對定位：相對于自己目前的位置，再定位到新的位置上。

看下面的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dv {
            margin: 100px;
            background-color: aqua;
            width: 100px;
            height: 100px;
            position: relative;
            top: 100px;
        }
    </style>
</head>
<body>
<div class="dv"></div>
</body>
</html>

最終的效果就是會相對于自己的位置重新定位，在top方向上增加100px

Html 基礎 三

在看下面的示例： 可以看到，使用相對定位，元素雖然會移動，但是元素的原來在标準流中所占的位置不會發生改變。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dv1 {
            background-color: aqua;
            width: 100px;
            height: 100px;
            position: relative;
            top: 50px;
            left: 50px;
        }
        .dv2 {
            background-color: skyblue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>

效果圖：

Html 基礎 三
絕對定位

如下例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dv1 {
            background-color: aqua;
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .dv2 {
            background-color: skyblue;
            width: 120px;
            height: 120px;
        }
    </style>
</head>
<body>
<div class="dv1"></div>
<div class="dv2"></div>
</body>
</html>

效果圖：

Html 基礎 三

給水藍色的盒子設定定位方式：相對定位，他相對于自己的父元素進行定位，在上面的例子中，就是相對于body，也就是目前的螢幕進行定位。

再看下面這個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dv1 {
            margin: 50px;
            background-color: aqua;
            width: 100px;
            height: 100px;
        }
        .dv2 {
            background-color: skyblue;
            position: absolute;
            top: 20px;
            left: 20px;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="dv1">
    <div class="dv2">

    </div>
</div>
</body>
</html>

效果圖：

通過這個例子看到，當給子盒子添加相對定位時，如果他的直接父盒子并沒有添加任何定位，這時子盒子實際上是會相對于body進行定位。

子絕父相

子絕父相說的是啥意思呢？意思就是說，如果我們想實作子元素相對于父元素進行定位時，子元素的定位方式需要設定成絕對定位，父元素的定位方式設定成相對定位才ok

還是上面的例子：像下面這樣修改css樣式：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .dv1 {
            margin: 50px;
            background-color: aqua;
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .dv2 {
            background-color: skyblue;
            position: relative;
            top: 10px;
            left: 10px;
            width: 80px;
            height: 80px;
        }
    </style>

最終實作的效果就是：

加了定位的盒子水準對齊

首先來說，一個盒子隻要是添加了定位，盒子就會飄起來，與此同時margin屬性也會失效。

那怎麼使一個添加了定位的盒子水準對齊呢？ 如下:

.dv1 {
            background-color: aqua;
            width: 100px;
            height: 100px;
            /*無論什麼定位都ok*/
            position: absolute;
            /*以左上角為基準，移動到父盒子的百分之五十寬度的位置*/
            left: 50%;
            /*margin值，往左減少50px*/
            margin-left: -50px;
        }

顯示和隐藏

css中與顯示和隐藏相關的常見屬性有如下幾個

display

visiblity

overflow

我們的目的是讓其在文檔中消失，而不是在源碼中将其删除。

  • 通過display隐藏元素後，元素原來的位置不再保留 
div {
    /*隐藏之後，不再保留原位置*/
    display: none;
}

div {
    /*将元素轉換成塊級元素，第二層意思就是顯示元素*/
    display: block;
}

通過visibility控制元素的隐藏，原位置将會被保留

div {
    /*對象可見*/
    visibility: visible;   
}

div {
    /*對象隐藏*/
    visibility: hidden;   
}      
div {
    /*超出的部分依然會顯示*/
    overflow: visible;
}

div {
    /*超出的部分隐藏*/
    overflow: hidden;
}

div {
    /*内容超出後，會顯示滾動條*/
    overflow： auto；
}

div {
    /*總是顯示滾動條*/
    overflow： scroll；
}
html 清除浮動 相對定位
上一篇: android仿iPhone滾輪控件實作及源碼分析（二）
下一篇: 詳解Class類檔案的結構（下）

繼續閱讀