【HTML&&CSS】CSS解決高度塌陷問(wèn)題&&實(shí)現(xiàn)簡(jiǎn)單的導(dǎo)航效果

2020-3-5    seo達(dá)人

下面這段代碼是實(shí)現(xiàn)簡(jiǎn)單的導(dǎo)航效果：



在這里插入代碼片<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

*{

   margin:0px;

   padding:0px;

   list-style:none;

}

.nav{

width:700px;

margin:100px auto;



}



.nav ul li{

float:left;

margin-right:5px;

}



.nav ul li a{



width:100px;

height:30px;

color:#fff;

display:block;

line-height:30px;

margin-right:5px;

text-decoration:none;

background:red;

text-align:center;



}

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.nav ul li a:hover{

background:yellow;

color:blue;

text-decoration:underline;

}



</style>

</head>

<body>

<div class="nav">

<ul class="clearfix">

<li><a href="#">導(dǎo)航</a></li>

<li><a href="#">導(dǎo)航</a></li>

<li><a href="#">導(dǎo)航</a></li>

<li><a href="#">導(dǎo)航</a></li>

<li><a href="#">導(dǎo)航</a></li>

</ul>

</div>

</body>

</html>





實(shí)現(xiàn)效果如圖：

容易犯錯(cuò)的地方：剛開(kāi)始我把display:block;屬性寫(xiě)在最前面，結(jié)果一直出不來(lái)，后來(lái)發(fā)現(xiàn)display屬性應(yīng)該放在height和width屬性后面



我還學(xué)到一個(gè)知識(shí)點(diǎn)：關(guān)于父元素塌陷問(wèn)題：



在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，也就是說(shuō)父元素多高，子元素就多高



但是為子元素設(shè)置浮動(dòng)以后，子元素就會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷



由于父元素的高速塌陷了，則父元素下所有的元素都會(huì)向上移動(dòng)，這樣會(huì)導(dǎo)致頁(yè)面布局混亂



  所以我們?cè)陂_(kāi)發(fā)中一定要避免出席那高度塌陷的問(wèn)題，這時(shí)候我們可以將父元素的高度寫(xiě)死，這樣可避免塌陷的問(wèn)題出現(xiàn)，但是一當(dāng)高度寫(xiě)死，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度，所以這種方式是不推薦使用的

1

解決的方案：

根據(jù)W3C標(biāo)準(zhǔn)，在頁(yè)面中元素有一個(gè)隱含的屬性叫做Block Formatting Context



方案一：*（設(shè)置zoom為1和overflow為hidden）

當(dāng)開(kāi)啟元素的BFC后，元素會(huì)有以下特性：



父元素的垂直外邊距不會(huì)和子元素重疊

開(kāi)啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋

開(kāi)啟BFC的元素可以包含浮動(dòng)的子元素

那如何開(kāi)啟元素的BFC呢？



設(shè)置元素浮動(dòng)

設(shè)置元素的絕對(duì)定位

設(shè)置元素為inline-block(但是設(shè)置inline-block可以解決問(wèn)題，但是會(huì)導(dǎo)致寬度丟失，所以不推薦使用這種方式)

將元素的overflow設(shè)置為一個(gè)非visible的值（推薦方式：將overflow:hidden這個(gè)是副作用最小的開(kāi)啟BFC方式，所以可以這么說(shuō)，以后若是再塌陷，就給父元素加上overflow:hidden屬性）

但需要注意的是：



在IE6以及以下的瀏覽器中并不支持BFC，所以使用這種方式并不能兼容IE6，在IE6中雖然沒(méi)有BFC，但有另一個(gè)隱藏屬性叫做hasLayout該屬性作用和和BFC類似。但在IE6瀏覽器可以通過(guò)開(kāi)hasLayout來(lái)解決問(wèn)題

開(kāi)啟方式很多，我們可以直接用一種副作用最小的直接將元素的zoom設(shè)置為1，比如父元素是box1,我們可以在父元素中加上zoom:1;



在這里解釋一下zoom表示放大的意思，后邊跟著一個(gè)數(shù)值，寫(xiě)幾就可以將元素放大幾倍，所以zoom:1表示不放大元素，但是可以通過(guò)該樣式可以開(kāi)啟hasLayout.

但需要注意的是zoom屬性放IE6可以，別的瀏覽器比如Chrome就不行



****所以重頭戲來(lái)了：若我們想要兼容所有瀏覽器？


  1. 設(shè)置：zoom:1;
  2. 設(shè)置overflow:hidden;



    兩者缺一不可（zoom這個(gè)樣式，只在IE中支持）

    1

    方案二：（添加一個(gè)空白的div，參考下面的box3）

    我們可以直接在高度塌陷的父元素的最后，添加一個(gè)空白的div,由于這個(gè)div并沒(méi)有浮動(dòng)，所以它是可以撐開(kāi)父元素高度的，然后再對(duì)其清除浮動(dòng)，這樣可以通過(guò)這個(gè)空白的div撐開(kāi)父元素的高度，基本沒(méi)有副作用

    例如：

    *



    <style>

     .box1{border:1px solid red;}

     .box2{

     width:100px;

     hejght:100px;

     background-color:blue;

     }

     .box3{clesr:both;}/    清除兩端浮動(dòng)對(duì)當(dāng)前元素的影響/

     

    body里面是：

    <div class="box1">

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

             <div class="box3"></div>

      </div>

      (這里面box3是我們自己添加用來(lái)解決高度塌陷問(wèn)題的)



    但使用這種方法雖然可以解決問(wèn)題，但會(huì)在頁(yè)面中產(chǎn)生多余的結(jié)構(gòu)，所以此時(shí)方法三就出來(lái)了，這種方法我們最推薦，因?yàn)樗麤](méi)有副作用



    方法三：(通過(guò)after偽類)

    我們先來(lái)看一段代碼：



    <style>

    .clearfix:after{

                       content:" ";/    添加一個(gè)內(nèi)容*/

                       display:block;

                       clear:both;

                       

    }

    </style>

    <body>

    <div class="box1 clearfix">

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

    </div>

    </body>



    我來(lái)總結(jié)一下方法三：

    我們可以通過(guò)after偽類向元素的最后添加一個(gè)空的塊元素，然后對(duì)其清楚浮動(dòng)，這樣做和添加一個(gè)div原理一樣，可以達(dá)到一個(gè)相同的效果，而且不會(huì)在頁(yè)面中添加多余的div,這是我們最推薦使用的方式，幾乎沒(méi)有任何副作用




日歷

鏈接

個(gè)人資料

存檔