亚洲AV无码乱码国产精品,产精品无码一区二区三区免费,97r久久精品国产99国产精,岛国精品一区二区蜜桃,一本一道波多野结衣一区二区

国产精品美女久久久浪潮AV,国产精品三级一二三区,久久精品国产一区二区小说 ,依依成人影视国产精品,全部无卡免费的毛片在线看,日本一区二区三深夜不卡,国产精品女同一区二区久久,国产精品夜色一区二区三区

【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;屬性寫在最前面，結果一直出不來，后來發現display屬性應該放在height和width屬性后面

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

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

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

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

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

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就不行

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

設置：zoom:1;
設置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,這是我們最推薦使用的方式，幾乎沒有任何副作用