css

 

 CSS3有哪些新特性？

1.CSS3邊框：

· border-radius：CSS3圓角邊框。在 CSS2 中添加圓角矩形須要技巧，咱們必須爲每一個圓角使用不一樣的圖片，在 CSS3 中，建立圓角是很是容易的，在 CSS3 中，border-radius 屬性用於建立圓角。border：2px solid;

· box-shadow：CSS3邊框陰影。在 CSS3 中，box-shadow 用於向方框添加陰影。box-shadow:10px 10px 5px #888888;

· border-image：CSS3邊框圖片。經過 CSS3 的 border-image 屬性，您可使用圖片來建立邊框。border-image：url(border.png) 30 30 round;

2.CSS3背景：

· background-size： 屬性規定背景圖片的尺寸。在 CSS3 以前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，能夠規定背景圖片的尺寸，這就容許咱們在不一樣的環境中重複使用背景圖片。您可以以像素或百分比規定尺寸。若是以百分比規定尺寸，那麼尺寸相對於父元素的寬度和高度。

· background-origin ：屬性規定背景圖片的定位區域。背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。

3.CSS3文字效果：

· text-shadow：在 CSS3 中，text-shadow 可向文本應用陰影。text-shadow:5px 5px 5px #FFFFFF;

· word-wrap :單詞太長的話就可能沒法超出某個區域，容許對長單詞進行拆分，並換行到下一行：p{word-wrap:break-word;}

4.CSS3 2D轉換：

transform：經過 CSS3 轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。

· translate()：元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數：transform：translate（50px,100px）;值 translate(50px,100px) 把元素從左側移動 50 像素，從頂端移動 100 像素。

· rotate()：元素順時針旋轉給定的角度。容許負值，元素將逆時針旋轉。transform:rotate(30deg);值 rotate(30deg) 把元素順時針旋轉 30 度。

· scale():元素的尺寸會增長或減小，根據給定的寬度（X 軸）和高度（Y 軸）參數：transform:scale(2,4);值 scale(2,4) 把寬度轉換爲原始尺寸的 2 倍，把高度轉換爲原始高x() 5.CSS3 3D轉換：

· rotateX()：元素圍繞其 X 軸以給定的度數進行旋轉。transform：rotateX(120deg);

· rotateY()：元素圍繞其 Y 軸以給定的度數進行旋轉。transform：rotateY(120deg);

5.CSS3 過渡：當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

6.CSS3 動畫：經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

7.CSS3多列：

· column-count：屬性規定元素應該被分隔的列數。

· column-gap：屬性規定列之間的間隔。

· column-rule ：屬性設置列之間的寬度、樣式和顏色規則。

8.CSS3用戶界面：

· resize：屬性規定是否可由用戶調整元素尺寸。

· box-sizing：屬性容許您以確切的方式定義適應某個區域的具體內容。

· outline-offset ：屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。

9.CSS3盒模型：

在 CSS3 中, 增長了一些新的用戶界面特性來調整元素尺寸，框尺寸和外邊框，主要包括如下用戶界面屬性：

. resize：none | both | horizontal | vertical | inherit

. box-sizing: content-box | border-box | inherit

. outline:outline-color outline-style outline-width outine-offset

resize屬性指定一個元素是否應該由用戶去調整大小。

box-sizing 屬性容許您以確切的方式定義適應某個區域的具體內容。

outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。

10.CSS3伸縮佈局盒模型(彈性盒)

 

css選擇器有哪些？這些選擇器的優先級是怎樣的？

（1）

選擇器類型

一、ID   #id

二、class  .class

三、僞類   :hover

四、屬性  [type="text"]

五、標籤   p

六、僞元素  ::first-line

七、子選擇器、相鄰選擇器

八、通用   *

（2）

權重計算規則

1. 第一等：表明內聯樣式，如: style=」」，權值爲1000。

2. 第二等：表明ID選擇器，如：#content，權值爲0100。

3. 第三等：表明類，僞類和屬性選擇器，如.content，權值爲0010。

4. 第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲0001。

