整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
css 標準盒子模型
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顏色當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)該選擇標準盒子模型，在網(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)造了新的元素(抽象)。從我們模仿其意義的角度來看，如果需要添加新元素加以標識的，就是偽元素，反之，如果只需要在既有元素上添加類別的，就是偽類。
偽元素在一個選擇器里只能出現(xiàn)一次，并且只能出現(xiàn)在末尾;
偽類則是像真正的類一樣發(fā)揮著類的作用，沒有數(shù)量上的限制，只要不是相互排斥的偽類，也可以同時使用在相同的元素上。
實際使用：
偽類用一個冒號表示 :first-child
偽元素則使用兩個冒號表示 ::first-line
1）、static定位(普通流定位) -------------- 默認定位
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定位的，就默認相對于body進行定位。
絕對定位是脫離文檔流的，與浮動定位是一樣的效果，會壓在非定位元素的上方。可以設(shè)置z-index屬性。
雪碧圖實現(xiàn)原理：
CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網(wǎng)站的HTTP請求數(shù)量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復(fù)雜了，圖片是在CSS中定義，而非<img>標簽。
行內(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) 默認子元素的寬度和父元素一樣，這時需要設(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)部的元素和外部的元素絕對不會互相影響，因此， 當BFC外部存在浮動時，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當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會認為該文件是一個引用文件，不會將其編譯為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)容：指的是樣式的使用不與元素位置唯一匹配，在任何位置你都可以使用這個樣式，如果你不適用這個樣式，會保持默認的樣式。
// dom結(jié)構(gòu)<div class="toogle simple"> <div class="toogle-control open"> <div class="toogle-tittle">標題</div> </div> <div class="toogle-details "></div></div>
// 模塊的標記 唯一標識.toggle{}// 皮膚樣式的寫法，如果基本結(jié)構(gòu)是一樣的，你可以用complex的一個輔助樣式.toggle.simple{}// 是否做嵌套寫法 相信很多預(yù)處理器的部分會支持嵌套 然后很多人會這樣寫,不被推薦的.toogle{ .toogle-control{ } .toogle-details{ }}// 其實你會這樣組織么 不是很建議 這樣會降低查詢效率 如果能確認唯一性的時候 其實直接寫子即可.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">標題</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當然也有一些缺點(你得先學(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,
},
}默認情況下，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默認樣式不盡相同，所以最簡單有效的方式就是對其進行初始化，相信很多朋友都寫過這樣的代碼，在所有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標準的組織W3C動作是很慢的。
通常，有W3C組織成員提出一個新屬性，比如說圓角border-radius，大家都覺得好，但W3C制定標準，要走很復(fù)雜的程序，審查等。而瀏覽器商市場推廣時間緊，如果一個屬性已經(jīng)夠成熟了，就會在瀏覽器中加入支持。
但是為避免日后W3C公布標準時有所變更，會加入一個私有前綴，比如-webkit-border-radius，通過這種方式來提前支持新屬性。等到日后W3C公布了標準，border-radius的標準寫法確立之后，再讓新版的瀏覽器支持border-radius這種寫法。常用的前綴有：
對于私有屬性的順序要注意，把標準寫法放到最后，兼容性寫法放到前面
-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)視頻資料，等你來拿
、判斷是否IE瀏覽器（支持判斷IE11與edge）
function IEVersion() {
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判斷是否IE<11瀏覽器
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判斷是否IE的Edge瀏覽器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if(isIE) {
var reIE = new RegExp("MSIE (\d+\.\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp[""]);
if(fIEVersion == 7) {
return 7;
} else if(fIEVersion == 8) {
return 8;
} else if(fIEVersion == 9) {
return 9;
} else if(fIEVersion == 10) {
return 10;
} else {
return 6;//IE版本<=7
}
} else if(isEdge) {
return 'edge';//edge
} else if(isIE11) {
return 11; //IE11
}else{
return -1;//不是ie瀏覽器
}
}
也可以加下對chrome和firebox的判斷：
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
if (window.ActiveXObject)
Sys.ie = ua.match(/msie ([\d.]+)/)[1]
else if (document.getBoxObjectFor)
Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
else if (window.MessageEvent && !document.getBoxObjectFor)
Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
else if (window.opera)
Sys.opera = ua.match(/opera.([\d.]+)/)[1]
else if (window.openDatabase)
Sys.safari = ua.match(/version\/([\d.]+)/)[1];
//以下進行測試
if(Sys.ie) document.write('IE: '+Sys.ie);
if(Sys.firefox) document.write('Firefox: '+Sys.firefox);
if(Sys.chrome) document.write('Chrome: '+Sys.chrome);
if(Sys.opera) document.write('Opera: '+Sys.opera);
if(Sys.safari) document.write('Safari: '+Sys.safari);
</script>
二、加入首頁和加入收藏、保存到桌面 （未驗證）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//設(shè)為首頁
function SetHome(obj, url) {
try {
obj.style.behavior = 'url(#default#homepage)';
obj.setHomePage(url);
} catch (e) {
if (window.netscape) {
try {
netscape.security.PrivilegeManager
.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("抱歉，此操作被瀏覽器拒絕！\n\n請在瀏覽器地址欄輸入“about:config”并回車然后將[signed.applets.codebase_principal_support]設(shè)置為'true'");
}
} else {
alert("抱歉，您所使用的瀏覽器無法完成此操作。\n\n您需要手動將【" + url + "】設(shè)置為首頁。");
}
}
}
//收藏本站
function AddFavorite(title, url) {
try {
window.external.addFavorite(url, title);
} catch (e) {
try {
window.sidebar.addPanel(title, url, "");
} catch (e) {
alert("抱歉，您所使用的瀏覽器無法完成此操作。\n\n加入收藏失敗，請使用Ctrl+D進行添加");
}
}
}
//保存到桌面
function toDesktop(sUrl, sName) {
try {
var WshShell = new ActiveXObject("WScript.Shell");
var oUrlLink = WshShell.CreateShortcut(WshShell
.SpecialFolders("Desktop")
+ "\" + sName + ".url");
oUrlLink.TargetPath = sUrl;
oUrlLink.Save();
} catch (e) {
alert("當前IE安全級別不允許操作！");
}
}
</script>
</head>
<body>
<a href="javascript：void(0);" οnclick="SetHome(this,'http://www.baidu.com');">設(shè)為首頁</a>
<a href="javascript：void(0);" οnclick="AddFavorite('我的網(wǎng)站',location.href)">收藏本站</a>
<a href="javascript：void(0);" οnclick=" toDesktop(location.href，'我的網(wǎng)站')">保存到桌面</a>
</body>
</html>
面是總結(jié)的css技巧，建議大家收藏，以后用的時候就不用到處查資料了。當然這些也不是所有的，大家如果有什么好的css有趣樣式技巧也可以發(fā)出來哦
最常見的一種形狀了。切圖，不存在的。
/** 正三角 */
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 25px 40px 25px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
}
?
/** 倒三角 */
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 40px 25px 0 25px;
border-color: rgb(245, 129, 127) transparent transparent transparent;
} .dotted-line{
border: 1px dashed transparent;
background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);
}css自帶的border-style屬性 dotted/ dashed . 效果展示出來太密了，并不符合UI設(shè)計
具體的虛線的顏色和間距都可以通過repeating-linear-gradient生成的條紋背景去調(diào)整。
單行文本
.single-ellipsis{
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}多行文本
.multiline-ellipsis {
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; //需要顯示的行數(shù)
overflow: hidden;
text-overflow: ellipsis;
}擴展: -webkit-line-clamp 是一個 不規(guī)范的屬性（unsupported WebKit property），它沒有出現(xiàn)在 CSS 規(guī)范草案中。
為了實現(xiàn)該效果，它需要組合其他外來的WebKit屬性。常見結(jié)合屬性：
html結(jié)構(gòu)
<div class="timeline-content">
<div v-for='(item, index) in timeLine' :key='index' class="time-line">
<div :class="`state-${item.state} state-icon`"></div>
<div class="timeline-title">{{item.title}}</div>
</div>
</div>css樣式
/** 時間軸 */
.timeline-content{
display: flex;
.time-line{
padding: 10px 10px 10px 20px;
position: relative;
&::before{
content: '';
height: 1px;
width: calc(100% - 34px);
background: #EBEBEB;
position: absolute;
left: 24px;
top: 0;
}
}
.state-icon{
width: 20px;
height: 20px;
position: absolute;
top: -12px;
left: 0;
}
.state-1{
background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-6bei-fen_1589266208621.png') no-repeat;
background-size: cover;
}
.state-2{
background: url('https://static.daojia.com/assets/project/tosimple-pic/12_1589266226040.png') no-repeat;
background-size: cover;
}
.state-3{
background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-3_1589266140087.png') no-repeat;
background-size: cover;
}
}calc()函數(shù) 用來計算css屬性的值。
用法：
/** 屬性：calc（expression）*/
寬度：calc（100％ - 34px）;除了減法，還可以用 +（加） ，/(除) ， *（乘）。但要注意的是：
注意： +和-運算符在運算符和值之間需要一個空格。例如，它將被calc(50% -8px)解釋為百分比，后跟負像素長度。只有在-到8px之間有空格時，才可以正確減法：calc(50% - 8px) 空格在乘法或除法中不起作用，但建議閱讀時要注意。
瀏覽器兼容性：
.scroll-container {
height: 250px;
border: 1px solid #ddd;
padding: 15px;
overflow: auto;
.row {
margin: 0;
line-height: 1.5;
}
?
&::-webkit-scrollbar {
width: 8px;
background: white;
}
&::-webkit-scrollbar-corner, /* 滾動條角落 */
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track {
border-radius: 4px;
}
&::-webkit-scrollbar-corner,
&::-webkit-scrollbar-track {
/* 滾動條軌道 */
background-color: rgba(180, 160, 120, 0.1);
box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}
&::-webkit-scrollbar-thumb {
/* 滾動條手柄 */
background-color: #00adb5;
}
} .coupon{
width: 300px;
height: 100px;
position: relative;
background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));
} // 三角形陰影
.shadow-triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 50px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
filter:drop-shadow(10px 0px 10px rgba(238, 125, 55,0.5));
}
?
// 缺圓投影
.circle-square{
width:100px;
height:50px;
line-height: 50px;
background: radial-gradient(circle at bottom right, transparent 20px, rgb(245, 129, 127) 15px);
filter: drop-shadow(2px 2px 2px rgba(238, 132, 66, 0.9));
}
?
// 氣泡陰影
.tip {
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid rgb(245, 129, 127);
border-radius: 4px;
position: relative;
background-color: #fff;
filter: drop-shadow(0px 2px 4px rgba(245, 129, 127, 0.9));
&::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
position: absolute;
top: -10px;
left: 0;
right: 0;
margin: auto;
z-index: 2;
}
&::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent rgb(245, 129, 127) transparent;
position: absolute;
top: -11px;
left: 0;
right: 0;
margin: auto;
z-index: 1;
}
}沒有什么是一個flex搞不定的。
.parent{
display: flex;
}如果一行放不下，可以折行。
.parent{
flex-wrap: wrap;
}上面是一些靜態(tài)的樣式，還有一些更好玩的動態(tài)樣式，希望有機會與大家分享~ 如果你有更多css的有趣技巧，歡迎在評論區(qū)留言哦~
對了，我為大家準備了一套2020最新的web前端資料，需要的自取
1、點贊+評論（勾選“同時轉(zhuǎn)發(fā)”）
2、關(guān)注小編。并私信回復(fù)關(guān)鍵字【資料】（一定要私信哦~手機APP點擊我的頭像就能看到私信按鈕了），部分資料如下
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
