国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

【HTML&&CSS】CSS解決高度塌陷問題&&實現簡單的導航效果

2020-3-5    seo達人

下面這段代碼是實現簡單的導航效果:



在這里插入代碼片<!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="#">導航</a></li>

<li><a href="#">導航</a></li>

<li><a href="#">導航</a></li>

<li><a href="#">導航</a></li>

<li><a href="#">導航</a></li>

</ul>

</div>

</body>

</html>





實現效果如圖:

容易犯錯的地方:剛開始我把display:block;屬性寫在最前面,結果一直出不來,后來發(fā)現display屬性應該放在height和width屬性后面



我還學到一個知識點:關于父元素塌陷問題:



在文檔流中,父元素的高度默認是被子元素撐開的,也就是說父元素多高,子元素就多高



但是為子元素設置浮動以后,子元素就會完全脫離文檔流,此時將會導致子元素無法撐起父元素的高度,導致父元素的高度塌陷



由于父元素的高速塌陷了,則父元素下所有的元素都會向上移動,這樣會導致頁面布局混亂



  所以我們在開發(fā)中一定要避免出席那高度塌陷的問題,這時候我們可以將父元素的高度寫死,這樣可避免塌陷的問題出現,但是一當高度寫死,父元素的高度將不能自動適應子元素的高度,所以這種方式是不推薦使用的

1

解決的方案:

根據W3C標準,在頁面中元素有一個隱含的屬性叫做Block Formatting Context



方案一:*(設置zoom為1和overflow為hidden)

當開啟元素的BFC后,元素會有以下特性:



父元素的垂直外邊距不會和子元素重疊

開啟BFC的元素不會被浮動元素所覆蓋

開啟BFC的元素可以包含浮動的子元素

那如何開啟元素的BFC呢?



設置元素浮動

設置元素的絕對定位

設置元素為inline-block(但是設置inline-block可以解決問題,但是會導致寬度丟失,所以不推薦使用這種方式)

將元素的overflow設置為一個非visible的值(推薦方式:將overflow:hidden這個是副作用最小的開啟BFC方式,所以可以這么說,以后若是再塌陷,就給父元素加上overflow:hidden屬性)

但需要注意的是:



在IE6以及以下的瀏覽器中并不支持BFC,所以使用這種方式并不能兼容IE6,在IE6中雖然沒有BFC,但有另一個隱藏屬性叫做hasLayout該屬性作用和和BFC類似。但在IE6瀏覽器可以通過開hasLayout來解決問題

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



在這里解釋一下zoom表示放大的意思,后邊跟著一個數值,寫幾就可以將元素放大幾倍,所以zoom:1表示不放大元素,但是可以通過該樣式可以開啟hasLayout.

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



****所以重頭戲來了:若我們想要兼容所有瀏覽器?


  1. 設置:zoom:1;
  2. 設置overflow:hidden;



    兩者缺一不可(zoom這個樣式,只在IE中支持)

    1

    方案二:(添加一個空白的div,參考下面的box3)

    我們可以直接在高度塌陷的父元素的最后,添加一個空白的div,由于這個div并沒有浮動,所以它是可以撐開父元素高度的,然后再對其清除浮動,這樣可以通過這個空白的div撐開父元素的高度,基本沒有副作用

    例如:

    *



    <style>

     .box1{border:1px solid red;}

     .box2{

     width:100px;

     hejght:100px;

     background-color:blue;

     }

     .box3{clesr:both;}/
    清除兩端浮動對當前元素的影響/

     

    body里面是:

    <div class="box1">

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

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

      </div>

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



    但使用這種方法雖然可以解決問題,但會在頁面中產生多余的結構,所以此時方法三就出來了,這種方法我們最推薦,因為他沒有副作用



    方法三:(通過after偽類)

    我們先來看一段代碼:



    <style>

    .clearfix:after{

                       content:" ";/
    添加一個內容*/

                       display:block;

                       clear:both;

                       

    }

    </style>

    <body>

    <div class="box1 clearfix">

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

    </div>

    </body>



    我來總結一下方法三:

    我們可以通過after偽類向元素的最后添加一個空的塊元素,然后對其清楚浮動,這樣做和添加一個div原理一樣,可以達到一個相同的效果,而且不會在頁面中添加多余的div,這是我們最推薦使用的方式,幾乎沒有任何副作用




日歷

鏈接

個人資料

藍藍設計的小編 http://paul-jarrel.com

存檔