前端學習之 CSS（三）

時間 2019-12-09

標籤前端學習 css 欄目 CSS 简体版

原文原文鏈接

九:浮動

浮動是css裏面佈局最多的一個屬性，也是很重要的一個屬性。css

float：表示浮動的意思。html

屬性值：前端

none: 表示不浮動，默認linux

left: 表示左浮動web

right：表示右浮動瀏覽器

例：ide

html內容：佈局

<div class="box1">第一個div</div>
 <div class="box2">第二個div</div>
 <span>一個span</span>

View Code

css內容：學習

*左浮動*/
.box1 {
    width: 300px;
    height: 300px;
    background-color: red;
    float: left;
}
/*右浮動*/
.box2 {
    width: 400px;
    height: 400px;
    background-color: green;
    float: right;
}
/*左浮動*/
span {
    float: left;
    width: 100px;
    height: 200px;
    background-color: yellow;
}

View Code

效果圖：網站

出現的效果圖，三個元素並排顯示，.box1和span由於是左浮動，緊挨在一塊兒，這種現象貼邊。.box2盒子由於右浮動，因此緊靠着右邊。

浮動四大特性的學習是必不可少的：

1.浮動的元素脫標

2.浮動的元素互相貼靠

3.浮動的元素由"字圍"效果

3.收縮的效果

下面咱們將一一來學習這些特性：

1. 浮動元素脫標

脫標：就是脫離了標準文檔流

在這裏補充一下，什麼是標準文檔流？

宏觀的講，咱們的web頁面和ps等設計軟件有本質的區別，web 網頁的製做，是個「流」，從上而下，像「織毛衣」。

而設計軟件，想往哪裏畫東西，就去哪裏畫。

標準文檔流有如下特性：

空白摺疊現象。

高矮不齊，底邊對齊。

自動換行寫，一行寫不了，換行寫。

例：

html內容：

<div class="box1">小紅,box1</div>
<div class="box2">小黃,box2</div>
<span>第一個span</span>
<span>第二個pan</span>

View Code

css內容爲：