5. 第五等：通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。

6. 第六等：繼承的樣式沒有權值。

 

爲何要初始化CSS樣式

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對 CSS 初始化每每會出現瀏覽器之間的頁面顯示差別

初始化樣式會對 SEO 有必定的影響

 

什麼是css盒子模型？盒子模型有哪些形式？如何設定？它們的區別是什麼？

CSS-標準盒模型&怪異盒模型 https://www.jianshu.com/p/d775045f5573

（1）CSS盒子模型就是在網頁設計中將網頁中的元素當作一個盒子，它具備： margin，border，padding，content 四個屬性，這就是盒子模型。

（2）盒子模型有兩種形式：①標準盒子模型：元素的width、height（寬高）就是元素content的width、height；②IE盒子模型：元素的width、height（寬高）包含了元素的border、padding和content。

（3）經過box-sizing屬性來設定元素的盒子類型

box-sizing經常使用的屬性及使用場景？

https://www.jianshu.com/p/2f2cf326795d

box-sizing有三個屬性值：

　　①content-box： 使得元素的寬高即爲內容區的寬高(默認模式)

　　②border-box：計算方式content + padding + border = 自己元素大小，即縮小了content大小

　　③inherit：繼承父元素的盒模型模式

總結：

　　一、content-box 在元素內外部增長邊距，會影響自身盒子大小，會破壞原有佈局  。

　　二、border-box 在元素內部增長邊距，不會影響自身盒子大小，不會破壞原有佈局。

 

爲何有時須要清除浮動？清除浮動都有哪些方法？

http://www.javashuo.com/article/p-yulevaag-v.html

（1）浮動的元素是脫離文檔標準流的，若是不清楚浮動，那麼會形成父元素高度塌陷，影響頁面佈局。

（2）清除浮動的方式：

1.父級div定義僞元素::after 

.pardent::after{

 display: block;

 clear: both;

 height: 0;

 content: 「」;

 visibility: hidden;

}

.pardent { zoom: 1; }

優勢：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等） 

缺點：代碼多、很多初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持

2.結尾處加空div標籤 clear:both 

原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度 

優勢：簡單、代碼少、瀏覽器支持好、不容易出現怪問題 

缺點：若是頁面浮動佈局多，就要增長不少空div，讓人感受很很差

3. 父級div定義 height 

原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。 

優勢：簡單、代碼少、容易掌握 

缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題 

4. 父級div定義 overflow:hidden 

原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會觸發BFC機制，自動檢查浮動區域的高度 

優勢：簡單、代碼少、瀏覽器支持好 

缺點：不能和position配合使用，由於超出的尺寸的會被隱藏。

 

請簡要描述margin塌陷和margin重合問題？如何解決？

margin塌陷問題與合併問題 https://blog.csdn.net/Sunshineanl/article/details/70767277

CSS中margin邊界疊加問題及解決方案  https://www.aliyun.com/jiaocheng/656457.html

垂直方向margin重疊緣由與解決方法  http://www.javashuo.com/article/p-dxugwlab-ne.html

摺疊外邊距。摺疊的結果按照以下規則計算：

一、兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值。

二、兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值。

三、兩個外邊距一正一負時，摺疊結果是二者的相加的和。

產生摺疊的必備條件：margin必須是鄰接的! (對於不產生摺疊的狀況，見參考文章的連接)

①.同向margin的重疊： 

1圖片的margin-top與3圖片的margin-top發生重疊，2圖片的margin-bottom與3圖片的margin-bottom發生重疊。這時候重疊以後的margin值由發生重疊兩片的最大值決定；若是其中一個出現負值，則由最大的正邊距減去絕對值最大的負邊距，若是沒有最大正邊距，則由0減去絕對值最大的負邊距。

在一個BFC中，塊盒與行盒（行盒由一行中全部的內聯元素所組成）都會垂直的沿着其父元素的邊框排列

（2）

解決同向重疊的方法：

邊l界疊加的大多數問題能夠經過添加透明邊框或1px的補白來修復。

補充解決方案:

1.外層padding 

