欧美精品在线一区二区三区_亚洲女同精品视频_日韩一区免费_国产欧美久久久精品免费_国产这里只有精品_僵尸再翻生在线观看_久久99精品国产一区二区三区_亚洲免费一区二区_女教师淫辱の教室蜜臀av软件_中文字幕国产一区二区

【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)了：若我們想要兼容所有瀏覽器？

設(shè)置：zoom:1;
設(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)有任何副作用