.box1 {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.box2 {
    width: 400px;
    height: 400px;
    background-color: yellow;
}
span {
    background-color: green;
    float: left;
    width: 300px;
    height: 50px;
}

View Code

效果圖爲：

效果分析：紅色盒子壓蓋住了黃色的盒子，一個行內的span標籤居然可以設置寬高了。

緣由1：小紅設置了浮動，小黃沒有設置浮動，小紅脫離了標準文檔流，其實就是它不在頁面中佔位置了，此時瀏覽器認爲小黃是標準文檔流中的第一個盒子。因此就渲染到了頁面中的第一個位置上。

緣由2：全部的標籤一旦設置浮動，就可以並排，而且都不區分行內、塊狀元素，都可以設置寬高。

2. 浮動元素互相貼靠

例：

html內容：

<div class="father">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>

View Code

css內容：

.father{
    width: 900px;
    height: 800px;
}
.box1 {
    width: 200px;
    height: 400px;
    float: left;
    background-color: red;
}

.box2 {
    width: 150px;
    height: 450px;
    /*(2)box2靠邊的參數*/
    /*width: 650px;*/
    /*height: 450px;*/
    float: left;
    background-color: yellow;
}

.box3 {
    width: 200px;
    height: 300px;
    /*(3)box2靠box1狀況下box3不靠box2的參數*/
    /*width: 600px;*/
    /*height: 300px;*/
    float: left;
    background-color: green;
}

View Code

效果圖：

效果分析:

效果發現：

若是父元素有足夠的空間，那麼box3緊靠着box2，box2緊靠着box1，box1靠着邊。

若是沒有足夠的空間，那麼box3就會本身靠邊，若是再沒有足夠的空間靠着box1，box2也會往邊靠。

能夠是將box2或box3的另一組註釋的數據打開，將原有的數據進行註釋便可得到效果圖。

3. 浮動元素字圍效果

例：

html內容：

p>
    帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛
    帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛
    帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛帥氣的路飛
</p>

View Code

css內容爲：

/*重置全部HTML網頁元素的瀏覽器樣式，用於小網站*/
* {
    padding: 0;
    margin: 0;
}
div {
    float: left;
}
p {
    background-color: #666;
}

View Code

效果圖：

效果發現：

所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果。

4. 浮動元素緊湊效果

收縮：一個浮動元素。若是沒有設置width，那麼就自動收縮爲文字的寬度（這點跟行內元素很像）。

例：

html內容：

css內容：

div{

float: left;

}

謹記：關於浮動，咱們初期必定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。另外，有浮動，必定要清除浮動。

5.爲何要清除浮動

在頁面佈局的時候，每一個結構中的父元素的高度，咱們通常不會設置。（爲何？）

你們想，若是我初版的頁面的寫完了，感受很是爽，忽然隔了一個月，老闆說頁面某一塊的區域，我要加點內容，或者我以爲圖片要縮小一下。這樣的需求在工做中很是常見的。真想打他啊。那麼此時做爲一個前端小白，確定是去每一個地方加內容，改圖片，而後修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是確定的。

html內容：

<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

View Code

css內容：

* {
    padding: 0;
    margin: 0;
}

.father {
    width: 1126px;
    /*子元素浮動 父盒子通常不設置高度*/
    /*出現這種問題，咱們要清除浮動帶來影響*/
    /*height: 300px;*/

}

.box1 {
    width: 200px;

    height: 500px;
    float: left;
    background-color: red;
}

.box2 {
    width: 300px;
    height: 200px;
    float: left;
    background-color: green;
}

.box3 {
    width: 400px;
    float: left;
    height: 100px;
    background-color: blue;
}

.father2 {
    width: 1126px;
    height: 600px;
    background-color: purple;
}

View Code

效果發現：

若是不給父盒子一個高度，那麼浮動子元素是不會填充父盒子的高度，那麼此時.father2的盒子就會跑到第一個位置上，影響頁面佈局。

浮動元素確實能實現咱們頁面元素並排的效果，這是它的好處，同時它還帶來了頁面佈局極大的錯亂！因此咱們要清除浮動，如下介紹多種清除浮動的方法。

(1) 給父盒子設置高度

這個方法你們看一下上一個代碼，它的使用不靈活，通常會經常使用頁面中固定高度的，而且子元素並排顯示的佈局。好比：導航欄

例：

html內容：

<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<div class="father2"></div>

View Code

css內容：

* {
    padding: 0;
    margin: 0;
}

.father {
    width: 1126px;
    /*子元素浮動 父盒子通常不設置高度*/
    /*出現這種問題，咱們要清除浮動帶來影響*/
    height: 400px;

}

.box1 {
    width: 200px;

    height: 400px;
    float: left;
    background-color: red;
}

.box2 {
    width: 300px;
    height: 200px;
    float: left;
    background-color: green;
}

.box3 {
    width: 400px;
    float: left;
    height: 100px;
    background-color: blue;
}

.father2 {
    width: 1126px;
    height: 600px;
    background-color: purple;
}

View Code

(2) clear:both

clear：意思就是清除的意思。

有三個值：

left：當前元素左邊不容許有浮動元素

right：當前元素右邊不容許有浮動元素

both：當前元素左右兩邊不容許有浮動元素

給浮動元素的後面加一個空的div，而且該元素不浮動，而後設置clear：both。

html內容爲：

<div>
    <ul>
        <li>Python</li>
        <li>web</li>
        <li>linux</li>
        <!-- 給浮動元素最後面加一個空的div 而且該元素不浮動 ，而後設置clear:both  清除別人對個人浮動影響-->
        <!-- 平白無故加了div元素  結構冗餘 -->
        <div class="clear"></div>

    </ul>
</div>
<div class="box">
</div>

View Code

css內容：

* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
div {
    width: 400px;
}
div ul li {
    float: left;
    width: 100px;
    height: 40px;
    background-color: red;
}
.box {
    width: 200px;
    height: 100px;
    background-color: yellow;
}
.clear {
    clear: both;
}

View Code

效果圖：

(3) 僞元素清除法(經常使用)

給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，而後設置

.clearfix:after {

/*必需要寫這三句話*/

content: '.';

clear: both;

display: block;

}

例：

html內容：

<div class="box clearfix">
    <div>111</div>
    <div>222</div>
    <div>333</div>
</div>
<div class="box2"></div>

View Code

css內容：

* {
    padding: 0;
    margin: 0;
}

.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.box div {
    float: left;
    width: 100px;
    height: 40px;
    background-color: red;
}

.box2 {
    width: 350px;
    height: 100px;
    background-color: yellow;
}

View Code

效果圖：

(4) overflow：hidden(經常使用)

給浮動子元素的父盒子，也就是不浮動元素，設置

.box {

overflow: hidden;

}

overflow屬性規定當內容溢出元素框時發生的事情。

說明：

這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。

例：

html內容：

<div class="box">
    <div>111</div>
    <div>222</div>
    <div>333</div>
</div>
<div class="box2"></div>

View Code

css內容：

* {
    padding: 0;
    margin: 0;
}

.box div {
    float: left;
    width: 100px;
    height: 40px;
    background-color: red;
}
/*.box {*/
    /*overflow: hidden;*/
/*}*/
.box2 {
    width: 350px;
    height: 100px;
    background-color: yellow;
}

View Code

當沒有將註釋去掉的時候是以下圖：

當加上註釋的內容時:

十： margin的用法

1.margin塌陷問題

盒模型包含着margin，爲何要在這裏說margin呢？由於元素和元素在垂直方向上margin裏面有一些異常的效果。

例：

html內容：

<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

View Code

css內容：

* {
    padding: 0;
    margin: 0;
}

.father {
    width: 400px;
    overflow: hidden;
    border: 1px solid gray;
}

.box1 {
    width: 300px;
    height: 200px;
    background-color: red;
    margin-bottom: 20px;
    /*float:left;*/
}

.box2 {
    width: 400px;
    height: 300px;
    background-color: green;
    margin-top: 50px;
    /*float:left;*/
}

View Code

效果圖以下：

若是將註釋float:left;將會出現塌陷問題，中間會變爲50px出現塌陷問題。

當給兩個標準流下兄弟盒子設置垂直方向上的margin時，那麼以較大的爲準，那麼咱們稱這種現象叫塌陷。無法解決，咱們稱爲這種技巧叫「奇淫技巧」。記住這種現象，在佈局垂直方向盒子的時候主要margin的用法。

當咱們給兩個標準流下的兄弟盒子設置浮動以後，就不會出現margin塌陷的問題。

2. margin:0 auto;

div {

width: 780px;

height: 50px;

/*水平居中盒子*/

margin: 0 auto;

/*水平居中文字*/

text-align: center;

}

當一個div元素設置margin：0 auto;時就會居中盒子，那咱們知道margin:0 auto;表示上下外邊距離爲0，左右爲auto的距離，那麼auto是什麼意思呢？

設置margin-left:auto；咱們發現盒子儘量大的右邊有很大的距離，沒有什麼意義。

當設置margin-right:auto；咱們發現盒子儘量大的左邊有很大的距離。

當兩條語句並存的時候，咱們發現盒子儘量大的左右兩邊有很大的距離。此時咱們就發現盒子居中了。

使用margin：0 auto;注意點：

1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width

2.只有標準流下的盒子才能使用margin:0 auto;

當一個盒子浮動了，固定定位，絕對定位(後面會講)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外你們必定要知道margin屬性是描述兄弟(同級)盒子的關係，而padding描述的是父子盒子的關係。

3. 善於使用父親的padding

咱們要善於使用父親的padding，而不是margin。

咱們不可能在頁面中平白無故的去給盒子加一個border，因此此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。

例（給一個盒子裏的子盒子水平居中）：

html內容：

</div>

css樣式內容：

margin: 0;

padding: 0;

}

