前端基礎之CSS（1）

1.css3的新特性有哪些

（1）CSS3選擇器（基本、屬性、僞類具體見下）
（2）CSS3邊框與圓角

圓角border-radius  
     屬性：border-top-left-radius 左上角 border-top-right-radius
     右上角 border-bottom-right-radius 右下角 border-bottom-left-radius 左下角

（3）CSS3背景與漸變

能夠設置多個背景圖片，圖片大小，位置

線性漸變
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction也能夠換成edge
徑向漸變
background: radial-gradient(center, shape size, start-color, ..., last-color);

（4）CSS3過渡

（5）CSS3變換
2D變換

3D變換
兼容性瞭解一下


（6）CSS3動畫
在style中給動畫一個名字，就是規定動畫，使用@keyframes

這篇文章寫的比較有條理，看完能夠知道大概，可是每一個特性具體如何使用，還須要再找資料深刻的看

2.垂直居中

1. margin：auto的垂直居中，需配合position：absolute一塊兒使用，由於margin：auto不識別上下，只識別左右
2. translate的垂直居中移動-50%，也須要position定位，由於要根據座標

這篇文章總結的很好，沒錯沒錯，就是我寫的啦o(////▽////)q，湊表要臉

3.flex

一方面是在父容器的幾個屬性，另外一些就是子元素的屬性
容器：

flex-direction                 子元素排列方向
    flex-wrap                      若是一條軸線排不下，如何換行
    flex-flow                      flex-direction屬性和flex-wrap屬性的簡寫形式
    justify-content                在主軸上的對齊方式
    align-items                    在交叉軸上如何對齊
    align-content                  多根軸線的對齊方式

設置在具體的每一項上：

order             排列順序。數值越小，排列越靠前，默認爲0
    flex-grow         項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大
    flex-shrink       縮小比例，默認爲1，即若是空間不足，該項目將縮小
    flex-basis        在分配多餘空間以前，項目佔據的主軸空間（main size）
    flex              flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto
    align-self        容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性

菜鳥教程上的就寫很好，簡單易懂
這篇講的很全，包括實際例子，還包括佈局

4.如何理解css預處理，less,sass 到底有什麼好處，或者是優於css的一些特色。

預處理器：在寫css的時候，爲了兼容各類瀏覽器，咱們每每須要寫不少代碼，css預處理器就是爲了解決這一問題的，最經常使用的預處理器有sass、less和styuls

CSS有具體如下幾個缺點：

• 語法不夠強大，好比沒法嵌套書寫，致使模塊化開發中須要書寫不少重複的選擇器；
• 沒有變量和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，致使難以維護。這就致使了咱們在工做中無故增長了許多工做量。而使用CSS預處理器，提供 CSS 缺失的樣式層複用機制、減小冗餘代碼，提升樣式代碼的可維護性。大大提升了咱們的開發效率。

可是，CSS預處理器也不是萬金油，CSS的好處在於簡便、隨時隨地被使用和調試。預編譯CSS步驟的加入，讓咱們開發工做流中多了一個環節，調試也變得更麻煩了。更大的問題在於，預編譯很容易形成後代選擇器的濫用。因此咱們在實際項目中衡量預編譯方案時，仍是得想一想，比起帶來的額外維護開銷，CSS預處理器有沒有解決更大的麻煩。

Sass

• 變量。經過 $ 符號來定義，經過變量名稱實現多處重複引用。
• 嵌套。支持選擇器及屬性嵌套，但若是想要在嵌套的選擇器裏邊應用一個相似於：hover的僞類，就須要用到 & 這個鏈接父選擇器的標識符。
• 代碼重用之繼承。使用選擇器的繼承，要使用關鍵詞@extend，後面緊跟須要繼承的選擇器。
• 代碼重用之Mixin混合器。使用@mixin聲明混合，能夠傳遞參數，參數名以$符號開始，多個參數以逗號分開，也能夠給參數設置默認值。聲明的@mixin經過@include+minxin名稱來調用。若是一個參數能夠有多組值，如box-shadow、transition等，那麼參數則須要在變量後加三個點表示，如$variables...。小栗子，帶參數的：

@mixin left($value: 10px) {
    float: left;
    margin-left: $value;
}
div {
    @include left(66px);
}

• 顏色函數。lighten darken
• @import引入。Sass中的@import會在生成CSS文件時就把引入的全部文件先導入進來，也就是全部相關的樣式會被編譯到同一個CSS文件中，無需發起額外的請求。

less和sass的區別，less簡單，sass強大
less和sass也常常會問到
sass的使用方法

5.css3選擇器

基本選擇器

空格（後代選擇器，能夠是爺孫）/>（子元素選擇器）/+（手拉手，相鄰兄弟選擇器）/~（通用兄弟選擇器）/,（羣組選擇器）

屬性選擇器
僞類選擇器

動態僞類：:hover」,":active"和":focus"

:first-child選擇某個元素的第一個子元素；
:last-child選擇某個元素的最後一個子元素；
:nth-child()選擇某個元素的一個或多個特定的子元素；
:nth-last-child()選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算；
:nth-of-type()選擇指定的元素；
:nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算；
:first-of-type選擇一個上級元素下的第一個同類子元素；
:last-of-type選擇一個上級元素的最後一個同類子元素；
:only-child選擇的元素是它的父元素的惟一一個了元素；
:only-of-type選擇一個元素是它的上級元素的惟一一個相同類型的子元素；
:empty選擇的元素裏面沒有任何內容。


否認：not
僞元素：
：:first-line,:first-letter,:before,:after;

6.DOM

7.盒模型

content-box和border-box：content-box(w3c)的width和height不包含border和padding，padding不是marginborder-box包含(ie)。默認是content-box

box-sizing 來自mdn
邊距重疊

在網頁的頂部加上 doctype 聲明。假如不加 doctype 聲明，那麼各個瀏覽器會根據本身的行爲去理解網頁，即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff 會採用標準 w3c 盒子模型解釋你的盒子，因此網頁在不一樣的瀏覽器中就顯示的不同了。反之，假如加上了 doctype 聲明，那麼全部瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了。

8.行元素和塊元素的區別

行元素：a、span、strong、input 、label
塊元素：div、p、h1到h6，table、td、tr、ul、li

行元素和塊元素有哪些

display：inline-block展現爲塊級元素但又不獨佔一行

行元素的特色：（img和input能夠設置寬高）

設置寬度width   無效。
設置高度height  無效，能夠經過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素範圍是增大了，可是對元素周圍的內容是沒影響的。

爲什麼img，input內聯元素能夠設置寬和高？
img和input屬於行內替換元素
若是上一篇沒看懂，來看這一篇

9.自適應和媒體查詢

1. 頁面中的寬度都用百分比來作
2. 頁面全部的尺寸用rem單位來設置

實現自適應的其餘方法 百分比 rem
@media如何使用
其中2倍那個沒有看懂

10.常見的瀏覽器兼容性問題

常見的瀏覽器及內核：

1. IE瀏覽器內核：Trident內核，也是俗稱的IE內核；
2. Chrome瀏覽器內核：統稱爲Chromium內核或Chrome內核，之前是Webkit內核，如今是Blink內核；
3. Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核；
4. Safari瀏覽器內核：Webkit內核；
5. Opera瀏覽器內核：最初是本身的Presto內核，後來是Webkit，如今是Blink內核；
6. 360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核；
7. 搜狗、遨遊、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）；

瀏覽器css前綴：

1. -o-transform:rotate(7deg); // Opera
2. -ms-transform:rotate(7deg); // IE
3. -moz-transform:rotate(7deg); // Firefox
4. -webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 統一標識語句
css的兼容性：
js的（經常使用）：

1. 標準的addEventListener,而IE使用的是attachEvent
2. 得到DOM節點的方法有所差別，其得到子節點方法不一致。IE：parentElementparentElement.children
   Firefox：parentNode parentNode.childNodes
   childNodes的下標的含義在IE和Firefox中不一樣，Firefox使用DOM規範，childNodes中會插入空白文本節點。通常能夠經過node.getElementsByTagName()來回避這個問題。

點我

這個兼容性問題真的是難受，難道我要一個一個記？一萬年記不住系列
經常使用的手機端的兼容性 這個要記住 雖然我如今還記不住