css中這三個(gè)的使用有什么區(qū)別：1 overflow:hidden；2 overflow:auto;zoom:1;3 overflow:auto; height:1%;

一、就 overflow 這個(gè)樣式而言，題主應(yīng)該了解，或者自行百度下：（以下摘自百度百科）

創(chuàng)新互聯(lián)建站專注于樅陽網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供樅陽營銷型網(wǎng)站建設(shè)，樅陽網(wǎng)站制作、樅陽網(wǎng)頁設(shè)計(jì)、樅陽網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù)，打造樅陽網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供樅陽網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

CSS屬性

overflow?屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。

說明

這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理。如果值為?scroll，不論是否需要，用戶代理都會提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會出現(xiàn)滾動(dòng)條。

基本特性

適用于：block-level?and?replaced?elements

JavaScript?語法：object.style.overflow="scroll"

基本語法

overflow-x?overflow-y

overflow?:?visible?|?auto?|?hidden?|?scroll

二、關(guān)于清除浮動(dòng)，其中就有使用 overflow 來達(dá)到閉合元素來修復(fù)高度坍塌的現(xiàn)象。

① overflow:hidden;，

只要使用了這個(gè)樣式的元素都會閉合，觸發(fā) hasLayout；

② overflow:auto;zoom:1;，

在不使用 overflow:hidden 的場景下，需要觸發(fā) hasLayout ，可以用 zoom: （normal以外的值） 這個(gè)樣式；

③ overflow:auto;height:1%;，

在不使用 overflow:hidden 的場景下，需要觸發(fā) hasLayout ，可以用 height: （auto以外的值）這個(gè)樣式，1%是為了在實(shí)現(xiàn)非0。

可以參考以下：

Css—float的影響和解決方案

推薦倆種依靠clear屬于清除浮動(dòng)的方法，推薦第二種，探究的記錄在后面，趕時(shí)間的看個(gè)開頭就好了。

1. 在受浮動(dòng)坍塌的父級元素結(jié)束標(biāo)簽前，添加一個(gè)高寬為0的空div，然后設(shè)置 clear:both

2 .創(chuàng)建一個(gè)clearfix樣式，并使用偽類元素 after 添加樣式到父元素上

無論是塊級元素還是行內(nèi)元素設(shè)置了浮動(dòng)之后都會生成一個(gè)塊級框，并且可以編輯它的寬高，此時(shí)該浮動(dòng)元素就脫離了文檔流。舉個(gè)例子，把網(wǎng)頁看成一個(gè)三維的泳池，文檔流在泳池底部，給文檔流中一個(gè)元素設(shè)置了float之后，它就從這個(gè)網(wǎng)頁的泳池底部浮動(dòng)到了水上。此時(shí)同級的塊級元素會無視float元素在網(wǎng)頁上的位置進(jìn)行布局。但是行內(nèi)元素并不會被遮擋，而是像和它一起浮在水面上一樣環(huán)繞這個(gè)浮動(dòng)元素。

根據(jù)前面介紹，元素設(shè)置float后好像會從網(wǎng)頁上浮一樣，脫離文檔流。這樣的話，如果父級元素原本沒設(shè)置高度，計(jì)劃用子元素?fù)伍_父級元素。此時(shí)子元素因?yàn)閒loat上浮，則父級元素的高度就會因?yàn)樽陨頉]設(shè)置而坍塌。

來個(gè)示例 ( 下文都是依據(jù)這個(gè)示例來討論，故先給出HTML結(jié)構(gòu)和CSS樣式 )：

讓我們再打開開發(fā)者工具具體看看

然后讓我們把父元素也一同浮動(dòng)看看

例如:

此時(shí)背景色為粉色的 ch2 就會被浮動(dòng)的 背景色半透明的ch1 覆蓋，但是ch2的字體還是環(huán)繞著ch1

如果讓ch2 也浮動(dòng)，則ch1 和 ch2 就相當(dāng)于一同浮起到這個(gè)網(wǎng)頁泳池的水面上。

