整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
編程有沒有必要學(xué) HTML 呢？這是編程初學(xué)者中非常普遍的問題，而且在網(wǎng)上意見分歧很大。關(guān)于初學(xué)者在學(xué)習(xí) HTML 前的一些常見問題，編程獅W3Cschool整理了以下資料希望對你有所幫助：
那些說不需要 HTML 知識的人要么不了解 Web 設(shè)計，要么別有用心。雖然現(xiàn)在哪怕不會 HTML 也有其他方法可以解決 web 設(shè)計相關(guān)問題，但絕大多數(shù)資深前端開發(fā)者還是會建議你最好還是要學(xué)習(xí)它的。
通常了解基本知識只需要20到40分鐘。花幾個小時學(xué)習(xí) w3cschool官網(wǎng) 的《HTML 教程 》和《HTML 微課 》，你就可以制作一個簡單而完整的網(wǎng)頁。如果你愿意每周花幾個小時，學(xué)習(xí)幾個月的 《前端開發(fā)體系課程 _ 》，那么您將對網(wǎng)站的工作方式有一個很好的了解。這種時間上的投資將獲得很大的回報比。試想下，如果你本周花在學(xué)習(xí)上一小時，未來的工作上每個月都將永遠節(jié)省一個小時。盡管投資回收期在開始時比較緩慢，但你最終可以只需要花費一小部分時間用來完成工作，你覺得值得嗎？
這是勸退很多人的一個原因，但實際上這個問題是不存在的。因為大多數(shù)情況下我們不需要編寫 HTML 代碼，只需了解它即可。
市面上有很多可視化的工具如 WYSIWYG 、Dreamweaver及現(xiàn)在越來越多的”低代碼“云開發(fā)工具等，它可以幫助你更高效地工作。如前所述，你并不是要手動輸入 HTML 代碼，而是要了解 HTML 的工作原理。
例如：射釘槍能比錘子更快地幫助您建造房屋，但是如果你不知道如何搭建框架以及將釘子釘在何處，造出來的房屋很可能會倒塌。我們需要了解如何手動構(gòu)造 HTML，然后使用所見即所得工具更快地工作。
PS：所見即所得的編輯器永遠不會是完美的，總有時候是需要我們手動來調(diào)整 HTML。。
放心，雖然我們時常把它稱為語言，但其實 HTML 并不是一種編程語言（從技術(shù)上講，HTML 被稱為“mark up”語言，也就是標(biāo)記語言，英文全稱是“HyperText Markup Language”。）。從難度上講，它就像是小孩子們的“密碼”游戲。真正難點在于要學(xué)習(xí)的東西太多了，但是請記住，你不必全部都學(xué)會！只要按照自己的步調(diào)學(xué)習(xí)盡可能多的知識即可。
不要將費時與困難混淆。HTML 很耗時，但是并不難。另外，你不需要學(xué)會全部知識點，即使只花費幾個小時來學(xué)習(xí)基本結(jié)構(gòu)也將極大地幫助你。
不會。其他編程語言一直在發(fā)展中，并且很可能最終會取代 HTML，但是 HTML 將在很長一段時間內(nèi)繼續(xù)作為幾乎所有網(wǎng)站的基礎(chǔ)。在任何情況下，HTML 都會為您提供堅實的基礎(chǔ)，然后再采用 XML 等新語言。
如果您的目的是創(chuàng)建網(wǎng)頁，那么很抱歉告訴你，無論你喜不喜歡，你只能選擇 HTML，因為他是構(gòu)成網(wǎng)絡(luò)構(gòu)成的基礎(chǔ)。如果你真的想以其他格式（例如PDF）來傳送，請注意，它并不是一個網(wǎng)頁，所以它不能實現(xiàn)我們在網(wǎng)頁中的一些常見功能。
以上就是編程獅W3Cschool為你整理的關(guān)于《為什么要學(xué)習(xí)HTML？HTML會過時嗎？》的全部內(nèi)容，現(xiàn)在你要開始學(xué)習(xí) HTML 了嗎？
多朋友想學(xué)一下網(wǎng)頁制作，上網(wǎng)一看，只要涉及到網(wǎng)頁制作，都離不開HTML這個詞語，HTML是HyperText Markup Language的簡稱，想學(xué)習(xí)HTML語言，先得了解一些基本知識，今天這邊內(nèi)容可以作為學(xué)習(xí)HTML的菜鳥教程第一課。
HTML是什么？
一般我們說HTML是指超文本標(biāo)記語言，英文名稱為HyperText Markup Language，簡稱HTML，它是目前互聯(lián)網(wǎng)上應(yīng)用最廣泛的語言。
如何查看HTML？
拿最常見的網(wǎng)頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網(wǎng)頁上點右鍵，選擇“查看源”即可查看當(dāng)前網(wǎng)頁的HTML源碼；如果是其他瀏覽器的話，多數(shù)情況下點擊右鍵，選擇“查看源碼”或者類似“查看網(wǎng)頁源代碼”這樣的選項即可查看。
當(dāng)然也可以通過專業(yè)的網(wǎng)頁制作軟件以及各種文本編輯器來查看。
HTML有什么用？
HTML語言可以方便地將網(wǎng)絡(luò)上存儲于不同位置的文字、圖片、聲音、視頻等內(nèi)容組織起來，方便用戶瀏覽。對于我們來說，HTML是學(xué)習(xí)網(wǎng)頁制作的基本功，熟練掌握HTML這項基本功，可以為以后的學(xué)習(xí)和工作打下良好的基礎(chǔ)。
HTML如何入門？
要學(xué)習(xí)任何編程語言，都不好好高騖遠，HTML的入門很簡單，但是也要遵循學(xué)習(xí)的基本步驟，選擇一本入門書籍，循序漸進地去學(xué)習(xí)每一張的內(nèi)容。一邊學(xué)習(xí)，一邊查看網(wǎng)頁代碼對照來學(xué)，提升入門速度。
HTML案例
下面就是最基本的HTML案例，在這個案例中，用的是HTML5，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個標(biāo)題</h1>
<p>我的第一個段落。</p>
</body>
</html>如何編輯HTML?
這個就很多了 ，比如最出名的Dreamweaver，當(dāng)然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們在wodows系統(tǒng)上常見的記事本，總之只要自己覺得方便就好。
總結(jié)
以上是學(xué)習(xí)HTML菜鳥教程的第一課，首先保持一個良好的心態(tài)來學(xué)習(xí)，有好的心態(tài)，知識方面只要循序漸進，學(xué)會就是水到渠成的事情了 。
css 標(biāo)準(zhǔn)盒子模型
css盒子模型 又稱為框模型（Box Model），包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如下圖：
圖中的內(nèi)層是content依次是padding border margin。通常我們設(shè)置背景時就是內(nèi)容、內(nèi)邊距、邊框這三部分，如果border設(shè)置顏色的時候會顯示boder顏色當(dāng)boder顏色是透明時會顯示background-color的顏色。而該元素的子元素的是從content開始的。而外邊距是透明的，不會遮擋其他元素。
元素框的總寬度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right;
元素框的總高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom;
IE盒子模型
IE盒子模型如下圖：
圖中的內(nèi)層是content依次是content padding border。通常我們設(shè)置背景時就是內(nèi)容、內(nèi)邊距、邊框這三部分。而外邊距是透明的，不會遮擋其他元素。
元素框的總寬度=width（padding-left+padding-right+border-left+border-right)；
元素框的總高度=height（padding-top+padding-bottom+border-top+border-bottom）;
兩個模型寬度和高度的計算（是不一樣的）
w3c中的盒子模型的寬:包括margin+border+padding+width; width:margin*2+border*2+padding*2+width; height:margin*2+border*2+padding*2+height;
iE中的盒子模型的width:包括border+padding+width;
上面的兩個寬度相加的屬性是一樣的。因此我們應(yīng)該選擇標(biāo)準(zhǔn)盒子模型，在網(wǎng)頁的頂部加上 DOCTYPE 聲明。
css選擇器種類有：
通用選擇器：*
id選擇器：#header{}
class選擇器：.header{}
元素選擇器：div{}
子選擇器：ul > li{}
后代選擇器：div p{}
偽類選擇器：:hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等,例如a:hover{}
偽元素選擇器: :after、:before等,例如：li:after
屬性選擇器: input[type="text"]
組合選擇器：E,F/E F（后代選擇器）/E>F（子元素選擇器）/E+F（直接相鄰元素選擇器----匹配之后的相鄰?fù)壴兀?E~F（普通相鄰元素選擇器----匹配之后的同級元素）
層次選擇器：p~ul 選擇前面有p元素的每個ul元素
css選擇器優(yōu)先級：
使用場景：
CSS哪些屬性可以繼承？css繼承特性主要是指文本方面的繼承(比如字體、顏色、字體大小等)，盒模型相關(guān)的屬性基本沒有繼承特性。
不可繼承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可繼承的：
visibility和cursor
終極塊級元素可繼承的：
text-indent和text-align
內(nèi)聯(lián)元素可繼承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
列表元素可繼承的：
list-style、list-style-type、list-style-position、list-style-image
/*定義字符集*/
@charset "utf-8"
/*導(dǎo)入css文件*/
@import "base.css"
/*自定義字體*/
@font-face {}
/*聲明CSS3 animation動畫關(guān)鍵幀*/
@keyframes fadeIn {}
/*媒體查詢*/
@media{}偽類的例子有：
:hover
:active
:first-child
:visited
等。
偽元素的例子有：
:first-line
:first-letter
:after
:before
偽類和偽元素的根本區(qū)別在于：
它們是否創(chuàng)造了新的元素(抽象)。從我們模仿其意義的角度來看，如果需要添加新元素加以標(biāo)識的，就是偽元素，反之，如果只需要在既有元素上添加類別的，就是偽類。
偽元素在一個選擇器里只能出現(xiàn)一次，并且只能出現(xiàn)在末尾;
偽類則是像真正的類一樣發(fā)揮著類的作用，沒有數(shù)量上的限制，只要不是相互排斥的偽類，也可以同時使用在相同的元素上。
實際使用：
偽類用一個冒號表示 :first-child
偽元素則使用兩個冒號表示 ::first-line
1）、static定位(普通流定位) -------------- 默認(rèn)定位
2）、float定位(浮動定位) 例：float:left;
有兩個取值：left(左浮動)和right(右浮動)。浮動元素會在沒有浮動元素的上方，效果上看是遮擋住了沒有浮動的元素，有float樣式規(guī)則的元素是脫離文檔流的，它的父元素的高度并不能有它撐開。
3）、relative定位(相對定位) position:relative;
相對本元素的左上角進行定位，top,left,bottom,right都可以有值。雖然經(jīng)過定位后，位置可能會移動，但是本元素并沒有脫離文檔流，還占有原來的頁面空間。可以設(shè)置z-index。使本元素相對于文檔流中的元素，或者脫離文檔流但是z-index的值比本元素的值要小的元素更加靠近用戶的視線。
相對定位最大的作用是為了實現(xiàn)某個元素相對于本元素的左上角絕對定位，本元素需要設(shè)置position為relative。
4）、absolute定位(絕對定位) position:absolute;
相對于祖代中有relative(相對定位)并且離本元素層級關(guān)系上是最近的元素的左上角進行定位，如果在祖代元素中沒有有relative定位的，就默認(rèn)相對于body進行定位。
絕對定位是脫離文檔流的，與浮動定位是一樣的效果，會壓在非定位元素的上方。可以設(shè)置z-index屬性。
雪碧圖實現(xiàn)原理：
CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網(wǎng)站的HTTP請求數(shù)量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標(biāo)簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標(biāo)簽。
行內(nèi)元素水平居中：
首先看它的父元素是不是塊級元素，如果是，則直接給父元素設(shè)置 text-align: center;
如果不是，則先將其父元素設(shè)置為塊級元素，再給父元素設(shè)置 text-align: center;
塊級元素水平居中(定寬度)：
1）需要誰居中，給其設(shè)置 margin: 0 auto; （作用：使盒子自己居中）
2) 首先設(shè)置父元素為相對定位，再設(shè)置子元素為絕對定位，設(shè)置子元素的left:50%，即讓子元素的左上角水平居中；
設(shè)置絕對子元素的 margin-left: -元素寬度的一半px; 或者設(shè)置transform: translateX(-50%);
塊級元素水平居中(不寬度)：
1) 默認(rèn)子元素的寬度和父元素一樣，這時需要設(shè)置子元素為display: inline-block; 或 display: inline;即將其轉(zhuǎn)換成行內(nèi)塊級/行內(nèi)元素，給父元素設(shè)置 text-align: center;
2) 首先設(shè)置父元素為相對定位，再設(shè)置子元素為絕對定位，設(shè)置子元素的left:50%，即讓子元素的左上角水平居中；
利用css3新增屬性transform: translateX(-50%);
使用flexbox布局實現(xiàn)水平居中（寬度定不定都可以）:
使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;
單行的行內(nèi)元素垂直居中:
只需要設(shè)置單行行內(nèi)元素的"行高等于盒子的高"即可；
多行的行內(nèi)元素垂直居中:
使用給父元素設(shè)置display:table-cell;和vertical-align: middle;屬即可；
塊級元素垂直居中方法一：使用定位
首先設(shè)置父元素為相對定位，再設(shè)置子元素為絕對定位，設(shè)置子元素的top: 50%，即讓子元素的左上角垂直居中；
定高度：設(shè)置絕對子元素的 margin-top: -元素高度的一半px; 或者設(shè)置transform: translateY(-50%);
不定高度：利用css3新增屬性transform: translateY(-50%);
塊級元素垂直居中方法二：使用flexbox布局實現(xiàn)（高度定不定都可以）
使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;
水平垂直居中-已知高度和寬度的元素：
方法一：
設(shè)置父元素為相對定位，給子元素設(shè)置絕對定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
方法二：
設(shè)置父元素為相對定位，給子元素設(shè)置絕對定位，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;
水平垂直居中-未知高度和寬度的元素：
方法一：使用定位屬性
設(shè)置父元素為相對定位，給子元素設(shè)置絕對定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
方案二：使用flex布局實現(xiàn)
設(shè)置父元素為flex定位，justify-content: center; align-items: center;
BFC直譯為塊級格式化上下文，它是一個獨立的渲染區(qū)域，只有Block-level box參與，它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與外部毫不相干。注意：可以把BFC理解為一個大的盒子，其內(nèi)部是由Block-level box組成的
BFC內(nèi)部的元素和外部的元素絕對不會互相影響，因此， 當(dāng)BFC外部存在浮動時，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當(dāng)BFC內(nèi)部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。
根據(jù)w3cplus中可以劃分為以下幾類：
屬性函數(shù)：attr()；
背景圖片函數(shù)：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()
顏色函數(shù)：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；
圖形函數(shù)：circle()、ellipse()、inset()、polygon()、path()
濾鏡函數(shù)：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
轉(zhuǎn)換函數(shù)：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；
數(shù)學(xué)函數(shù)：calc()、min()、max()、mixmax()、repeat()；
緩動函數(shù)：cubic-bezier()、steps()；
其他函數(shù)：counter()、counters()、toggle()、var()、 symbols()。
● 編譯環(huán)境不一樣，Sass的安裝需要Ruby環(huán)境，是在服務(wù)端處理的，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件，直接放到項目中；
● 變量符號不一樣，Less是@，而Scss是$；
● 輸出設(shè)置，Less沒有輸出設(shè)置，Sass提供4種輸出選項：nested, compact, compressed 和 expanded；
● 處理條件語句，Sass支持條件語句，可以使用if{}else{},for{}循環(huán)等等。LESS的條件語句使用有些另類，他不是我們常見的關(guān)鍵詞if和else if之類，而其實現(xiàn)方式是利用關(guān)鍵詞“when”；
● 引用外部文件，文件名如果以下劃線_開頭的話，Sass會認(rèn)為該文件是一個引用文件，不會將其編譯為css文件，ess引用外部文件和css中的@import沒什么差異；
● 工具庫的不同，Sass有工具庫Compass, 簡單說，Sass和Compass的關(guān)系有點像Javascript和jQuery的關(guān)系,Compass在Sass的基礎(chǔ)上，封裝了一系列有用的模塊和模板，補充強化了Sass的功能。Less有UI組件庫Bootstrap,Bootstrap是web前端開發(fā)中一個比較有名的前端UI組件庫，Bootstrap的樣式文件部分源碼就是采用Less語法編寫。
● PostCSS介紹：
PostCSS 的主要功能只有兩個：第一個就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二個就是調(diào)用插件來處理 AST 并得到結(jié)果。因此，不能簡單的把 PostCSS 歸類成 CSS 預(yù)處理或后處理工具。PostCSS 所能執(zhí)行的任務(wù)非常多，同時涵蓋了傳統(tǒng)意義上的預(yù)處理和后處理。
● PostCSS使用
PostCSS 一般不單獨使用，而是與已有的構(gòu)建工具進行集成。PostCSS 與主流的構(gòu)建工具，如 Webpack、Grunt 和 Gulp 都可以進行集成。完成集成之后，選擇滿足功能需求的 PostCSS 插件并進行配置。現(xiàn)在經(jīng)常用到的是基于PostCSS的Autoprefixer插件，使用方式可以在官網(wǎng)的插件庫進行查詢。下面是官網(wǎng)地址：
PostCSS官網(wǎng)地址
css的模塊化方案可能和js的一樣多，下面簡單介紹幾種主要的模塊方案。
面對對象的規(guī)則，主要的原則是兩種：分離結(jié)構(gòu)和外觀，分離容器和內(nèi)容。
分離結(jié)構(gòu)和外觀：增加可重復(fù)的設(shè)計單元，同時去推進產(chǎn)品和ui對這方面的思考，比如下面的css使用時對象模式的命名和模塊化規(guī)則。
分離容器和內(nèi)容：指的是樣式的使用不與元素位置唯一匹配，在任何位置你都可以使用這個樣式，如果你不適用這個樣式，會保持默認(rèn)的樣式。
// dom結(jié)構(gòu)<div class="toogle simple"> <div class="toogle-control open"> <div class="toogle-tittle">標(biāo)題</div> </div> <div class="toogle-details "></div></div>
// 模塊的標(biāo)記 唯一標(biāo)識.toggle{}// 皮膚樣式的寫法，如果基本結(jié)構(gòu)是一樣的，你可以用complex的一個輔助樣式.toggle.simple{}// 是否做嵌套寫法 相信很多預(yù)處理器的部分會支持嵌套 然后很多人會這樣寫,不被推薦的.toogle{ .toogle-control{ } .toogle-details{ }}// 其實你會這樣組織么 不是很建議 這樣會降低查詢效率 如果能確認(rèn)唯一性的時候 其實直接寫子即可.toogle{}.toogle-control{}.toogle-details{}復(fù)制代碼
sma和oocss有很多類似之處，但區(qū)分的地方有很多，主要是對樣式的分類。分別是：基礎(chǔ)、布局、模塊、狀態(tài)、主題
可以適用于任何位置，我也稱全局樣式
主要是用來實現(xiàn)不同的特色布局，提高布局的復(fù)用率，
設(shè)計中的模塊化，可重復(fù)使用的一個單元，一般是dom+css的耦合綁定。
描述在特定狀態(tài)下的布局或者模塊的特殊化表現(xiàn)，這里我覺得要推薦下《css禪意花園》，在dom結(jié)構(gòu)不變的情況下，可以通過css的皮膚化實現(xiàn)樣式的改版。
與狀態(tài)相比更加定制的是，我們會針對有些特殊的模塊，進行主題的設(shè)置，包括一系列的顏色、尺寸、交互等進行重度設(shè)計，參數(shù)化設(shè)計。
// dom結(jié)構(gòu)<div class="toogle toogle-simple"> <div class="toogle-control is-active"> <div class="toogle-tittle">標(biāo)題</div> </div> <div class="toogle-details "></div></div>復(fù)制代碼與oocss相比，其實大部分設(shè)計思路是一樣的，以一個類作為css的作用域（作用域就是兩個限制，1 不符合場景時限制禁止使用 2 符合場景時要正確的使用），另外的區(qū)別就是針對皮膚和狀態(tài)的不同書寫規(guī)則。
bem就是塊、元素、修飾符的思維去寫樣式。它不涉及具體的css結(jié)構(gòu)，只是建議你如何命名css.
// dom結(jié)構(gòu)<div class="toogle toogle--simple"> <div class="toogle_control toogs="toogle_details "></div></div>s="toogle_details "></div></div>style-components
徹底拋棄 CSS，用 JavaScript 寫 CSS 規(guī)則,點擊style-components進入github的主頁。
CSS Modules
使用JS編譯原生的CSS文件，使其具備模塊化的能力，點擊CSS Modules進入github主頁。
這些模塊化方案都是各有優(yōu)缺點，如命名約定：命名復(fù)雜、缺乏擴展、 CSS Modules當(dāng)然也有一些缺點(你得先學(xué)會它再去談優(yōu)劣)。在眾多解決方案中，沒有絕對的優(yōu)劣。還是要結(jié)合自己的場景來決定。
● 使用require.js按需加載CSS
//模塊test.js
define(['css!../css/test.css'], function() { //先加載依賴樣式
var test = {};
return test;
});
//配置
require.config({
map: { //map告訴RequireJS在任何模塊之前，都先載入這個模塊
'*': {
css: 'lib/css'
}
},
paths: {
test: 'lib/test',
}
});
//調(diào)用
require(['test'])webpack配置CSS的按需加載
這里以ant desgin css 為例：
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
["import",{libraryName: "antd", style: 'css'}], //只需加一行，手動劃重點antd按需加載
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
},
},
},
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
}默認(rèn)情況下，CSS 被視為阻塞渲染的資源，這意味著瀏覽器將不會渲染任何已處理的內(nèi)容，直至 CSSOM 構(gòu)建完畢。請務(wù)必精簡您的 CSS，并利用媒體類型和查詢來解除對渲染的阻塞。
我們可以通過 CSS“媒體類型”和“媒體查詢”來解決這類用例：
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">媒體查詢由媒體類型以及零個或多個檢查特定媒體特征狀況的表達式組成。
例如，上面的第一個樣式表聲明未提供任何媒體類型或查詢，因此它適用于所有情況，也就是說，它始終會阻塞渲染。第二個樣式表則不然，它只在打印內(nèi)容時適用---或許您想重新安排布局、更改字體等等，因此在網(wǎng)頁首次加載時，該樣式表不需要阻塞渲染。最后，最后一個樣式表聲明提供由瀏覽器執(zhí)行的“媒體查詢”：符合條件時，瀏覽器將阻塞渲染，直至樣式表下載并處理完畢。
我把一些常用的CSS動畫效果代碼上傳到github了，有需要的同學(xué)可以點擊下載，CSS常用動畫；
另外還有一些CSS動畫庫，比如：animate.css、magic.css、Hover.css、
1. 瀏覽器CSS樣式初始化
由于每個瀏覽器的css默認(rèn)樣式不盡相同，所以最簡單有效的方式就是對其進行初始化，相信很多朋友都寫過這樣的代碼，在所有CSS開始前，先把marin和padding都設(shè)為0，以防不同瀏覽器的顯示效果不一樣。
*{
margin: 0;
padding: 0;
}關(guān)于瀏覽器CSS樣式初始化，經(jīng)驗不豐富的話，可能也不知道該初始化什么，這里給大家推薦一個庫，Normalize.css，github star數(shù)量接近3.4萬，選取展示其中幾個樣式設(shè)置，如下：
html {
line-height: 1.15; /* Correct the line height in all browsers */
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */
}
body {
margin: 0;
}
a {
background-color: transparent; /* Remove the gray background on active links in IE 10. */
}
img {
border-style: none; /* Remove the border on images inside links in IE 10. */
}通過CSS樣式初始化，相信能解決不少常規(guī)的兼容性問題，接下來再看看瀏覽器的私有屬性。
2. 瀏覽器私有屬性
我們經(jīng)常會在某個CSS的屬性前添加一些前綴，比如-webkit-，-moz- ，-ms-，這些就是瀏覽器的私有屬性。
為什么會出現(xiàn)私有屬性呢？這是因為制定HTML和CSS標(biāo)準(zhǔn)的組織W3C動作是很慢的。
通常，有W3C組織成員提出一個新屬性，比如說圓角border-radius，大家都覺得好，但W3C制定標(biāo)準(zhǔn)，要走很復(fù)雜的程序，審查等。而瀏覽器商市場推廣時間緊，如果一個屬性已經(jīng)夠成熟了，就會在瀏覽器中加入支持。
但是為避免日后W3C公布標(biāo)準(zhǔn)時有所變更，會加入一個私有前綴，比如-webkit-border-radius，通過這種方式來提前支持新屬性。等到日后W3C公布了標(biāo)準(zhǔn)，border-radius的標(biāo)準(zhǔn)寫法確立之后，再讓新版的瀏覽器支持border-radius這種寫法。常用的前綴有：
對于私有屬性的順序要注意，把標(biāo)準(zhǔn)寫法放到最后，兼容性寫法放到前面
-webkit-transform:rotate(-3deg); /*為Chrome/Safari*/
-moz-transform:rotate(-3deg); /*為Firefox*/
-ms-transform:rotate(-3deg); /*為IE*/
-o-transform:rotate(-3deg); /*為Opera*/
transform:rotate(-3deg);每個CSS屬性寫這么一堆兼容性代碼，無疑是對生命最大的浪費，后面我們會講一下通過自動化插件來處理這塊。
3. CSS hack
有時我們需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，這種針對不同的瀏覽器/不同版本寫相應(yīng)的CSS code的過程，叫做CSS hack!
CSS hack的寫法大致歸納為3種：條件hack、屬性級hack、選擇符級hack。
以上 .bb 可更換為其它樣式名）
4.自動化插件
Autoprefixer是一款自動管理瀏覽器前綴的插件，它可以解析CSS文件并且添加瀏覽器前綴到CSS內(nèi)容里，使用Can I Use（caniuse網(wǎng)站）的數(shù)據(jù)來決定哪些前綴是需要的。
把Autoprefixer添加到資源構(gòu)建工具（例如Grunt）后，可以完全忘記有關(guān)CSS前綴的東西，只需按照最新的W3C規(guī)范來正常書寫CSS即可。如果項目需要支持舊版瀏覽器，可修改browsers參數(shù)設(shè)置 。
//我們編寫的代碼
div {
transform: rotate(30deg);
}
// 自動補全的代碼，具體補全哪些由要兼容的瀏覽器版本決定，可以自行設(shè)置
div {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
目前webpack、gulp、grunt都有相應(yīng)的插件，如果還沒有使用，那就趕緊應(yīng)用到我們的項目中吧，別再讓CSS兼容性浪費你的時間！
比較常用的布局方式有float,position,display,table,flex,grid等。
實際項目使用中一般是根據(jù)具體場景去選擇相應(yīng)的布局方式。
附兩張CSS知識圖譜(建議收藏)：
最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學(xué)習(xí)資料，只要私信：“前端"等3秒后即可獲取地址，
里面概括應(yīng)用網(wǎng)站開發(fā)，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個知識點高級進階干貨的相關(guān)視頻資料，等你來拿
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