2.透明邊框border:1pxsolidtransparent;

3.絕對定位postion:absolute:

4.外層DIVoverflow:hidden;

5.內層DIV 加float:left;display:inline;

6.外層DIV有時會用到zoom:1;

②.異向重疊問題：

1圖片的margin-bottom與2圖片的margin-top發生重疊，這時候重疊以後的margin值由發生重疊兩圖片的最大值的決定的。

解決異向重疊問題：

float:left;display:inline;（只能解決IE6瀏覽器中的異向重疊問題，能夠解決IE8以上、chorme、firefox、opera下的同向重疊問題）

 

 

什麼是BFC？怎樣生成一個BFC？BFC的做用？

https://blog.csdn.net/wky_csdn/article/details/73554720

https://www.jianshu.com/p/acf76871d259

（1）

BFC(Block formatting context)直譯爲」塊級格式化上下文」。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

BFC佈局規則：

• 內部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
• 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
• BFC的區域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算

 

BFC就是一種佈局方式，在這種佈局方式下，盒子們自所在的containing block頂部一個接一個垂直排列，水平方向上撐滿整個寬度（除非內部盒子本身創建了新的BFC）。兩個相鄰的BFC之間的距離由margin決定。在同一個BFC內部，兩個垂直方向相鄰的塊級元素的margin會發生「塌陷」。

（2） 生成一個BFC的條件：

　　①float屬性不爲none；

　　②position爲absolute或fixed；

　　③display爲inline-block, table-cell, table-caption, flex, inline-flex；

　　④overflow不爲visible(能夠是hidden、scroll、auto)；

（3）BFC的做用

　　①清楚內部浮動；

　　②防止垂直margin合併；

　　③建立自適應兩欄佈局（防止浮動元素覆蓋別的元素）

 

 

position的值有哪些

static： 默認值。沒有定位，元素出如今正常的流中；

relative：相對定位,沒有脫離標準量，參考點是元素本來的位置；

absolute：絕對定位，脫離標準流，參考點是第一個非static定位的父元素；

fixed：固定定位，脫離標準流，相對於瀏覽器窗口定位；頁面如何滾動，這個盒子顯示的位置不變。

 

display：none與visibility：hidden的區別？

1.display:none視爲不存在，不在文檔流中佔位，瀏覽器也不會解析該元素。

visibility:hidden是在視覺上看不見（徹底透明），但還在文檔流中佔位，瀏覽器會解析該元素；

2.使用visibility:hidden比display:none性能上要好。display:none切換顯示時，頁面產生迴流（當頁面中的一部分元素須要改變規模尺寸、佈局、顯示隱藏等，頁面從新構建，此時就是迴流。全部頁面第一次加載時須要產生一次迴流），而visibility切換是否顯示時則不會引發迴流。

     

 

僞類和僞元素有什麼區別？它們的做用是什麼？

http://www.php.cn/div-tutorial-412365.html

僞類用一個冒號表示 :first-child 
僞元素則使用兩個冒號表示 ::first-line 

僞元素在一個選擇器裏只能出現一次，而且只能出如今末尾。實則，僞元素是選中了某個元素的符合邏輯的某個實際卻不存在的部分，因此應用中也不會有人將其誤寫成多個。僞類則是像真正的類同樣發揮着類的做用，沒有數量上的限制，只要不是相互排斥的僞類，也能夠同時使用在相同的元素上。

 僞元素用於處理結構，僞類用於處理樣式。

僞類的例子有：

:hover

:active

:first-child

:visited

等。

僞元素的例子有：

:first-line

:first-letter

:after

:before

::before 和 :after中雙冒號和單冒號有什麼區別？

• 在 CSS 中僞類一直用 : 表示，如 :hover, :active 等
• 僞元素在CSS1中已存在，當時語法是用 : 表示，如 :before 和 :after
• 後來在CSS3中修訂，僞元素用 :: 表示，如 ::before 和 ::after，以此區分僞元素和僞類

單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素。

 

 

圖像格式jpg、gif、png、svg、bmp、WebP的區別以及應用場景？

