九九热在线视频观看这里只有精品,国产一卡2卡三卡4卡免费网站,成av免费大片黄在线观看

<li id="g3zqm"></li>

少妇高潮激情一区二区三,免费av深夜在线观看,亚洲狼人久久伊人久久伊,久久精品人人做人人爽电影蜜月,黄色特级片一区二区三区,欧美日韩在线亚洲二区综二,极品少妇无套内射视频,日本极品少妇videossexhd

【HTML&&CSS】CSS解決高度塌陷問題&&實(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ò)的地方：剛開始我把display:block;屬性寫在最前面，結(jié)果一直出不來(lái)，后來(lái)發(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)致頁(yè)面布局混亂

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

1

解決的方案：

根據(jù)W3C標(biāo)準(zhǔn)，在頁(yè)面中元素有一個(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來(lái)解決問題

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

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

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

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

設(shè)置：zoom:1;
設(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是我們自己添加用來(lái)解決高度塌陷問題的)

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

方法三：(通過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é)一下方法三：

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