> 在本文中，我將介紹他們網(wǎng)格的基礎(chǔ)知識(shí)。首先，我將向您展示它們的結(jié)構(gòu)，描述其關(guān)鍵組件以及它們?nèi)绾胃鶕?jù)屏幕尺寸進(jìn)行區(qū)分。然後，我將介紹一個(gè)真實(shí)的例子，可以幫助您將知識(shí)付諸實(shí)踐。
>讓我們開始！鑰匙要點(diǎn)
Bootstrap和Foundation都是流行的前端框架，具有相似的基本功能，但它們的網(wǎng)格結(jié)構(gòu)和自定義選項(xiàng)有所不同。 Bootstrap為響應(yīng)式佈局指定了四個(gè)基於像素的媒體查詢斷點(diǎn)，而基礎(chǔ)包括五個(gè)基於EM的媒體查詢。這兩個(gè)框架都提供了由行和列組成的移動(dòng)優(yōu)先12列網(wǎng)格。 Bootstrap的網(wǎng)格需要行的包裝元素，該元素應(yīng)具有一類容器或容器 - 流體。另一方面，F(xiàn)oundation的網(wǎng)格更簡(jiǎn)單，不需要包裝元素。
基礎(chǔ)支持一個(gè)稱為Block Grid的附加網(wǎng)格功能，該功能允許創(chuàng)建具有最小標(biāo)記的相等大小的列。 Bootstrap不提供類似的功能。- 比較媒體查詢
- 在分析Bootstrap和Foundation的網(wǎng)格結(jié)構(gòu)之前，讓我們首先看一下兩者都為響應(yīng)佈局提供的斷點(diǎn)。這些用於設(shè)置每個(gè)框架提供的可用網(wǎng)格的數(shù)量。
- > Bootstrap指定了四個(gè)基於像素的媒體查詢斷點(diǎn)。下表顯示了它們：
- 屏幕
視口大小
>容器寬度
>類前綴
額外的小屏幕 基礎(chǔ)包括五個(gè)基於EM的媒體查詢。這些顯示在下表中：類前綴（塊網(wǎng)格）
小屏幕 ≤40EM（640px） .small-* .column（s） 。 中屏 ≥40.063EM（641px） .medium-* .column（s） .Medium-block-Grid-* 大屏幕 ≥64.063EM（1025px） .large-*。 。 Xlarge屏幕 ≥90.063EM（1441px） 未激活 未激活 xxlarge屏幕 ≥120.063EM（1921px） 未激活 未激活注意：默認(rèn)情況下，Xlarge和XXLARGE屏幕的基礎(chǔ)網(wǎng)格被停用。如果您想使用它們，則必須“取消點(diǎn)擊”並將$ include-xl-xl-html-Grid-classes和$ include-xl-xl-html-block-block-glid-classes變量變量設(shè)置為true。您可以在_settings.scs部分中找到這些變量。 網(wǎng)格結(jié)構(gòu)
引導(dǎo)程序和基礎(chǔ)每個(gè)都提供由行和列組成的移動(dòng)優(yōu)先12列網(wǎng)格。列嵌套在一排。每行它們最大比例為12。行也可以嵌套在列中。
>兩個(gè)框架都帶有許多預(yù)定義的類，可以用來設(shè)置列的大小。如上所述，Bootstrap包括四個(gè)媒體查詢斷點(diǎn)，而基金會(huì)有五個(gè)。對(duì)於每個(gè)網(wǎng)格，都有一個(gè)不同的類前綴，可用於設(shè)置列的大?。ㄕ?qǐng)參閱兩個(gè)表）。
Bootstrap的網(wǎng)格還需要行的包裝元素。這應(yīng)該具有一類容器或容器 - 流體。具有容器類別的元素具有固定寬度，該元素取決於視口（請(qǐng)參見上面的第一個(gè)表），而具有一類容器 - 富流體的元素會(huì)展開以填充瀏覽器窗口的整個(gè)寬度。
>可能不完全12列的列數(shù)。在這種情況下，Bootstrap將浮動(dòng)的最後一列向左漂浮，而Foundation則將其漂浮在右側(cè)。如果您想覆蓋基礎(chǔ)的默認(rèn)行為，請(qǐng)將最終類添加到最後一列。
要查看這種行動(dòng)差異，您可以查看一個(gè)引導(dǎo)程序示例和一個(gè)基礎(chǔ)示例。
>實(shí)用程序類
>兩個(gè)框架都提供額外的課程，可為您提供極大的靈活性來自定義網(wǎng)格。
>可見性課程讓您根據(jù)特定的屏幕尺寸顯示或隱藏內(nèi)容。偏移類使您可以將不完整的列中心或調(diào)整它們之間的間距量。也有一些類指定各個(gè)設(shè)備上的列的順序。> 所有這些不同類別的示例可以在此Bootstrap演示和該基礎(chǔ)演示中顯示
塊網(wǎng)格>超出默認(rèn)網(wǎng)格，基礎(chǔ)支持另一個(gè)網(wǎng)格功能，稱為塊網(wǎng)格。這使您可以創(chuàng)建具有最小標(biāo)記的等級(jí)列。為了使用它，將行定義為UL元素，將其定義為L(zhǎng)I元素。然後通過將相關(guān)類（請(qǐng)參閱上面的第二個(gè)表）應(yīng)用於UL元素來指定列大小。
> 在這一點(diǎn)上，您可能會(huì)想，常規(guī)網(wǎng)格和塊網(wǎng)格之間有什麼區(qū)別？讓我們簡(jiǎn)要看一下其中的兩個(gè)：
- >與默認(rèn)網(wǎng)格（將最大寬度應(yīng)用於每一行）不同，塊網(wǎng)格總是填充完整的窗口寬度。
- 塊網(wǎng)格只能用於等尺寸的項(xiàng)目。 >
更好地演示網(wǎng)格如何區(qū)分，這是一個(gè)演示。
使用網(wǎng)格>現(xiàn)在我們對(duì)這兩個(gè)框架的網(wǎng)格有了很好的了解，讓我們看看如何使用它們來構(gòu)建Bootstrap頁(yè)面和相應(yīng)的基礎(chǔ)頁(yè)面。
下面的屏幕截圖顯示了我們將構(gòu)建的第一個(gè)佈局：
>
>從Bootstrap開始，我們用一類容器定義了一個(gè)元素。如前所述，此類將固定的寬度設(shè)置為元素，取決於屏幕大小（請(qǐng)參閱Bootstrap表）。然後，我們?cè)谄渲刑砑恿艘粋€(gè)帶有一類行的元素。
現(xiàn)在，我們準(zhǔn)備好設(shè)置我們的列。對(duì)於大屏幕，我們需要四個(gè)等尺寸的列。因此，我們定義了四個(gè)div元素，每個(gè)元素都用一類Col-LG-3定義。但是，對(duì)於中小型設(shè)備，我們希望每行有兩個(gè)列。因此，我們使用Col-SM-6類。最後，對(duì)於超小型設(shè)備，我們希望將列堆疊。這是移動(dòng)優(yōu)先框架的默認(rèn)行為，因此，無需定義col-xs-12類。
>以下是HTML的外觀：
讓我們繼續(xù)以基礎(chǔ)為基礎(chǔ)。
<span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><div</span> class<span>="row"</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
基礎(chǔ)的網(wǎng)格與Bootstrap非常相似，但要簡(jiǎn)單一些。首先，我們必須定義一個(gè)包含我們列的行的元素。此類將元素的最大寬度設(shè)置為62.5REMS（1000px）。接下來，我們添加列。為了實(shí)現(xiàn)這一目標(biāo)，我們指定各個(gè)列或列的div元素，並使用相應(yīng)的網(wǎng)格類設(shè)置其寬度（請(qǐng)參見上面的基礎(chǔ)表）。同樣，對(duì)於小型設(shè)備，我們不必定義小型12級(jí)。
這是基於基礎(chǔ)網(wǎng)格的html：
在這一點(diǎn)上，我希望您已經(jīng)開始對(duì)兩個(gè)框架的網(wǎng)格系統(tǒng)變得更加熟悉。但是也許另一個(gè)例子將有助於使它更清楚。
> 在下一個(gè)情況下，我們將構(gòu)建頁(yè)腳。以下圖形表示顯示了我們要如何樣式的形式：<span><span><span><div</span> class<span>="row"</span>></span> </span> <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
在這裡，我們將選擇與上一個(gè)示例相比的不同佈局模式。
>
>對(duì)於中屏尺寸和向上（或小且為Bootstrap的網(wǎng)格），我們要顯示三列。但是，請(qǐng)注意，最後一列中有一個(gè)嵌套行。這由兩列組成。我們將其寬度設(shè)置為所有設(shè)備的連續(xù)寬度的50％。最後，我們將調(diào)整嵌套列中出現(xiàn)的圖標(biāo)的可見性。
這是Bootstrap的代碼：
和基礎(chǔ)：
<span><span><span><div</span> class<span>="container"</span>></span> </span> <span><span><span><div</span> class<span>="row"</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span> </span> <span><!-- content --> </span> <span><span><span></div</span>></span> </span> <span><span><span></div</span>></span> </span><span><span><span></div</span>></span></span>
>注意：我們可以使用Foundation的默認(rèn)網(wǎng)格來創(chuàng)建嵌套行。 結(jié)論
如果您想要有關(guān)Bootstrap的網(wǎng)格系統(tǒng)的更多信息，您可能還需要閱讀Syed Fazle Rahman的文章，了解Bootstrap的網(wǎng)格系統(tǒng)。
>得出結(jié)論，在本文中，我介紹了引導(dǎo)和基礎(chǔ)的網(wǎng)格結(jié)構(gòu)。然後，我們研究瞭如何在一個(gè)真正的項(xiàng)目中利用他們的網(wǎng)格。如您所見，兩個(gè)網(wǎng)格看起來都相似，並且可以進(jìn)一步定制。
>>希望您喜歡閱讀本文，也許您可??以將您在這裡學(xué)到的知識(shí)應(yīng)用於自己的項(xiàng)目。與往常一樣，請(qǐng)隨時(shí)在下面的評(píng)論中分享您對(duì)這些框架的想法。
> Bootstrap vs Foundation的常見問題（常見問題解答）
>
> bootstrap和Foundation均設(shè)計(jì)旨在創(chuàng)建適合不同屏幕尺寸的響應(yīng)網(wǎng)站。但是，F(xiàn)oundation採(cǎi)用移動(dòng)優(yōu)先的方法，這意味著它是考慮到移動(dòng)設(shè)備的設(shè)計(jì)，然後擴(kuò)展到更大的屏幕。另一方面，Bootstrap最初是為桌面優(yōu)先設(shè)計(jì)的，但此後從Bootstrap 3開始採(cǎi)用了移動(dòng)優(yōu)先方法。這兩個(gè)框架都提供了響應(yīng)式設(shè)計(jì)，但是兩者之間的選擇通常取決於個(gè)人的喜好和項(xiàng)目要求。> bootstrap中的電網(wǎng)系統(tǒng)與基礎(chǔ)相比如何？
> bootstrap和基礎(chǔ)基礎(chǔ)使用網(wǎng)格系統(tǒng)結(jié)構(gòu)和對(duì)齊內(nèi)容，但它們以略有不同的方式進(jìn)行。 Bootstrap使用12列網(wǎng)格系統(tǒng)，易於理解和使用。另一方面，基金會(huì)使用一個(gè)靈活的網(wǎng)格系統(tǒng)，可以自定義以使用多達(dá)12列的列。這使Foundation的網(wǎng)格系統(tǒng)更加靈活，但也更複雜。>> bootstrap和Foundation如何處理JavaScript組件？ Bootstrap和Foundation都配備了一組JavaScript組件，可為您的網(wǎng)站添加功能。 Bootstrap的JavaScript組件基於jQuery，而Foundation提供了兩個(gè)版本：一種使用jQuery的版本，一種使用Zepto.js，是JQuery的較輕替代品。這兩個(gè)框架的JavaScript組件都是模塊化的，這意味著您只能包括所需的javaScript組件。
> bootstrap和Foundation的性能如何比較？
>您使用它們?？梢詫?duì)兩個(gè)框架進(jìn)行自定義，以僅包括您需要的組件，從而有助於提高性能。但是，由於基金會(huì)更加靈活和可定制，因此如果正確使用，它可能會(huì)導(dǎo)致更輕，更快的網(wǎng)站。擁有更大的社區(qū)和更多可用資源，包括廣泛的主題，模板和第三方插件?；饡?huì)雖然擁有一個(gè)較小的社區(qū)，但得到了一家提供專業(yè)支持和資源的設(shè)計(jì)公司的支持。
>>從bootstrap遷移到基礎(chǔ)，反之亦然？從一個(gè)框架遷移到另一個(gè)框架可能是一項(xiàng)複雜的任務(wù)，因?yàn)樗婕爸貙慔TML，CSS和潛在的JavaScript。但是，Bootstrap和Foundation都有類似的概念和組件，因此，如果您熟悉一個(gè)，那麼學(xué)習(xí)另一個(gè)應(yīng)該相對(duì)簡(jiǎn)單。
>>如何與Bootstrap和Foundation的可訪問性功能進(jìn)行比較？ ??> Bootstrap和Foundation都努力訪問，但它們以不同的方式對(duì)其進(jìn)行處理。 Bootstrap在其組件中包含許多可訪問性功能，並提供詳細(xì)的可訪問性文檔。另一方面，基金會(huì)在框架中內(nèi)置了一組可訪問性工具，還提供了全面的可訪問性文檔。我應(yīng)該選擇哪個(gè)框架：bootstrap或Foundation？
> bootstrap和基礎(chǔ)之間的選擇在很大程度上取決於您的需求和偏好。如果您想要一個(gè)具有廣泛功能，預(yù)製組件和大型社區(qū)的框架，則引導(dǎo)程序可能是更好的選擇。如果您更喜歡一個(gè)更靈活，可自定義且採(cǎi)用移動(dòng)優(yōu)先方法的框架，則基礎(chǔ)可能更合適。
> bootstrap和Foundation如何處理JavaScript組件？ Bootstrap和Foundation都配備了一組JavaScript組件，可為您的網(wǎng)站添加功能。 Bootstrap的JavaScript組件基於jQuery，而Foundation提供了兩個(gè)版本：一種使用jQuery的版本，一種使用Zepto.js，是JQuery的較輕替代品。這兩個(gè)框架的JavaScript組件都是模塊化的，這意味著您只能包括所需的javaScript組件。
> bootstrap和Foundation的性能如何比較？
>您使用它們?？梢詫?duì)兩個(gè)框架進(jìn)行自定義，以僅包括您需要的組件，從而有助於提高性能。但是，由於基金會(huì)更加靈活和可定制，因此如果正確使用，它可能會(huì)導(dǎo)致更輕，更快的網(wǎng)站。擁有更大的社區(qū)和更多可用資源，包括廣泛的主題，模板和第三方插件?；饡?huì)雖然擁有一個(gè)較小的社區(qū)，但得到了一家提供專業(yè)支持和資源的設(shè)計(jì)公司的支持。
>>從bootstrap遷移到基礎(chǔ)，反之亦然？從一個(gè)框架遷移到另一個(gè)框架可能是一項(xiàng)複雜的任務(wù)，因?yàn)樗婕爸貙慔TML，CSS和潛在的JavaScript。但是，Bootstrap和Foundation都有類似的概念和組件，因此，如果您熟悉一個(gè)，那麼學(xué)習(xí)另一個(gè)應(yīng)該相對(duì)簡(jiǎn)單。
>>如何與Bootstrap和Foundation的可訪問性功能進(jìn)行比較？ ??> Bootstrap和Foundation都努力訪問，但它們以不同的方式對(duì)其進(jìn)行處理。 Bootstrap在其組件中包含許多可訪問性功能，並提供詳細(xì)的可訪問性文檔。另一方面，基金會(huì)在框架中內(nèi)置了一組可訪問性工具，還提供了全面的可訪問性文檔。我應(yīng)該選擇哪個(gè)框架：bootstrap或Foundation？
> bootstrap和基礎(chǔ)之間的選擇在很大程度上取決於您的需求和偏好。如果您想要一個(gè)具有廣泛功能，預(yù)製組件和大型社區(qū)的框架，則引導(dǎo)程序可能是更好的選擇。如果您更喜歡一個(gè)更靈活，可自定義且採(cǎi)用移動(dòng)優(yōu)先方法的框架，則基礎(chǔ)可能更合適。
以上是網(wǎng)格系統(tǒng)比較：Bootstrap 3與基礎(chǔ)5的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁(yè)開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
CSS教程，用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫
Jul 07, 2025 am 12:07 AM
創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種：1.使用邊框的基本旋轉(zhuǎn)器，通過HTML和CSS實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫；2.使用多個(gè)點(diǎn)的自定義旋轉(zhuǎn)器，通過不同延遲時(shí)間實(shí)現(xiàn)跳動(dòng)效果；3.在按鈕中添加旋轉(zhuǎn)器，通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強(qiáng)調(diào)了設(shè)計(jì)細(xì)節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性，以提升用戶體驗(yàn)。
解決CSS瀏覽器兼容性問題和前綴
Jul 07, 2025 am 01:44 AM
處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問題如Flexbox、Grid支持不一，position:sticky失效，動(dòng)畫表現(xiàn)不同；2.查閱CanIuse確認(rèn)特性支持情況；3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴；4.推薦使用Autoprefixer自動(dòng)添加前綴；5.安裝PostCSS並配置browserslist指定目標(biāo)瀏覽器；6.構(gòu)建時(shí)自動(dòng)處理兼容性；7.老項(xiàng)目可用Modernizr檢測(cè)特性；8.不必追求所有瀏覽器一致，確
顯示：內(nèi)聯(lián)，顯示：塊和顯示：內(nèi)聯(lián)塊之間有什麼區(qū)別？
Jul 11, 2025 am 03:25 AM
Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo????ntalpadding/margins—idealforinlinetextstyling
使用CSS剪輯路徑創(chuàng)建自定義形狀
Jul 09, 2025 am 01:29 AM
使用CSS的clip-path屬性可以裁剪元素為自定義形狀，如三角形、圓形缺口、多邊形等，無需依賴圖片或SVG。其優(yōu)勢(shì)包括：1.支持circle、ellipse、polygon等多種基本形狀；2.可響應(yīng)式調(diào)整，適配移動(dòng)端；3.易於動(dòng)畫化，可結(jié)合hover或JavaScript實(shí)現(xiàn)動(dòng)態(tài)效果；4.不影響佈局流，僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意
造型與CSS不同訪問的鏈接
Jul 11, 2025 am 03:26 AM
設(shè)置訪問過鏈接的樣式能提升用戶體驗(yàn)，尤其在內(nèi)容密集型網(wǎng)站中幫助用戶更好導(dǎo)航。 1.使用CSS的:visited偽類可定義已訪問鏈接樣式，如顏色變化；2.注意瀏覽器出於隱私限制僅允許修改部分屬性；3.顏色選擇應(yīng)與整體風(fēng)格協(xié)調(diào)，避免突兀；4.移動(dòng)端可能不顯示該效果，建議結(jié)合其他視覺提示如icon輔助標(biāo)識(shí)。
如何使用CSS創(chuàng)建響應(yīng)式圖像？
Jul 15, 2025 am 01:10 AM
要使用CSS創(chuàng)建響應(yīng)式圖片，主要可通過以下方法實(shí)現(xiàn)：1.使用max-width:100%和height:auto讓圖片在保持比例的同時(shí)自適應(yīng)容器寬度；2.結(jié)合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源；3.利用object-fit和object-position控製圖片裁剪與焦點(diǎn)展示。這些方法共同確保圖片在不同設(shè)備上清晰、美觀地呈現(xiàn)。
揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較
Jul 08, 2025 am 02:16 AM
CSS單位的選擇取決於設(shè)計(jì)需求和響應(yīng)式要求。 1.px用於固定尺寸，適合精確控制但缺乏彈性；2.em是相對(duì)單位，受父元素影響易導(dǎo)致級(jí)聯(lián)問題，rem則基於根元素更穩(wěn)定，適合全局縮放；3.vw/vh基於視口大小，適合響應(yīng)式設(shè)計(jì)，但需注意極端屏幕下的表現(xiàn)；4.選擇時(shí)應(yīng)根據(jù)是否需要響應(yīng)式調(diào)整、元素層級(jí)關(guān)係及視口依賴程度來決定，合理搭配使用可提升佈局靈活性與維護(hù)性。
什麼是常見的CSS瀏覽器不一致？
Jul 26, 2025 am 07:04 AM
不同瀏覽器對(duì)CSS解析存在差異，導(dǎo)致顯示效果不一致，主要包括默認(rèn)樣式差異、盒模型計(jì)算方式、Flexbox和Grid佈局支持程度及某些CSS屬性行為不一致。 1.默認(rèn)樣式處理不一致，解決方法是使用CSSReset或Normalize.css統(tǒng)一初始樣式；2.舊版IE的盒模型計(jì)算方式不同，建議統(tǒng)一使用box-sizing:border-box；3.Flexbox和Grid在邊緣情況或舊版本中表現(xiàn)有差異，應(yīng)多測(cè)試並使用Autoprefixer；4.某些CSS屬性行為不一致，需查閱CanIuse並提供降級(jí)