.father{

width: 300px;

height: 200px;

background: green;

padding-top:100px;

/*padding裏面的值是width的一半*/

}

.box{

width: 100px;

height: 100px;

margin: 0 auto;

/*下面5行等價於margin: 0 auto;*/

/*margin: auto;*/

/*top: 0;*/

/*left: 0;*/

/*right: 0;*/

/*bottom: 0;*/

/*margin-top:100px;*/

background: red;

}

效果圖爲：

這個盒子的居中在大盒子裏面首先使用了margin: 0 auto;使得小盒子先水平居中大盒子，再用padding-top:100px; top的值爲大盒子的通常，便可居中小盒子。

無論水平。

十一：定位

定位有三種：

1.相對定位

2.絕對定位

3.固定定位

這三種定位，每一種都暗藏玄機，因此咱們要一一單講。

1. 相對定位

相對定位:相對於本身原來的位置定位

現象和使用：

(1)若是對當前元素僅僅設置了相對定位，那麼與標準流的盒子沒什麼區別。

(2)設置相對定位以後，咱們纔可使用四個方向的屬性： top、bottom、left、right

特性：

1.不脫標

2.形影分離

3.老家留坑（佔着茅房不拉屎，噁心人）

因此說相對定位在頁面中沒有什麼太大的做用。影響咱們頁面的佈局。咱們不要使用相對定位來作壓蓋效果

