CSS篇
1、盒子模型：css
標準模式和混雜模式（IE）。在標準模式下瀏覽器按照規範呈現頁面；在混雜模式下，頁面以一種比較寬鬆的向後兼容的方式顯示。混雜模式一般模擬老式瀏覽器的行爲以防止老站點沒法工做。
CSS盒子模型具備內容(content)、填充(padding)、邊框(border)、邊界(margin)這些屬性。咱們所說的width,height指的是內容(content)的寬高，一個盒子模型的寬度=:width+ pdding(寬) + border(寬)，高度=height + padding(高) + border(高)。html
2、絕對定位和相對定位：css3
一、relative(相對定位) 對象不可層疊、不脫離文檔流，參考自身靜態位置經過 top,bottom,left,right 定位，而且能夠經過z-index進行層次分級。
二、absolute(絕對定位) 脫離文檔流，經過 top,bottom,left,right 定位。選取其最近一個最有定位設置的父級對象進行絕對定位，若是對象的父級沒有設置定位屬性，absolute元素將以body座標原點進行定位，能夠經過z-index進行層次分級。 web
3、 清除浮動，何時須要清除浮動，清除浮動都有哪些方法 ？ chrome
1.何時須要清除浮動？
咱們對元素進行了浮動(float)時，咱們的元素就會脫離文檔流，像一隻小船同樣漂流在文檔之上。canvas
在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。
float主要流行與頁面佈局，而後沒有使用後沒有清除浮動，就會後患無窮。
父盒子的margin受到影響，沒法實現左右居中，
我沒有給父盒子設置高度，浮動後父盒子的高度沒法被撐開。
2.清除浮動都有哪些方法 ?
清除(clear)也有4個可能值。最經常使用的是 both，清楚左右兩邊的浮動。left 和 right 只能清楚一個方向的浮動。none 是默認值。
方法一：添加新的元素 應用 clear：both；
【補充】：
使用空標籤清除浮動.
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<br style="clear:both">
</ul>
方法二：父級div定義 overflow: auto（注意：是父級div也就是這裏的 div.outer）
<div class="outer over-flow"> //這裏添加了一個class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<!--<div class="clear"></div>-->
</div>
.over-flow{
overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
}
原理：使用overflow屬性來清除浮動有一點須要注意，overflow屬性共有三個屬性值：hidden,auto,visible。咱們可使用hiddent和auto值來清除浮動，但切記不能使用visible值，若是使用這個值將沒法達到清除浮動效果，其餘兩個值均可以。
【補充】:
使用overflow屬性
此方法有效地解決了經過空標籤元素清除浮動而不得不增長無心代碼的弊端。使用該方法是隻需在須要清除浮動的元素中定義CSS屬性：overflow:auto，便可。 overflow:auto;是讓高度自適應，zoom:1;是爲了兼容IE6，也能夠用height:1%;的方式來解決，注意，zoom不符合W3C標準。overflow:hidden也能夠實現。overflow:hidden也能夠實現。
<ul style="overflow:auto;zoom:1">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
方法三： 聽說是最高大上的方法 :after 方法：（注意：做用於浮動元素的父親）
先說原理：它就是利用:after和:before來在元素內部插入兩個元素塊，從而達到清除浮動的效果。其實現原理相似於clear:both方法，只是區別在於:clear在html插入一個div.clear標籤，而outer利用其僞類clear:after在元素內部增長一個相似於div.clear的效果。下面來看看其具體的使用方法：
.outer {zoom:1;} /*==for IE6/7 Maxthon2==*/
.outer:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} /*==for FF/chrome/opera/IE8==*/
其中clear:both;指清除全部浮動；content: ‘.’; display:block;對於FF/chrome/opera/IE8不能缺乏，
其中content（）能夠取值也能夠爲空。visibility:hidden;的做用是容許瀏覽器渲染它，可是不顯示出來，這樣才能實現清楚浮動。
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} 瀏覽器
.clearfix:after {content:'';display:block;clear:both;visibility:hidden;zoom:1;}css3動畫
<div class="outer clearfix">
【補充】：svg
使用after僞對象清除浮動佈局
after僞對象非IE瀏覽器支持，因此並不影響到IE/WIN瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。
a、該方法中必須爲須要清除浮動元素的僞對象中設置height:0，不然該元素會比實際高出若干像素；
b、content屬性是必須的，但其值能夠爲空，藍色理想討論該方法的時候content屬性的值設爲」.」
再次again：當一個內層元素是浮動的時候，若是沒有關閉浮動時，其父元素也就不會再包含這個浮動的內層元素，由於此時浮動元素已經脫離了文檔流。也就是爲何外層不能被撐開了！
浮動的特色:
1.浮動的元素，講向左或者向右浮動，浮動到包圍元素的邊上，或者上一個浮動元素的邊上爲止。
2.浮動的元素，再也不佔用空間，且浮動元素的層級要高於普通元素。
3.浮動的元素，必定是塊元素，無論以前是什麼元素。
4.若是浮動的元素沒有指定寬度的話，浮動後會儘量變窄，所以浮動元素要指定寬和高。
5.一行的多個元素，要浮動你們一塊兒浮動。
4、如何保持浮層水平垂直居中
一、經過使用百分比絕對定位,與外補丁負值的方法，負值的大小爲其自身寬度高度的一半」達到讓層垂直居中的效果。
div.innerbox {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red
}
這樣寫必須固定浮動層的大小，才能用margin負值一半達到居中的效果，若是在讓innerBox相對於一個父級層實現水平垂直居中，只需設置父級層的position:relative定位便可。
若是浮動層的寬，高不固定，會動態的添加一些內容上去，這時候innerBox的margin與width、height之間的制約關係，使得動態變化innerBox的內容引發的高度變化沒辦法反應到margin上，除非使用JS動態控制，拋開JS不說，若是要實現innerBox的內容動態變化也能保持垂直居中，則要用下面的方法：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動層水平垂直居中</title>
<style>
.outBox2{
display: table;
height: 400px;
width:600px;
position: relative;
overflow: hidden;
background:#FFCCCC;
border: 1px solid #d00;
}
.midBox2{
position: absolute;
top: 50%;
left:50%;
display: table-cell;
vertical-align: middle;
}
.innBox2{
position: relative;
top: -50%;
left:-50%;
width:300px;
margin:0 auto;
border:1px solid #c00;
}
</style>
</head>
<body>
<div class="outBox2">
<div class="midBox2">
<div class="innBox2">
垂直居中<br/>
動態垂直居中<br/>
動態水平居中
</div>
</div>
</div>
</body>
</html>
此方法彷佛只能用在固定的區域，若是是層浮動於整個網頁該如何實現居中，用JS嗎?
二、利用絕對定位與transform
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動層水平垂直居中</title>
<style>
.parent{
position: absolute;
background-color: #eee;
width: 100%;
height: 100%;
}
.parent .children{
background-color: #751;
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
三、利用flexbox
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動層水平垂直居中</title>
<style>
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
display: flex;
justify-content:center; /* 水平居中 */
align-items:center; /* 垂直居中 */
/* flex-direction:column; */ /* 一列顯示 */
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
border: 1px dashed #000;
margin: 5px;
/*若是children下面還有子元素的話，能夠嵌套使用*/
/* display: flex;
justify-content: center;
align-items:center; */
}
</style>
</head>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
</html>
四、利用定位與margin：auto
.parent{
width: 100%;
height: 37.5rem/* 600px */;
background: #09c;
position: relative;
}
.children{
width: 100px;
height: 100px;
background-color: #eee;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
5、 position 和 display 的取值和各自的意思和用法
position
一、position屬性取值：static(默認)、relative、absolute、fixed、inherit。
二、postision：static；始終處於文檔流給予的位置。看起來好像沒有用，但它能夠快速取消定位，讓top，right，bottom，left的值失效。在切換的時候能夠嘗試這個方法。
三、除了static值，在其餘三個值的設置下，z-index纔會起做用。（確切地說z-index只在定位元素上有效）
四、position：relative和absolute均可以用於定位，區別在於前者的div還屬於正常的文檔流，後者已是脫離了正常文檔流，不佔據空間位置，不會將父類撐開。定位原點relative是相對於它在正常流中的默認位置偏移，它本來佔據的空間任然保留；absolute相對於第一個position屬性值不爲static的父類。因此設置了position：absolute，其父類的該屬性值要注意，並且overflow：hidden也不能亂設置，由於不屬於正常文檔流，不會佔據父類的高度，也就不會有滾動條。
五、position：fixed 舊版本IE不支持，定位原點相對於瀏覽器窗口，並且不能變。經常使用於header，footer，或者一些固定的懸浮div，隨滾動條滾動又穩定又流暢，比JS好多了。fixed能夠有不少創造性的佈局和做用，兼容性是問題。
六、position：inherit。規定從父類繼承position屬性的值。可是任何版本的IE都不支持該屬性值。
display
一、display屬性取值：none、inline、inline-block、block、flex、inherit。
二、display屬性規定元素應該生成的框的類型。文檔內任何元素都是框，塊框或行內框。
三、display：none和visiability：hidden均可以隱藏div，區別有點像absolute和relative，前者不佔據文檔的空間，後者仍是佔據文檔的位置。
四、display：inline和block，又叫行內元素和塊級元素。表現出來的區別就是block獨佔一行，在瀏覽器中一般垂直佈局，能夠用margin來控制塊級元素之間的間距；而inline以水平方式佈局，垂直方向的margin和padding都是無效的，大小跟內容同樣，且沒法設置寬高。inline就像塑料袋，內容怎麼樣，就長得怎麼樣；block就像盒子，有固定的寬和高。
五、inline-block就介於二者之間。
六、display: flex 意爲"彈性盒佈局模型"，用來爲盒狀模型提供最大的靈活性。任何一個容器均可以指定爲flex佈局。設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。採用flex佈局的元素，稱爲flex容器。它的全部子元素自動成爲容器成員，稱爲flex項目（flex item）。
容器的屬性：如下6個屬性設置在容器上。
flex-direction 決定主軸的方向（項目的排列方向）。
row（默認值）：主軸爲水平方向，起點在左端。
row-reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column-reverse：主軸爲垂直方向，起點在下沿
flex-wrap 默認狀況下，項目都排在一條線上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。
nowrap（默認）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
flex-flow flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
justify-content 定義了項目在主軸上的對齊方式。假設主軸爲從左到右。
flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。
align-items 定義項目在交叉軸上如何對齊。假設交叉軸從上到下。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。
align-content 義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。
項目的屬性：如下6個屬性設置在項目上。
order 定義項目的排列順序。數值越小，排列越靠前，默認爲0。
flex-grow 定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。
flex-shrink 定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
flex-basis 定義了在分配多餘空間以前，項目佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。
flex flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優先使用這個屬性，而不是單獨寫三個分離的屬性
align-self align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。
6、樣式的層級關係，選擇器優先級，樣式衝突，以及抽離樣式模塊怎麼寫，說出思路，有無實踐經驗
一、CSS優先級
最高優先級
內聯樣式 <p style="...;...;"> ...... </p>
內部樣式表 <style type="text/css"> ...... </style>
外部樣式表 <link rel="stylesheet" type="text/css" href=" "/>
瀏覽器默認
最低優先級
二、CSS Selectors
元素選擇器 p{ ...... } 指定元素
類選擇器 .class_name{ ...... } 類屬性值等於selector中指定值的元素
ID選擇器 #id_name{ ...... } id屬性值等於selector中指定值的元素
通用選擇器 *{ ...... } 當前頁面的全部元素
屬性選擇器 img[alt]{ ...... }
img[src="image.png"]{ ...... } 帶有括號內指定屬性/帶有特定值的屬性的任何元素
子選擇器 li>p{ ...... } 右邊元素是左邊的直接子節點時(IE6及更早版本不支持)
後代選擇器 li p { ...... } <li>元素包含的全部的<p>元素
相鄰兄弟選擇器 h1 + p { ...... } 在同一DOM層級中的元素(IE6及更早版本不支持)
僞類 a:link,a:focus { ...... } 根據連接的狀態樣式化元素
僞元素
p:first-letter { ...... }
p:before { ...... }
樣式化元素的特定部分(第一行或者第一個字母)，或在其先後插入內容
組合選擇器 h1,p{ ...... }
p.warning{ ...... }
div#foot{ ...... }
p.info, div#foot{......}
三、解決衝突：繼承與層疊
繼承：某個屬性從父元素傳遞到子元素的機制
繼承的意義：不用爲每一個元素指定的屬性，簡化了代碼，若不需繼承屬性，覆蓋便可
什麼元素能夠繼承屬性？ 除了<html>（根元素）都有，由於只要它無父元素。
哪些屬性能夠繼承？ 思考一下就知道，好比backgroun-color屬性
層疊：當多個衝突和層疊的CSS聲明應用在同一元素時，用來控制應用CSS聲明的順序
1重要性，若聲明具備同樣的重要性，則計算特殊性
重要性
瀏覽器內建樣式表 優先級最低
做者樣式表中的常規聲明
用戶樣式表中的常規聲明
做者樣式表中的重要聲明 重要聲明：
｛ ... ; ... !important;｝
用戶樣式表中的重要聲明 優先級最高
2特殊性，若聲明具備同樣的特殊性，則考慮源順序
計算特殊性
有4個成分——abcd,a最特殊,d特殊性最少
成分a 若style屬性中有一個聲明，則爲1,不然爲0 h1——0,0,0,1
成分b 選擇器中id選擇器數目 .info——0,0,1,0
成分c 屬性選擇器、類選擇器、僞元素數目 #bar——0,1,0,0
成分d 元素選擇器、僞元素的數目 ul#nav a:link——0,1,1,2
***組合符、通用符對特殊性無影響
3源順序
源順序
後面的聲明覆蓋前面的
!important 必須寫在樣式與分號之間，每一個樣式必須單獨聲明。這個也能夠用來調整兼容性問題，IE6不識別!important;話說回來，兼容問題最好仍是用hack方法解決比較好！
7、CSS3動畫效果屬性
1.Keyframes介紹：
Keyframes被稱爲關鍵幀，其相似於Flash中的關鍵幀。在CSS3中其主要以「@keyframes」開頭，後面緊跟着是動畫名稱加上一對花括號「{…}」，括號中就是一些不一樣時間段樣式規則。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
示例：建立一個動畫名叫「changecolor」，在「0%」時背景色爲red,在20%時背景色爲blue，在40%背景色爲orange，在60%背景色爲green，在80%時背景色yellow，在100%處時背景色爲red。
<html>
<head>
<meta charset="utf-8">
<title>css3動畫</title>
<style>
@keyframes changecolor{
0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
}
div:hover {
animation: changecolor 5s ease-out .2s;
}
</style>
</head>
<body>
<div>hover顏色改變</div>
</body>
</html>
2.設置動畫播放方式
語法規則：
animation-timing-function:ease(由快到慢，逐漸變慢) | linear (恆速)| ease-in (速度愈來愈快)| ease-out (速度愈來愈慢)| ease-in-out (先加速在減速)|
cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*
3.設置動畫播放方向
animation-direction屬性主要用來設置動畫播放方向，其語法規則以下：
animation-direction:normal | alternate [, normal | alternate]*
其主要有兩個值：normal、alternate
一、normal是默認值，若是設置爲normal時，動畫的每次循環都是向前播放；
二、另外一個值是alternate，他的做用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。
4.設置動畫的播放狀態
animation-play-state屬性主要用來控制元素動畫的播放狀態。
參數：
其主要有兩個值：running和paused。
其中running是其默認值，主要做用就是相似於音樂播放器同樣，能夠經過paused將正在播放的動畫停下來，也能夠經過running將暫停的動畫從新播放，這裏的從新播放不必定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外若是暫停了動畫的播放，元素的樣式將回到最原始設置狀態。
例如，頁面加載時，動畫不播放。代碼以下：
animation-play-state:paused;
五.設置動畫時間外屬性
animation-fill-mode屬性定義在動畫開始以前和結束以後發生的操做。主要具備四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果以下：
none 默認值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處
forwards 表示動畫在結束後繼續應用最後的關鍵幀的位置
backwards 會在向元素應用動畫樣式時迅速應用動畫的初始幀
both 元素動畫同時具備forwards和backwards效果
在默認狀況之下，動畫不會影響它的關鍵幀以外的屬性，使用animation-fill-mode屬性能夠修改動畫的默認行爲。簡單的說就是告訴動畫在第一關鍵幀上等待動畫開始，或者在動畫結束時停在最後一個關鍵幀上而不回到動畫的第一幀上。或者同時具備這兩個效果。
例如：讓動畫停在最一幀處。代碼以下：
animation-fill-mode:forwards;
canvas、svg的區別
1) svg繪製出來的每個圖形元素都是獨立的DOM節點，可方便後期綁定事件或修改，而canvas輸出的是一整幅畫布；
2) svg輸出的圖形是矢量的，後期能夠修改參數來自由放大縮小，無失真，canvas輸出標量畫布，就像一張圖片同樣。
8、px和em的區別
px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位 ，不會由於其餘元素的尺寸變化而變化。 em表示相對於父元素的字體大小。em是相對單位 ，沒有一個固定的度量值，而是由其餘元素尺寸來決定的相對值。
- 1. 前端篇---------CSS
- 2. CSS第二篇
- 3. CSS圖形篇
- 4. CSS篇（上）
- 5. 備戰-CSS篇
- 6. CSS入門篇 （第一篇，CSS選擇器與CSS權值）
- 7. 前端（一）CSS篇
- 8. css篇 -- （二）浮動
- 9. CSS基礎篇（二）
- 10. CSS篇：Flex佈局
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
- • 再有人問你分佈式事務，把這篇扔給他
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端篇---------CSS
- 2. CSS第二篇
- 3. CSS圖形篇
- 4. CSS篇（上）
- 5. 備戰-CSS篇
- 6. CSS入門篇 （第一篇，CSS選擇器與CSS權值）
- 7. 前端（一）CSS篇
- 8. css篇 -- （二）浮動
- 9. CSS基礎篇（二）
- 10. CSS篇：Flex佈局