另外，ch2 雖然不浮動(dòng)起來時(shí)會被 同級ch1遮擋，但是ch2 它內(nèi)部的行內(nèi)元素卻是環(huán)繞 ch1 的 ,同時(shí) ch2 內(nèi)部的塊級元素還是會被浮動(dòng)起來的ch1遮擋。

解決父元素高度坍塌的問題，其實(shí)可以給父元素指定個(gè)高度，但這樣就沒有父元素高度自適應(yīng)的意義了；另外全部元素一起浮動(dòng)也能解決父元素坍塌，子元素被遮擋的問題，但這本質(zhì)上只是將所有元素一起浮動(dòng)到頂端，并沒有解決問題，反而還會影響另外的元素排列。下面介紹clear屬性來清除浮動(dòng)

那我們先來看看 clear 屬性有什么用

我們稍稍改動(dòng)一下上面的例子在 ch2 下加一個(gè) p 標(biāo)簽然，然后改動(dòng)一下 ch1 和 ch2 的樣式讓它們倆高度不一樣。

若此時(shí)我們給p元素也加上浮動(dòng)呢？

樣例：

css的樣式問題。

1，是繼承關(guān)系，.Hot樣式繼承.itemHit樣式

2，好處：.Hot繼承.itemHit已經(jīng)擁有的樣式，去除冗余CSS代碼，突出了CSS的繼承思想

3，可以分開寫，但是.Hot無法擁有繼承CSS樣式，只擁有本身CSS樣式

css 樣式重定義的問題

問題1，很顯然是不合理的，增加一個(gè)屬性可以，改變就不行。如果硬要這樣做，可以采取細(xì)一點(diǎn)的方式，例如為a定義一個(gè)樣式： .apage a 和 .bpage a 在A頁面是div class="apage"a ....../a/div 而在B頁面 則是 div class="bpage"a ....../a/div

問題2，盡量將所有的樣式表都放在一個(gè)單獨(dú)的CSS文件里，網(wǎng)站所有的頁面都調(diào)用這一個(gè)文件。要明白，CSS、HTML 都不是運(yùn)行程序，而只是代碼，效率和文件的大小有很直接的關(guān)系，如果10個(gè)頁面10個(gè)CSS，明顯的沒有達(dá)到這樣的目的。

瀏覽器打開一個(gè)頁面時(shí)，同時(shí)也下載了CSS到IE的臨時(shí)文件夾中（除非CSS不是一個(gè)單獨(dú)的文件），再打開其他頁面，如果引用的是同一個(gè)CSS，就不會再進(jìn)行下載。顯而易見，下載10個(gè)文件要比下載1個(gè)文件效率低得多，即使這1個(gè)文件比10文件加起來還大。

回復(fù)樓下的看法：一個(gè)網(wǎng)站的所有頁面不可能有非常多的區(qū)別，況且CSS是在客戶端執(zhí)行，完全不涉及到服務(wù)端，況且瀏覽器是先看樣式名，再根據(jù)樣式名去查找相符合的樣式。不是把所有的樣式都遍歷一次，你所說的打開頁面慢、CUP頻率高貌似不大可能出現(xiàn)。即使有，那也不是因?yàn)闃邮奖砗艽蟮木壒剩词故且驗(yàn)闃邮奖矸浅４?，這樣的影響也小到可以忽略，即使明顯，也只是在客戶端，和客戶機(jī)有較大關(guān)系，對服務(wù)端不會造成任何壓力。

如果你很不喜歡這樣的方式，至少可以把布局大致相同的頁面引用某一個(gè)CSS，完全不相同的引用另一個(gè)CSS。但是一個(gè)頁面一個(gè)CSS，絕對更不可取。

css怎么處理外邊距坍塌呢？

1、給父元素定義上邊框

2、給父元素定義上內(nèi)邊距

3、給父元素添加 overflow：hidden；

4、添加浮動(dòng)

5、添加絕對定位