用途：

1.微調元素位置

2.作絕對定位的參考（父相子絕）絕對定位會說到此內容。

參考點：

本身原來的位置作參考點。

html內容爲：

<div class="father">
    <div class="box"></div>
</div>

View Code

css內容爲:

*{
    margin: 0;
    padding: 0;
}
.father{
    width: 300px;
    height: 300px;
    background: green;
    /*position: relative;*/
    /*top:100px;*/
}
.box{
    width: 100px;
    height: 100px;
    background: red;
    position:relative;
    top: 100px;
    left: 100px;
}

View Code

效果圖以下：

2. 絕對定位

特性：

1.脫標

2.作遮蓋效果，提成了層級。設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高。

參考點(重點)：

1、單獨一個絕對定位的盒子

1.當我使用top屬性描述的時候是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置

2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。

2、以父輩盒子做爲參考點

1.父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺。

2.若是父親設置了定位，那麼以父親爲參考點。那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點

3.不只僅是父相子絕，父絕子絕，父固子絕,都是以父輩元素爲參考點

注意了：父絕子絕，沒有實戰意義，作站的時候不會出現父絕子絕。由於絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在咱們頁面佈局中，是經常使用的佈局方案。由於父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。

還要注意，絕對定位的盒子無視父輩的padding

做用：頁面佈局常見的「父相子絕」，必定要會！

絕對定位的盒子居中：

例：（使用父相子絕的方法居中小盒子）

html內容：

<div class="father">
    <div class="box"></div>
</div>

View Code

css內容爲：

*{
    margin: 0;
    padding: 0;
}
.father{
    width: 300px;
    height: 300px;
    background: green;
    position: relative;
    /*top:100px;*/
}
.box{
    width: 100px;
    height: 100px;
    background: red;
    position:absolute;
    /*法一：*/
    /*top: 100px;*/
    /*left: 100px;*/
    /*法二：*/
    top: 100px;
    left: 50%;
    margin-left: -50px;
}

View Code

/*設置絕對定位以後，margin:0 auto;不起任何做用，若是想讓絕對定位的盒子居中。當作公式記下來設置子元素絕對定位，而後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/

3. 固定定位

固定當前的元素不會隨着頁面滾動而滾動：

加這個屬性便可：position:fixed;

特性:

1.脫標

2.遮蓋，提高層級

3.固定不變

參考點：

設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點

若是用bottom描述，那麼是以瀏覽器的左下角爲參考點

做用：

1.返回頂部欄

2.固定導航欄

3.小廣告

十二:z-index

1.z-index講解

這個東西很是簡單，它有四大特性，每一個特性你記住了，頁面佈局就不會出現找不到盒子的狀況。

z-index 值表示誰壓着誰，數值大的壓蓋住數值小的。

只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index(也就是有了position纔會出現z-index)，而浮動元素不能使用z-index。

z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。

(1)標準現象

例1：(在兩個子盒子中設置z-index值，哪邊大，哪邊佔用另一邊)

html內容爲：

<div class="father1">
    <div class="box1"></div>
</div>

<div class="father2">
    <div class="box2"></div>
</div>

View Code

css內容（子盒子z-index比較大小）:

*{
    margin: 0;
    padding: 0;
}
.father1{
    width: 300px;
    height: 300px;
    background: green;
    position:relative;
}
.box1{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top:270px;
    left: 350px;
    z-index: 3;
}
.father2{
    width: 300px;
    height: 300px;
    background: blue;
    position: relative;
}
.box2{
    width: 100px;
    height: 100px;
    background: yellowgreen;
    position: absolute;
    left: 350px;
    z-index:2;
}

View Code

效果圖：

此時只有子盒子比較z-index值，哪邊大，大的那邊佔用小的一邊。

(2)從父現象

父親慫了，兒子再牛逼也沒用。

html內容與(1)中相同

css內容爲：

*{
    margin: 0;
    padding: 0;
}
.father1{
    width: 300px;
    height: 300px;
    background: green;
    position:relative;
    z-index: 9;
}
.box1{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top:270px;
    left: 350px;
    z-index: 3000;
}
.father2{
    width: 300px;
    height: 300px;
    background: blue;
    position: relative;
    z-index:10;
}
.box2{
    width: 100px;
    height: 100px;
    background: yellowgreen;
    position: absolute;
    left: 350px;
    z-index:20;
}