粗大的内捧猛烈进出小视频,日本成人精品视频一区,在线播放亚洲成人av,精品人妻少妇嫩草av专区,亚洲AV永久久久久久久浪潮,性导航app精品视频,九九热精品免费视频,一本一本大道香蕉久在线播放 

  
      
    

        

	
        
		
        
			
        
				
        【HTML&&CSS】CSS解決高度塌陷問題&&實(shí)現(xiàn)簡單的導(dǎo)航效果
        
				
        
					
         2020-3-5      seo達(dá)人      
        
					
					
        
						
					
        
				
        
				
			
        
			
        
				
        下面這段代碼是實(shí)現(xià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ò)的地方：剛開始我把display:block;屬性寫在最前面，結(jié)果一直出不來，后來發(fā)現(xiàn)display屬性應(yīng)該放在height和width屬性后面

        


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

        


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

        


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

        


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

        


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

        
1

        
解決的方案：

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

        


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

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

        


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

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

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

        
那如何開啟元素的BFC呢？

        


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

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

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

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

        
但需要注意的是：

        


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

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

        


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

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

        


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

        

        

          

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

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

          


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

          
1

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

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

          
例如：

          
*

          


          
<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是我們自己添加用來解決高度塌陷問題的)

          


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

          


          
方法三：(通過after偽類)

          
我們先來看一段代碼：

          


          
<style>

          
.clearfix:after{

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

          
                   display:block;

          
                   clear:both;

          
                   

          
}

          
</style>

          
<body>

          
<div class="box1 clearfix">

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

          
</div>

          
</body>

          


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

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

          


          

          3. 

        				
        
								
			
        
		
        
		
		
	
        


        
    
  
        
    
        日歷
        
    
        
        
        
        
    
        
  
        
    
    
        
      
        鏈接
        
      
          
                
        
    
        
    
        
      
        個(gè)人資料
        
      
    
        
    
        
      
        存檔