https://blog.csdn.net/bangbanggangan/article/details/81094908

https://www.jianshu.com/p/c66f52d875d9

 

 

什麼是SVG？SVG的與其餘圖像格式（如jpeg、gif等）相比的優點？SVG和Canvas有什麼區別？SVG用途？

http://www.ruanyifeng.com/blog/2018/08/svg.html

HTML解析<svg>時，因爲<svg>屬於外部元素，解析機制使得每在<svg>標籤內發現一個標籤都會解析，而最最關鍵的是，<svg>遵循XML和SVG的定義，因此由XML特性，&#40;會被解析成（，因此xss代碼獲得執行。

 

（1）

 

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)，是一種使用XML技術描述二維圖形的語言，是萬維網聯盟的標準。

 

（2）與其餘圖像格式相比（好比 JPEG 和 GIF），使用 SVG 的優點在於：

 

SVG 圖像可經過文本編輯器來建立和修改

 

SVG 圖像可被搜索、索引、腳本化或壓縮

 

SVG 是可伸縮的

 

SVG 圖像可在任何的分辨率下被高質量地打印

 

SVG 可在圖像質量不降低的狀況下被放大

 

（3）SVG 與 Canvas二者間的區別

 

一、SVG 是一種使用XML 描述 2D 圖形的語言，這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。（支持事件處理，容易編輯）

 

二、在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

 

三、SVG是基於矢量的（不依賴分辨率，放大不失幀）

 

四、不適合遊戲應用（SVG要加載到DOM中，因此性能上不如canvas）

 

Canvas

 

1 、Canvas 經過 JavaScript 來繪製 2D 圖形

 

二、在 canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景也須要從新繪製，（不斷重繪的過程）

 

三、不支持事件處理器

 

四、像素圖（依賴分辨率）

 

五、可以以 .png 或 .jpg 格式保存結果圖像

 

（4）SVG的用途

 

SVG在線條藝術，LOGO，圖標，插畫和數據可視化方面用途普遍。但它不適用於寫實圖像和有許多細節的複雜圖片。

 

 

 

CSS Sprites的原理？CSS Sprites的優勢？CSS Sprites的缺點？CSS Sprites的使用？

 

http://www.javashuo.com/article/p-bxrjpprs-bg.html

（1）

 

　　CSS Sprites就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位。

（2）CSS Sprites優勢

　　①減小網頁的http請求，提升性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；
　　②減小圖片的字節：多張圖片合併成1張圖片的字節小於多張圖片的字節總和；

　　③減小了命名困擾：只需對一張集合的圖片命名，不須要對每個小元素進行命名提升製做效率；

　　④更換風格方便：只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變，維護起來更加方便。

 

（3）CSS Sprites缺點

 

　　①在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂；

 

　　②背景設置時，須要獲得每個背景單元的精確位置；

 

　　③維護合成圖片時，最好只是往下加圖片，而不要更改已有圖片。 

（4）CSS Sprite的使用

 

　　①圖片限制(Image Slicing)

 

　　②單圖轉滾(Single-image Rollovers)

 

　　③延長背景(Extend Background Image)

 

 

flex佈局？

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 佈局語法教程 http://www.runoob.com/w3cnote/flex-grammar.html

彈性佈局詳解 http://www.javashuo.com/article/p-owgmqwae-w.html

經常使用的有：

flex-direction: row | row-reverse | column | column-reverse;//方向

flex-wrap: nowrap | wrap | wrap-reverse;//如何換行

justify-content: flex-start | flex-end | center | space-between | space-around;//在主軸上的對其方式

align-items: flex-start | flex-end | center | baseline | stretch;//在交互軸上的對齊方式

 

 

CSS優化、提升性能的方法有哪些

移除空的css規則（Remove empty rules）

正確使用display的屬性

不濫用浮動、web字體

不聲明過多的font-size

不在選擇符中使用ID標識符

遵照盒模型規則

儘可能減小頁面重排、重繪

抽象提取公共樣式，減小代碼量

 

css預處理器