css的知識點概括與總結

時間 2020-02-08

標籤 css 知識概括總結欄目 CSS 简体版

原文原文鏈接

前言

css是頁面的化妝師，也是每一個前端必需要掌握的基礎，在工做中也經常由於頻於業務，而不能很好的去沉澱技術，本文主要是做者業餘學習記錄下來的筆記,主要記錄了css經常使用一些的基礎，以及css高級應用，例如精靈圖，字體圖標等，還有css3新特性,主要是新增的屬性選擇器、結構僞類選擇器、僞元素選擇器，過渡，2d/3d轉換(動畫)等，還有些規範建議，HTML5新特性等，方便查缺補漏。css

基礎

字體設置

各類字體之間必須使用英文狀態下的逗號隔開。
如今網頁中廣泛使用14px+
中文字體須要加英文狀態下的引號,英文字體通常不須要加引號。當須要設置英文字體時,英文字體名必須位於中文字體名以前。
若是字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-fanily:'Times new Roman';
儘可能使用系統默認字體,保證在任何用戶的瀏覽器中都能正確顯示
儘可能不用中文,有兼容問題,最好用對應的英文或者unicode編碼。

* {
   font-family: "Microsoft  YaHei",tahoma,arial,"Hiragino Sans GB"
 }

字體粗細

span {
    font-weight:400;
 }

tips：數字 400 => normal(不加粗) ,而 700 => bold(加粗),推薦使用數字

font 綜合設置

span  {
   font: font-style font-weight font-size/line-height font-family
 }

tips: 要寫全要按以上順序書寫,可省略，但必須保留 font-size和 font-family,不然 font屬性不起做用

選擇器

id
class
行內
標籤
通配符選擇器 *
連接僞類選擇器html
- :link 未訪問的連接
- :visited 已訪問的連接咱們已經點擊過一次的狀態
- :hover 鼠標移動到連接上
- :active 選定的連接當咱們點擊別鬆開鼠標顯示的狀態
結構僞類選擇器(css3新特性)前端
- :first-child 選取屬於父元素的首個子元素的指定選擇器。
- :last-child 選擇屬於其父元素的最後一個子元素的指定選擇器
- :nth-child(n) 匹配屬於其父元素的第N個子元素，不論元素的類型 even 偶數 odd 奇數,若是用公式n從0開始 (從上往下數)
- :nth-last-child(n) 選擇器匹配屬於其元素的第N個子元素的每一個元素，不論元素的類型，從最後一個子元素開始計數，n 能夠是數字、關鍵詞或公式(從下往上數)

<ul>
  <li>第一個孩子</li>
  <li>第二個孩子</li>
  <li>第三個孩子</li>
  <li>第四個孩子</li>
  <li>第五個孩子</li>
  <li>第六個孩子</li>
  <li>第七個孩子</li>
 <ul>

/*li是ul的孩子，後面對應選擇第幾個孩子*/

 // even => 2n  偶數 二、四、 6 
 li:nth-child(even) {
     color:red
 }
 // odd => 2n+1/2n-1 奇數 一、三、五、7 
 li:nth-child(odd) {
     color:red
 }

:target

目標僞類選擇器：選擇器可用於選取當前活動的目標元素vue

:target {
   color: red;
   font-size:3
 }

tips： link visited hover active 順序不要改變，按照 lvha的順序。可簡單寫,只寫一個 hover。

css複合選擇器

交集選擇器

既屬於p又屬於redhtml5

p.red{
  font-size:    20px;
 }

<p class='red'>111</p>
 <p >222</p>

並集選擇器

只要選擇器都會執行後面樣式css3

div,
p,
span {
color:blue;
font-size:18px
}

後臺選擇器

子孫後代均可以選擇，用空格隔開es6

div p {
 color:pink;
}

<p>211</p>
<div>
  <p>
  111
  </p>
</div>

子元素選擇器

只選擇親兒子web

div > p {
 color:pink;
}

屬性選擇器(css3)

/*包含title這個屬性*/
 
 a[title] {
  color:red;   
 }
 
 /*包含的屬性等於*/
 
 input[type='text'] {
      color:red;
 }

<a href='#'
 title='測試1'>測試1</a>
 
 <input
 type="text"
 ></input>

首行縮進

p {
   text-indent:2em
}

tips: 1em就是一個字的寬度若是是漢字的段落， 1em 就是一個漢字的寬度。

字間距和單詞間距

div {
    letter-spacing:2px; /* 字間距*/ 
  }
  
  p {
   word-spacing:10px; /*單詞間距*/
 }

顏色半透明(css3)

/*參數: r、g、b、a*/
 color:rgba(0,0,0,0.3)

文字陰影(css3)

/*水平位置 垂直位置 
模糊距離
陰影顏色
*/

h1 {
 text-shadow:1px 2px 3px rgba(0,0,0,0.3);
}

塊級元素

每一個塊元素一般都會獨自佔據一整行或多整行，能夠對其設置寬度、高度、對齊等屬性、經常使用於網頁佈局和網頁結構的搭建
塊級元素的特色:json
- 老是重新行開始
- 高度、行高、外邊距以及內邊距均可以控制。
- 寬度默認是容器的100%
- 能夠容納內聯元素和其餘塊元素
常見的塊元素有:

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>segmentfault

行內元素

行內元素(內聯元素)不佔有獨立的區域,僅僅靠自身的字體大小和圖像尺寸來支撐結構，通常不能夠設置寬度，高度，對齊等屬性，經常使用於控制頁面中文本的樣式。
常見的行內元素有:

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<span>、<u>、<ins>

行內元素的特色
- 和相鄰行元素在一行上。
- 高、寬無效，但水平方向的padding和margin能夠設置，垂直方向的無效。
- 默認寬度就是它自己內容的寬度。
- 行內元素只能容納文本或者其餘行內元素。(a特殊)

行內塊元素(特殊的行內元素)

在行內元素中有幾個特殊的標籤 <img>、<input>、 <td>,能夠對他們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素
行內塊元素的特色：
- 和相鄰行內元素(行內塊)在一行上，可是之間會有空白縫。
- 默認寬度就是它自己內部的寬度。
- 高度、行高、外邊距以及內邊距均可以控制。

顯示模式轉換

塊級標籤轉爲行內標籤模式

div  {
    display:inline;  
  }

行內標籤模式轉爲塊級模式

span {
   display:block; 
 }

行內標籤模式轉爲行內塊模式

a {
      display:inline-block;  
  }

單行文字垂直居中

原理: 行高的上空隙和下空隙把文字擠到中間了,是若是行高小於盒子高度，文字會偏上，若是行高小於盒子高度，則文字偏下，上下空隙和和平均分佈

//盒子高度40px
p {
   line-height:40px 
}

背景圖片

背景各個屬性的應用

img {

   //引入
   background-image:url(images/icon.png);
   //不平鋪
   background-repeat:no-repeat;
   /*方位 x、y   x是left/right，自動轉換，top/bottom  不論順序,自動轉換，可省略一個，那麼另外一個就是center */
   
   //background-position:left center
   
   /*還能夠是精確位置 若是寫了精確位置,那麼第一個必定是x，第二個必定是y*/
   
   //background-position:20px 20px
   
  /*還能夠是混合，若是寫了混合位置,那麼第一個必定是x，第二個必定是 y*/
   background-position:20px center
 
  /*參數 scroll(滾動，默認)和fixed(固定)*/
   background-attachment:fixed //背景圖像固定
  
}

背景的簡寫

background:背景顏色,背景圖片地址,背景平鋪背景圖像滾動,背景圖片位置。

body {
 background:black url(images/bg.jpg) no-repeat fixed center top;    
}

tips:以上沒有特定的順序，只是按這習慣寫

背景的半透明

img {
  background:rgba(0,0,0,0.3) 後面必須4個值
}

css的三大特性

層疊性

p {
     color:red;
 }
 
  
 p {
     color:blue;
 }
 //最後p是blue顏色 後面的顏色覆蓋前面的顏色

繼承性

子元素能夠繼承父元素的樣式(text-,font-,line-這些元素開頭的能夠繼承，以及color屬性)和文字相關的纔會繼承

/* /1.5 那麼行高就是12*1.5*/
 body {
 font:12px/1.5   
 }

div {
 /*子元素繼承了父元素body的行高1.5*/
 /*這個1.5就是當前元素文字大小font-size的1.5倍 因此當前的div的行高就是21元素*/
   font-size:14px;
}

<body>
   <div></div>
 </body>

優先級

選擇器	選擇器權重
繼承或者*	0,0,0,0
元素選擇器	0,0,0,1
類選擇器，僞類選擇器	0,0,1,0
ID選擇器	0,1,0,0
行內樣式style=""	1,0,0,0
!important 重要的	無窮大

tips:

權重是由4組數字組成，可是不會有進位。

能夠理解爲類選擇器永遠大於元素選擇器,id選擇器永遠大於類選擇器，依次類推。

等級判斷從左到右，若是某一位數值相同，則判斷下一位數值。

能夠簡單記憶法：通配符合繼承權重爲0，標籤選擇器爲1，類(僞類)選擇器爲10，id選擇器100，行內樣式表爲1000，!important 無窮大

繼承的權重是0，若是該元素沒有直接選中，無論父元素權重多高，子元素獲得的權重都是0

權重疊加

複合選擇器會有權重疊加的問題，但注意不會有進位

div ul li ----> 0,0,0,3
.nav ul li ----> 0,0,1,2
a:hover ----> 0,0,1,1
.nav a ----> 0,0,1,1

盒子模型

邊框

邊框會影響盒子的實際大小咱們有兩種方案解決:
1. 測量盒子大小的時候，不量邊框。
2. 若是測量的時候包含了邊框，則須要width/height 減去邊框寬度
padding

/*三個 第一個是上 中間是左右 最後一個是右*/
div {
    padding:10px 20px 30px
}

padding 會影響盒子的實際大小
，所以咱們有如下方案解決:
若是測量的時候包含了邊框，則須要width/height 減去邊框寬度

margin
margin的典型應用，應用於塊級盒子水平居中對齊

div{
    //必須有個寬度
    width:900px;
    height:200px;
    background-color:red;
    //上下沒有邊距 左右設置auto
    margin:0 auto;
}

嵌套塊元素坍塌
當盒子裏嵌套着盒子的時候，在裏外盒子都設置margin，會使得邊距合併，使得父盒子一塊兒移動了,裏面的間距看不到了;

解決方案：
 1.能夠爲父元素定義邊框(會增大盒子)；
 2.能夠爲父元素定義內邊距(會增大盒子);
 3.能夠爲父元素添加overflow:hidden。(推薦，不增大盒子)
 4.浮動、固定、絕對定位的盒子不會有塌陷問題

清除內外邊距

不一樣瀏覽器的不一樣元素、標籤的內外間距都不一樣，可使用如下方法來清空，解決問題。

* {
    padding:0;
    margin:0;
  }

tips:

padding有個特殊狀況若是沒指定寬度或高度padding不會撐大盒子的寬或高,孩子若是沒有指定寬度或高度，父親有寬度或高度，孩子設置了padding也不會撐開盒子,注意以上水平居中方法只屬於塊級使用方法，

要讓行內元素和行內塊元素水平居中可使用在行內元素和行內塊元素的父級添加text-align:center

行內元素爲了照顧兼容性，儘可能只設置左右內外邊距，上下設置了也不起做用，可是轉換爲塊級和行內塊元素就能夠了。

圓角邊框(css3)

原理: radius 半徑(圓的半徑)原理:(橢)圓與邊框的交集造成圓角效果

div {
    border-radius:20px;
  }

正方形變圓

div {
      width:200px;
      height:200px;
      border-radius:50%;
      /*或者把數值改爲高度或寬度的一半*/
      //border-radius:100px;
  }

矩形變圓

div {
      width:200px;
      height:100px;
      /*若是是個矩形，設置爲高度的一半*/
      border-radius:50px;
  }

tips: border-radius後面參數值簡寫，分別表明左上，右上，右下，左下。

盒子陰影(css3)

div {
      width:200px;
      height:200px;
      box-shadow:10px 10px 
 }

6個參數值(從左到右)

值	描述
h-shadow	必需。水平陰影的位置。容許負值。
v-shadow	必需。垂直陰影的位置，容許負值。
blur	可選。模糊距離。
spread	可選。陰影的尺寸。
color	可選。陰影的顏色。請參閱css顏色值。可也用rgba
inset	可選。將外部陰影(outset)改成內部陰影。

tips:

默認的是外陰影(outset),可是不能夠寫這個單詞，不然致使陰影無效。

盒子陰影不佔用空間，不會影響其餘盒子排列。

文字陰影(css3)

span {
      font-size:50px;
      color:red;
      font-weight:700;
      text-shadow:10px 10px;
 }

4個參數值(從左到右)

值	描述
h-shadow	必需。水平陰影的位置。容許負值。
v-shadow	必需。垂直陰影的位置，容許負值。
blur	可選。模糊距離。
color	可選。陰影的顏色。請參閱css顏色值。可也用rgba

浮動

浮動語法

div {
   float:left //或者right
 }

設置了浮動的元素的最重要特性:
- 脫離標準普通流的控制(浮) 移動到指定位置(動),(俗稱脫標/脫離文檔流)
- 浮動的盒子再也不保留原先的位置
- 不管任何屬性的標籤都會變成具備行內塊元素的特性
- 設置浮動後就不繼承了父類的寬度，根據內容來決定的
- 浮動的盒子中間是沒有縫隙的，是緊挨在一塊兒的
- 浮動的盒子只會影響浮動盒子後面的標準流不會影響前面的標準流
- 一個盒子裏面有多個盒子，若是其中一個盒子浮動了，那麼其餘的兄弟也應該浮動起來，以防止引發問題。
- 浮動的元素不會壓住下面標準流盒子內的文字，但會壓住下面的盒子，浮動產生的目的最初是爲了作文字環繞效果的
清除浮動

因爲父級盒子不少狀況下，不方便給高度，可是子盒子浮動，脫離文檔流又不佔有位置，最後父級盒子高度爲0時，就會影響下面的標準流盒子，因此須要清除浮動。

/*1.額外標籤法,也稱爲隔牆法，找到浮動的最後一個元素後再加個標籤,必須是塊級元素標籤*/
  .clear {
    clear:both; 
  }
  
 /*2.能夠給父級添加overflow,缺點,沒法顯示溢出的部分*/
 .box{
    overflow:hidden;
 }
 
 /*3.能夠給父級添加:after*/
 .clearfix:after {
    //僞元素必須寫的屬性
    content:'';
    //插入的元素必須是塊級，僞元素是行內
    display:block;
    //不要看見這個元素
    height:0;
    //核心代碼清除浮動
    clear:both;
    //不要看見這個元素
    visibility:hidden;
 }
 
 /*4.雙僞元素清除浮動*/
 .clearfix:before,
 .clearfix:after 
 {
   content:'';
   display:table;//轉換爲塊級，並在同一行上顯示
 }
 
 .clearfix:after {
     clear:both;
 }

<div class='box clearfix'>
   <div class='item1'>item1</div>
   <div class='item2'>item2</div>
   <div class='clear'>item2</div>
 <div>

tips:

浮動元素常常和標準流進行搭配使用，用標準流排列上下位置，以後內部元素採起浮動排列左右位置，符合網頁佈局第一準則。

須要清除浮動的緣由:父級沒高度；子盒子浮動了；影響下面佈局，咱們就應該清除浮動了。

ps切圖

圖層切圖

右擊圖層->快速導出png

tips:遇到要導出多個圖層的狀況下，要合併圖層再轉爲png。

切片工具
文件菜單->導出->存儲爲web所用格式->選擇咱們要的圖片格式->存儲。
ps插件切圖

cutterman是一款運行在photoshop中的插件，安裝並使用它能更好的切圖

tips:

cutterman插件要求你的ps必須是完整版，不能是綠色版，因此你們須要安裝完整版本,如何判斷:看窗口菜單的擴展功能，若是不是灰色的，可使用，就是完整版的。

點擊進入cutterman官網

定位

相對定位是元素在移動位置的時候，是相對於它原來的位置來講的，它的特色:
- 它是相對於自已原來的位置來移動的(移動位置的時候參照點是本身原來的位置)
- 原來在標準流的位置繼續佔用,後面的盒子仍然以標準流的方式對待它。(不脫標，繼續保留原來位置)所以，相對定位並無脫標。它最典型的應用是給絕對定位當爹的。

div {
    position:relative;  
    
 }

絕對定位是元素在移動位置的時候，是相對於它祖先元素來講的,它的特色:
- 若是沒有祖先元素或者祖先元素沒有定位，則以瀏覽器爲準定位
- 若是祖先元素有定位(相對、絕對、固定定位)，則以最近一級的有定位祖先元素爲參考點移動位置。
- 絕對定位再也不佔有原先的位置(脫標)

div {
    position:absolute;  
    
 }

子絕父相:子級是絕對定位的話，父級要用相對定位。
- 子級絕對定位，不會佔有位置，能夠放到父盒子裏面的任何一個地方，不會影響其餘的兄弟盒子。
- 父盒子須要加定位限制子盒子在父盒子內顯示。
- 父盒子佈局時，須要佔有位置，所以父親只能是相對定位。

tips:由於父級須要佔有位置，所以是相對定位，子盒子不須要佔有位置，則是絕對定位。

.father{
     positon:relative;
 }
 
 .child {
    position:absolute;  
 }

固定定位:fixed(重要)

固定定位是元素固定於瀏覽器可視區的位置，主要使用場景:能夠在瀏覽器頁面滾動時元素的位置不會改變。

div {
    positon:fixed; 
  }

固定定位的特色:

以瀏覽器的可視窗口爲參照點移動元素。

跟父元素沒有任何關係。

不隨滾動條滾動。

固定定位不在佔有原先的位置(脫離文檔流)。

粘性定位:能夠被認爲是相對定位和固定定位的混合。sticky粘性的語法:

div {
    position:sticky;
    /*當前元素的可視區和滾動條齊平的時候,使用粘性定位*/
    top:0;
  }

tips: 粘性定位的特色:

以瀏覽器的可視窗口爲參照點移動元素(固定定位特色)

粘性定位佔有原先的位置(相對定位特色)

必須添加top、left、right、bottom其中一個纔有效。

跟頁面滾動搭配使用，但兼容性差，IE不支持。

絕對定位的垂直水平居中

div {
   position:absolute;
   /*讓盒子的左側移動到父級元素的水平中心位置*/
   left:50%;
   top:50%;
   margin-left:-100px;/*讓盒子向左移動自身寬度的一半*/
   margin-top:-100px;/*讓盒子向上移動自身高度的一半*/
   width:200px;
   height:200px;
   background-color:black;
 }

定位的特殊特性

行內元素添加絕對或者固定定位,能夠直接設置高度或寬度。

塊級元素添加絕對或者固定定位，若是不給寬度和高度，默認大小是內容的大小

浮動元素、絕對定位(固定定位)元素的都不會觸發外邊距合併的問題。

絕對定位(固定定位)會壓住下面標準流全部的內容。

脫離文檔流後，margin就無效了。

定位疊放次序

在使用定位佈局時，可能會出現盒子重疊的狀況。此時，可使用z-index來控制盒子的先後次序(z軸)

div {
    z-index:1;
 }

數值能夠是正整數、負整數或0，默認是auto,數值越大，盒子越靠上
若是屬性值相同，則按照書寫順序，後來居上
數字後面不能加單位
只有定位的盒子纔有z-index屬性

顯示隱藏元素

display 顯示隱藏

div {
    display:none;//隱藏對象
   //display:block;//顯示對象
 }

tips: display隱藏元素後，再也不佔有原來的位置。

visibility 屬性用於指定一個元素應可見仍是隱藏

div {
      visibility:visible; //元素可視
     //visibility:hidden; //元素隱藏
 }

tips: visibility隱藏元素後，繼續佔有原來的位置

overflow

div {
     overflow:hidden; //元素隱藏
 }

overflow

屬性值	描述
visible	不剪切內容也不添加滾動條
hidden	不顯示超過對象尺寸的內容，超出的部分隱藏掉
scroll	無論超出內容否，老是顯示滾動條
auto	超出自動顯示滾動條，不超出不顯示滾動條

tips: 通常狀況下，咱們都不想讓溢出的內容顯示出來，由於溢出的部分會影響佈局。
可是若是有定位的盒子，請慎用 overflow:hidden 由於它會隱藏多餘的部分。

高級應用

精靈圖(雪碧圖)

精靈圖主要是爲了有效減小服務器接收和發送請求的次數，提升頁面的加載速度，而出現了css精靈技術(也稱css Sprites、css雪碧)
精靈圖特色:
- 精靈圖主要針對於小的背景圖片使用。
- 主要藉助於背景位置來實現background-position。
- 通常狀況下精靈圖都是負值。(千萬注意網頁中的座標：x軸右邊走是正值，左邊是負值，y軸同理。)

.box1 {
   width: 60px;
   height: 60px;
   margin: 100px auto;
   background: url(images/sprites.png) no-repeat -100px 0;
 }
 
  .box2 {
   width: 20px;
   height: 20px;
   margin: 200px;
   background: url(images/sprites.png) no-repeat -150px -106px;
 }

精靈圖缺點:
- 圖片文件仍是比較大。
- 圖片自己放大和縮小會失真。
- 一旦圖片製做完畢想要更換很是複雜

tips:背景圖片默認是左上角對齊

字體圖標

字體圖標的出現，主要解決了精靈圖的以上問題。能夠爲前端工程師提供一種方便高效的圖標使用方式，展現的是圖標，本質屬於字體

精靈圖的優勢:

1. 輕量級:一個圖標字體要比一系列的圖像要小，一旦字體加載了，圖標就會立刻渲染出來，減小了服務器請求。
  2. 靈活性：本質實際上是文字,能夠很隨意的改變顏色、產生隱影、透明效果、旋轉等
  3. 兼容性：幾乎支持全部的瀏覽器

字體圖標下載地址
- icomoon字庫下載地址
- 阿里iconfont字庫(推薦) 下載地址

字體圖標的使用

//字體聲明 
 @font-face {
   //1. 把下載獲得的fonts放到咱們項目中。
   //2. 打開下載獲得的style.css,複製@font-face這一段。
 }
 
 //使用
 span {
     font-family:'icomoon';
     color:black;
     font-size:12px;
 }

追加字體圖標

把下載的壓縮包裏的selection.json重新上傳

tips: 字體圖標不能替代精靈技術，只是對工做中圖標部分技術的提高和優化。

若是遇到一些結構和樣式比較簡單的小圖標，就用字體圖標。

若是遇到一些結構和樣式複雜一點的小圖片，就用精靈圖。

css 三角

網頁中常見一些三角型，使用css直接畫出來就能夠，沒必要作成圖片或者字體圖標。

div {
  width:0;
  height:0;
  line-height:0;
  font-size:0;
  border:50px solid transparent;
  border-left-color:red;
 }

css 三角巧妙運用

作出直接三角形

div {
    width:0;
    height:0;
    /*1.只保留右邊的邊框有顏色*/
    border-color:transparent red transparent transparent;
    /*2.樣式都是solid*/
    border-style:solid;
    /*3.上邊框寬度要大,右邊框寬度稍小，其他的邊框爲0*/
    border-width:100px 50px 0 0;
   /*border-width=>border-top、border-right、border-bottom、border-left*/
 }

用戶界面

鼠標樣式

<ul>
   <li style='cursor:default'>我是默認的小白鼠標樣式</li>
   
   <li style='cursor:pointer'>我是鼠標小手樣式</li>    
    
   <li style='cursor:move'>我是鼠標移動樣式</li>    
   
   <li style='cursor:text'>我是鼠標文本樣式</li>     
    
   <li style='cursor:not-allowed'>我是鼠標禁止樣式</li>       
    
  </ul>

取消表單輪廓和防止拖拽

input,textarea {
   //取消表單輪廓
   outline:none;
  }
 
  textarea {
   //防止拖拽文本域
   resize:none; 
  }

tips:文本域的開閉合標籤最好在一行，防止文本域裏面的光標錯位。

vertical-align

實現行內塊(圖片和表單都屬於行內塊3)和文字垂直居中，若是是其餘類型元素可先轉換爲行內塊

div {
    display:inline-block;
    vertical-align:middle;
 }

圖片底側空白縫隙解決
- 給圖片的父親加邊框，會發現圖片的底部會有個空白縫隙，是由於圖片默認是和咱們文字的基線對齊。
- 把圖片轉換爲塊級元素 display:block;

文字溢出省略號顯示

單行文字溢出省略號顯示

div {
     width:150px;
     height:80px;
     background-color:red;
     margin:100px auto;
     //要知足如下條件才能夠
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
 }

多行文本溢出省略號顯示

/*適合於webkit瀏覽器或移動端,不考慮ie的狀況，pc也可用*/
 div {
     width:150px;
     height:80px;
     background-color:red;
     margin:100px auto;
     //要知足如下條件才能夠
     overflow:hidden;
     text-overflow:ellipsis;
     /*彈性伸縮盒子模型顯示*/
     display:-webkit-box;
     /*限制在一個塊元素顯示的文本的行數*/
     -webkit-line-clamp:2;
    /*設置或檢索伸縮對象的子元素的排列方式*/
     -webkit-box-orient:vertical;
 }

佈局小技巧

margin負值巧妙運用
- 讓每一個盒子margin 往左移動-1px 正好壓住相鄰盒子邊框，能夠去掉相鄰盒子的邊框。
- 若是在某些條件下須要顯示被壓住的邊框鼠標通過某個盒子的時候，提升當前盒子的層級便可(若是沒有定位，則加相對定位(保留位置))，若是有定位，則加z-index)
文字圍繞浮動元素巧妙利用
利用浮動不會壓住文字，實現左圖右文
行內塊的巧妙運用
利用行內塊元素的特性一行顯示按鈕，並在父類中用text-align:center來橫向居中顯示子類;
css 初始化代碼
經常使用的公共兼容代碼

* {
//把咱們的內外邊距所有清0
 margin:0;
 padding:0;
 /*css3的盒子模型，可讓border和padding不會撐大盒子。*/
 box-sizing:border-box;
}

//em和i協調的文字不傾斜
em,i {
 font-style:normal
}

//去掉li的小圓點
li {
 list-style:none
}

img {
/*border:0 照顧低版本瀏覽器， 若是圖片外面包含了連接會有邊框的問題*/
 border:0;
 //取消圖片底側有空白縫隙的問題
 vertical-align:middle
}

button {
/*當咱們鼠標通過button 按鈕的時候，鼠標會變成小手*/
 cursor:pointer  
}

a {
 color:#666;
 //隱藏藍色的線
 text-decoration:none
}

a:hover {
 color:#c81623
}

button,input {
 font-family:Microsoft YaHei,Heiti   SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
 /*默認有灰色邊框咱們須要手動去掉*/
 border: 0;
 outline: none;
}


body {
  //css3 抗鋸齒性，讓文字顯示的更加清晰
 -webkit-font-smoothing:antialiased;
 background-color:#fff;
 font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans
 /*"\5B8B\4F53" 是宋體的意思,用Unicode編碼瀏覽器的兼容性小*/
 GB,"\5B8B\4F53",sans-serif;
 color:#666
}

.hide,.none{
 display:none
}

/*清除浮動的*/
.clearfix:after { 
 visibility:hidden;
 clear:both;
 display:block;
 content:".";
 height:0
}

.clearfix {
  *zoom:1
}

//把語義化標籤轉換爲塊級,兼容ie9
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary
{
 display:block
}

css3新特性

屬性選擇器

<input type="text" value="請輸入用戶名">

 <input type="password" value="請輸入用戶名" name="">

/*屬性選擇器*/
  /*必須是input,可是同時具備value這個屬性 選擇這個元素*/
  input[value] {
    color:red    
  }
  /*屬性選擇器還能夠選擇屬性=值的某些元素*/
  input[type='text'] {
    color:red    
  }

選擇器	簡介
E[att]	選擇具備att屬性的E元素
E[att="val"]	選擇具備att屬性且屬性值等於val的E元素
E[att^="val"]	匹配具備att屬性且值以val開頭的E元素
E[att$="val"]	匹配具備att屬性且值以val結尾的E元素
E[att*="val"]	匹配具備att屬性且值中含有val的E元素

tips:類選擇器、屬性選擇器、僞類選擇器、權重爲10。

結構僞類選擇器

結構僞類選擇器主要根據文檔結構來選擇器元素，經常使用於根據父級選擇器裏面的子元素

<ul>
   <li>我是第1個孩子</li>
   <li>我是第2個孩子</li>
   <li>我是第3個孩子</li>
   <li>我是第4個孩子</li>
   <li>我是第5個孩子</li>
   <li>我是第6個孩子</li>
   <li>我是第7個孩子</li>
   <li>我是第8個孩子</li>
   <li>我是第9個孩子 </li>
   <li>我是第10個孩子</li>
 <ul>
 
 <section>
   <p>第一個</p>
   <div>第二個</div>
   <div>第三個</div>
 </section>

/*選擇ul的第一個孩子,且這孩子必須是li,因此在後代中指定li*/
 ul li:first-child {
     background:pink;
 }
 
 //選擇ul裏面的最後一個孩子
 ul li:last-child {
     background:pink;
 }

/*
1. n能夠是數字,關鍵字和公式；
2. 若是是數字，就是選擇第n個子元素，裏面數字從1開始...
3. n能夠是關鍵字：even偶數，odd奇數。
4. n能夠是公式：常見的公式以下(若是n是公式，則從0開始計算，可是第0個元素或者超出了元素的個數會被忽略)。
*/

/* 執行的時候首先看 :nth-child(n) 以後再看前面的li */
ul li:nth-child(n) {
     background:blue;
 }
 
 /* 執行的時候首先看 :div ，以後回去看 nth-of-type(n)*/
section div:nth-of-type(n) {
     background:blue;
 }
 
 
/* nth-child(n) 和 nth-of-type(n)區別*/
/* nth-child(n)會把父親下全部的盒子都排列序號,不只僅是指定的那個選擇器;nth-of-type(n)會把父親下指定元素的盒子排列序號*/

公式	取值
2n	偶數
2n+1	奇數
5n	5 10 15...
n+5	從第5個開始(包含第五個)到最後
-n+5	前5個(包含第5個)...

tips:

nth-child(n) 公式值n從0開始計算

結構僞類選擇器通常用於選擇父級裏面的第幾個孩子

nth-child 對父元素裏面全部孩子排序選擇(序號是固定的)先找到第n個孩子，而後看看是否和E匹配

nth-of-type 對父元素裏面指定子元素進行排序選擇。先去匹配 E，而後再根據E找第n個孩子

若是是無序列表，nth-child，用的多。

類選擇器、屬性選擇器、僞類選擇器、權重爲10。

僞元素選擇器

僞元素選擇器能夠幫助咱們利用css建立新標籤元素，而不須要HTML標籤，從而簡化HTML結構。規範寫法前面兩個::,單冒號僅用來支持ie8的。

選擇器	簡介
::before	在元素內部的前面插入內容
::after	在元素內部的後面插入內容

tips:

before和after建立一個元素，都是屬於行內元素

新建立的這個元素在文檔樹中是找不到的，因此咱們稱爲僞元素。

語法: element::before {}

before和after 必須有content屬性

before和after都是盒子，before和after都在父元素裏面建立，before在父元素內容的前面建立元素，after在父元素內容的後面插入元素，。

僞元素選擇器和標籤選擇器同樣，權重爲1

css3盒子模型

css3中能夠經過box-sizing來指定盒模型，有2個值：便可指定爲content-box、border-box,這樣咱們計算盒子大小的方式就發生了改變。

能夠分紅兩種狀況：
1. box-sizing:content-box 盒子大小爲width+padding+border(之前默認的)
2. box-sizing:border-box 盒子大小爲width

若是盒子模型咱們改成了box-sizing:border-box,那padding和border就不會撐大盒子了(前提padding和border不會超過width寬度)

濾鏡filter
filter, css屬性將模糊或顏色偏移等圖形效果應用於元素。

/* filter:函數(); 例如：filter:blur(5px); blur模糊處理,數值越大越模糊*/
  img {
      filter:blur(5px)
  }

calc函數

calc() 此函數讓你在聲明css屬性值時執行一些計算

//需求咱們的子盒子寬度永遠比父盒子小30像素
  .father
    {
     width:300px;
     height:200px;
     background-color:red
   }
   
  .son {
      //子繼承父的寬度而後再減去30px
      width:calc(100%-30px);
      height:30px;
      background-color:yellow;
  }

<div class="father">
    <div class="son">
  </div>

過渡

transition: 要過渡的屬性花費時間運動曲線什麼時候開始;

參數	說明
要過渡的屬性	想要變化的css屬性，寬度高度背景顏色內外邊距均可以。若是想要全部的屬性都變化過渡，寫一個all就能夠
花費時間	單位是秒（必須寫單位）好比0.5s
運動曲線	默認是ease(能夠省略)
什麼時候開始	單位是秒（必須寫單位）能夠設置延遲觸發時間默認是0s（能夠省略）

div
 {
    width: 200px;
    height: 100px;
    background-color: red;
    //能夠用逗號隔開，寫多個屬性
    transition: width .5s ease 1s,height .5s ease 1s;
    //能夠用all表明多個屬性
    //transition: all .5s 
  }
  
  div:hover{
        width: 400px;
  }

tips:動畫寫到自己上，誰作動畫給誰加

2d轉換translate

2D移動是2D轉換裏的一種功能，能夠改變元素在頁面中的位置，相似定位。

div {
    width:200px;
    height:200px;
     //x,y
    transform:translate(30px,40px);
    //橫向 
    transform:translateX(30px);
    //縱向
    transform:translateY(40px);
    /*
    這裏的50%就是100px 由於translate中的百分比單位是相對於自身元素的，盒子的寬度是200px
    */
    transform:translateX(50%);
 }

實際應用：垂直居中

.father {
     position:relative;
     width:400px;
     height:400px
 }
 
 .son {
     position:absolute;
     width:200px;
     height:200px;
     left:50%;
     top:50%;
     transform:translate(-50%,-50%)
     /*如下等價於以上transform
      margin-left:-100px; 
      margin-top:-100px; 
     */
 }

tips:

定義2D轉換中的移動，沿着X和Y軸移動元素。

translate最大的優勢：不會影響到其餘元素的位置。

translate中的百分比單位是相對於自身元素的translate(50%,50%)

對行內標籤沒有效果

2d轉換rotate

div {
     width:150px;
     //順時針旋轉45度
     transform:rotate(45deg)
 }

實際應用--小三角

div {
      width:249px;
      height:35px;
      border：1px solid #000;
  }
 
  div::after {
    content:"";
    position:absolute;
    top:8px;
    right:15px;
    width:10px
    height:10px;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    transform:rotate(45deg);
    transition:all 0.4s
 }
 
  div:hover::after {
    transform:rotate(225deg);
  }

設置轉換中心點

div {
    transform-origin:x y;
 }

實際應用--中心點的設置左下角旋轉

.div {
     width:200px;
     height:20px;
     border:1px solid pink;
     margin:100px auto;
     overflow:hidden;
 }
 
 div::before {
     content:"牛逼";
     display:block;
     width:100%;
     height:100%;
     background-color:red;
     transform:rotate(180deg);
     //左下角
     transform-origin:left bottom;
     transition:all 0.4s;
 }

 div:hover::before {
     //鼠標移動上去，還原
     transform:rotate(0deg);
 }

<div></div>

tips：

注意後面的參數x和y用空格隔開

x y 默認轉換的中心點是元素的中心點(50% 50%)

能夠給x y 設置像素或者方位名詞 (top bottom left right center )

2d轉換scale

縮放，顧名思義，能夠放大和縮小。

div {
      width:200px;
      height:200px;
      background-color:red;
      margin:100px auto;
      transform-origin:left bottom;
  }
  

  div:hover {
    /*
       1.裏面寫的數字不跟單位，就是倍數的意思,
       1就是1倍 2就是2倍
      */
     //transform:scale(x,y);
     //修改了寬度爲原來的2倍，高度不變。
     transform:scale(2,1)
     /*
       寬高同時放大
       transform:scale(2)
     */ 
    
     /*
       寬高同時縮小
       transform:scale(0.5)
     */ 
  }

tips:

咱們能夠進行縮小小於1 就是縮放

不影響其餘的盒子，之前的控制寬、高會影響其餘盒子。

能夠設置縮放的中心點。

實際運用--圖片放大

div {
     //不讓放大時超出範圍
     overflow:hidden
     float:left;
     margin:10px;
 }
 
 div img {
     transition: all .4s
 }
 
 div img:hover {
     transform:scale(1,1);
 }

2D旋轉綜合寫法

div {
      width: 200px;
      height: 200px;
      background-color: pink;
      transition: all .5s;
  }
 
 div:hover {
  /*咱們同時又位移和其餘屬性，咱們須要把位移放到最前面。
  
  */
    transform: translate(150px,50px) rotate(180deg);
 }

tips:

同時使用多個轉換，其格式爲: transform:translate() rotate() scale()...等

其順序會影響轉換的效果。(先旋轉會改變座標軸方向)

當咱們同時又位移和其餘屬性的時候，記得要將位移放到最前。

動畫(animation)

動畫是css3中最具備顛覆性的特徵之一，可經過設置多個節點來精確控制一個或一組動畫，經常使用來實現複雜的動畫效果。
相比較過濾,動畫能夠實現更多變化，更多控制，連續自動播放等效果。

動畫的基本使用
- 先定義動畫
- 再使用(調用)動畫

/*需求：想頁面一打開，一個盒子就從左走到右邊
1.定義動畫
*/
 
 @keyframes move {
  /*開始狀態 可省略*/
   0% {
     transform:translate(0,0 );
   }
  /*第一狀態*/    
   25% {
     transform:translate(1000px,0);
    }
  /*第二狀態*/   
    50% {
    transform:translate(1000px,500px);
    }
  /*第三狀態*/ 
    75% {
     transform:translate(0,500px);   
    }
  /*結束狀態 第四*/
   100% {
    transform:translate(0,0);
   }  
 
 }
 
 div {
    width: 200px;
    height: 200px;
    background-color:pink;
    /*2.調用動畫*/
    /* 動畫名稱 */
    animation-name:move;
    /* 動畫持續時間 */
    animation-duration:10s
 }

tips:

0% 是動畫的開始，100%是動畫的完成。這樣的規則就是動畫序列。

在@keyframes中規定某項css樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。

動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果您能夠改變任意多的樣式任意多的次數。

請用百分比來規定變化生的時間，或用關鍵詞"from"和"to"，等同於0%和100%

百分比就是總的時間(咱們這個案例10s)的劃分25%*10=2.5s

動畫經常使用屬性

div {
     width: 100px;
     height: 100px;
     background-color:pink;
     /*動畫名稱*/
     animation-name:move;
     /*持續時間*/
     animation-duration:2s;
     /*運動曲線*/
     animation-timing-function:ease;
     /*什麼時候開始*/
     animation-delay:1s;
     /*重複次數 iteration 重複的 count 次數 infinite 無限  */
     animation-iteration-count:infinite;
     /*是否反方向播放 默認的是 normal 若是反方向 就寫alternate*/
     animation-direction:alternate;
     /*動畫結束後的轉態 默認是backward 回到起始轉態 咱們可讓他停留在結束狀態   forwards*/
     animation-fill-mode:forwards;
 }

 div:hover {
  /*鼠標通過div 讓這個div 中止動畫，鼠標離開就繼續動畫*/
  animation-play-state:paused;
 }

屬性	描述
@keyframes	規定動畫
animation	全部動畫屬性的簡寫屬性，除了animation-play-state屬性
animation-name	規定@keyframes動畫的名稱(必須的)
animation-duration	規定動畫完成一個週期所花費的秒或毫秒，默認是0.(必須的)
animation-timing-function	規定動畫的速度曲線，默認是"ease",還有linear,是勻速的意思
animation-delay	規定動畫什麼時候開始，默認是0
animation-iteration-count	規定動畫被播放的次數，默認是1，還有infinite:無限
animation-direction	規定動畫是否在下一週期逆向播放，默認是"normal","alternate"逆播放
animation-play-state	規定動畫是否正在運行或暫停，默認是"running",還有"paused"
animation-fill-mode	規定動畫結束後狀態，保持forwards,回到起始backwards

動畫簡寫

animation: 動畫名稱持續時間運動曲線什麼時候開始播放次數是否反方向動畫起始或者結束的轉態;

div {
animation:move 2s linear 0s 1 alternate forwards  
}

/*省略寫法--順序除了持續時間必定在什麼時候開始以前,其餘隨意*/

div {
 animation: move 2s   linear alternate forwards 
}

tips:

以上簡寫，要用空格隔開，持續時間必定在什麼時候開始以前。

前面2個屬性必定要寫，其餘能夠省略，順序不定

實際應用--波紋(大數據地圖地點)

map {
     position: relative;
     width: 747px;
     height: 616px;
     //中國地圖
     background:url(media/map.png) no-repeat
     margin 0 auto;
 }
 
 .city {
   position: absolute;
   top:100px;
   right:100px;
   color:#fff;
 }
 
 
 .dotted {
    width: 8px;
    height: 8px;
    background-color: #09f;
    border-radius: 50%;
 }

 .city div[class^='pulse'] {
   /*保證咱們小波紋在父盒子裏面水平垂直居中，放大以後就會中心向四周發散*/
    position:absolute;
    top:50%
    left:50%
    transform:translate(-50%,-50%);
    width: 8px;
    height: 8px;
    //有陰影波紋會更好看
    box-shadow: 0 0 12px #009dfd; 
    border-radius:50%;
 }
 
 .city div.pulse2 {
    animation-delay:0.4s;
 }

 .city div.pulse3 {
    animation-delay:0.8s;
 }


 @keyframes pulse {
    0% { } 
    70% {
     /*
     transform:scale(5);咱們不要用scale,由於他會讓陰影變大;
     */
     width:40px;
     height:40px;
     opacity:1;
    }
    100% {
     width:70px;
     width:70px;
     opacity:0;
    }
 }

<div class='map'>
 <div class='city'>
  <div class='dotted'></div>
  <div class='pulse1'></div>
  <div class='pulse2'></div>
  <div class='pulse3'></div>
 </div>
</div>

速度曲線細節

animation-timing-function:規定動畫的速度曲線，默認是"ease"

值	描述
linear	動畫從頭至尾的速度是相同的。勻速
ease	默認。動畫以低速開始，而後加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束
steps()	指定了時間函數中的間隔數量(步長)

/*需求：打字機效果*/
 div {
     overflow:hidden;
     width:0;
     height:30px;
     background-color:pink;
     white-space:nowrap;
    /*steps 就是分幾步來完成咱們的動畫 有了steps 就不要再寫 ease 或者linear了*/     
     animation:w 4s steps(10) forwards;
     
 }
 
 @keyframes w {
 
     0% {
         width: 0;
     }
     
     100%{
         width: 200px;
     }
 }

/*需求：奔跑的小熊
   1.準備小熊的跑的各類動做背景圖，放在一張裏面(類型精靈圖)
   2.用背景圖的position,改變位置,讓它呈現有跑在一個盒子中的感受。 */

 body {
    background-color: #ccc;
 }

 div {
    position:absolute;
    width: 200px;
    height: 100px;
    background: url(media/bear.png) no-repeat;
     /*咱們元素能夠添加多個動畫，用逗號分隔*/
    animation: bear 1s steps(8) infinite, move 3s forwards;
 }
 
 @keyframes bear {
     0% {
       background-position:0,0;
     }
     
     100%{
       background-position:-1600px 0
     }
 }
 
 @keyframes move {
 
    0% {
       left:0;
     }
 
    100%{
      /*left 50% 會多跑寬度的一半的距*/
       left:50%;
       //margin-left:-100px;
       transform:translateX(-50%)
    }
 }

tips:咱們元素能夠添加多個動畫，用逗號分隔

3D轉換

三維座標系

三維座標系其實就是指立體空間，立體空間是由3個軸共同組成的。

x軸：水平向右 注意：x右邊是正值，左邊是負值

y軸：垂直向下 注意:y下面是正值，上面是負值

z軸：垂直屏幕 注意：往外面是正值，往裏面是負值

3D移動 translate3d

3D移動在2D移動的基礎上多加了一個能夠移動的方向，就是z軸方向。

/*語法:transform:translate3d(x,y,z)*/ ;
 div {
     width: 200px;
     height: 200px;
     background-color:pink;
    /*translateZ(100px) 向外移動100px (向咱們的眼睛來移動的)*/ 
    transform:translate3d(100px,100px,100px)
   }

tips:

transform:translateZ(100px):僅僅是在Z軸上移動,translateZ通常用px單位

xyz是不能省略的，若是沒有就寫0;

3D透視 perspective

透視寫在被觀察元素的父盒子上面的，是一種觀察的距離，Z軸越大(正值) 咱們看到的物體就越大，近大遠小;

body {
     //有了透視,  transform:translateZ 才管用，透視越小，看到的物品越立體，盒子越大
     perspective: 500px;
  }
  
  div {
     width: 100px;
     height: 200px;
     background-color: pink;
     margin: 100px auto;
     transform:translateZ(0)
  }

3D旋轉 rotateX

body {
     perspective: 300px;
  }
  
 img {
   display: block;
   margin: 100px auto;
   transition: all 1s;
 }
 

 img:hover {
    //transform:rotateX(180deg);
    //transform:rotateY(180deg);
    //transform:rotateZ(180deg);
    //參數 x,y,z 那個有值就是沿着該軸旋轉，最後一個表示旋轉的角度。   
    //transform:rotate3d(1,0,0,45deg);
    //沿着x和y的矢量即沿着對角線旋轉45deg
    transform:rotate3d(1,1,0,45deg);
 }

<img src="media/pig.jpg">

tips: 對於元素旋轉的方向的判斷可根據左手準則

X軸旋轉: 左手的手拇指，指向x軸的正方向(指向右手邊的方向)，其他手指的彎曲方向就是該元素沿着x軸旋轉的方向。

Y軸旋轉：左手的手拇指指向y軸的正方向(指向本身的方向)，

其他手指的彎曲方向就是該元素沿着y軸旋轉的方向(正值)。

3D呈現transfrom-style
- 控制子元素是否開啓三維立體環境。
- transform-style:flat子元素不開啓3d立體空間默認的
- transform-style:preserve-3d;子元素開啓立體空間
- 代碼寫給父級，可是影響的是子盒子

/*
  需求:兩個盒子交叉(呈十字)立體旋轉
 */
 
 body{
    //body是div的爺爺級，也算是父級。
    perspective:500px;
 }

 .box {
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transition:all 2s;
    /*讓子元素保持3d立體空間環境*/
    transform-style:preserve-3d;
 }
  
 .box:hover {
    transform:rotateY(60deg);
 }   
  
 .box div {
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     background-color:red;
 }
 
 .box div:last-child {
     background-color:blue;
     transform:rotateX(90deg);
 }

<div class="box">
    <div></div>
    <div></div>
  <div>

實際案例--兩面翻轉的盒子

body {
      //透視
      perspective:400px;
   }
 
  .box {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 100px auto;
      transition: all .6s;
      /*讓子元素保持3d立體空間環境*/
      transform-style:preserve-3d;
  }
  
  .box:hover {
     transform:rotateY(180deg);
  }

  .front,
  .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      font-size: 30px;
      color: #fff;
      text-align: center;
      line-height: 300px;
  }

  .front {
      background-color:red;
      z-index:1;
  }
  
  .back {
      background-color:blue;
      transform:rotateY(180deg);
  }

<div class="box">
  <div class="front">我是正面</div>
  <div class="back">我是負面</div>
 </div>

//box父盒子裏麪包含先後兩個子盒子，box是翻轉的盒子 front是前面盒子，back是後面盒子。

雜項

css書寫規範

建議遵循如下順序

1.佈局定位屬性: display/position/float/clear/visibility/overflow(建議display第一個寫，畢竟關係到模式)
 2.自身屬性:width/height/margin/padding/border/background
 3.文本屬性:color/font/text-decoration/text-align/vertical-align/white-space/break-word
 4.其餘屬性(css3):content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient

示例

div {
    //佈局
    display:block;
    position:relative;
    float:left;
    //自身屬性
    width:100px;
    height:100px;
    margin:0 10px;
    padding:20px 0;
    //文本屬性
    font-family:Arial,'Helvetica Neue', Helvetica,sans-sefif;
    color:#333;
    //css3新增的
    background:rgba(0,0,0,.5);
    border-radius:10px;
 }

頁面佈局總體思路

爲了提升網頁製做的效率，佈局時一般有如下的總體思路

必須肯定頁面的版心(可視區/安全距離)，咱們測量可得知。
分析頁面中的行模塊，以及每一個行模塊中的列模塊。其是頁面佈局第一準則。
一行中的列模塊常常浮動佈局，先肯定每一個列的大小，以後肯定列的位置，頁面佈局第二準則。
製做HTML結構，咱們仍是遵循，先有結構，後有樣式的原則，結構永遠最重要。

網頁佈局總結

經過盒子模型，清楚知道大部分html標籤是一個盒子。
經過css浮動、定位可讓每一個盒子排列成爲網頁。
一個完整的網頁,是標準流、浮動、定位一塊兒完成佈局的，每一個都有本身的專門用法。

標準流：

可讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標準流佈局。

浮動：

可讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動佈局。

定位：

定位最大的特色是有層疊的概念，就是可讓多個盒子先後疊壓來顯示。若是元素自由在某個盒子內移動就用定位佈局。

html5的新特性

語義化標籤

<header></header>
 <article></article>
 <aside></aside>
 <details></details>
 <figcaption></figcaption>
 <footer></footer>
 <hgroup></hgroup>
 <main></main>
 <menu></menu>
 <nav></nav>
 <section></section>
 <summary></summary>

音視頻標籤

<audio> </audio>
 <video> </video>

新增的input類型

屬性值	說明
type="email"	限制用戶輸入必須爲Email類型
type="url"	限制用戶輸入必須爲URL類型
type="date"	限制用戶輸入必須爲日期類型
type="time"	限制用戶輸入必須時間類型
type="month"	限制用戶輸入必須月類型
type="week"	限制用戶輸入必須周類型
type="number"	限制用戶輸入必須數字類型
type="tel"	手機號碼
type="search"	搜索框
type="color"	生成一個顏色選擇表單

新增的表單屬性

屬性	值	說明
required	required	表單擁有該屬性表示其內容不能爲空，必填
placeholder	提示文本	表單的提示信息，存在默認值將不顯示
autofocus	autofocus	自動聚焦屬性,頁面加載完成後自動聚焦到指定表單
autocomplete	off/on	當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。默認已經打開，如autocomplete="on",關閉autocomplete="off"須要放在表單內，同時加上name屬性，同時成功提交
multiple	multiple	能夠多選文件提交

參考資料

https://www.bilibili.com/vide...

css的知識點概括與總結

前言

基礎

字體設置

字體粗細

font 綜合設置

選擇器

css複合選擇器

首行縮進

字間距和單詞間距

顏色半透明(css3)

文字陰影(css3)

塊級元素

行內元素

行內塊元素(特殊的行內元素)

顯示模式轉換

單行文字垂直居中

背景圖片

css的三大特性

盒子模型

圓角邊框(css3)

盒子陰影(css3)

文字陰影(css3)

浮動

ps切圖

定位

定位疊放次序

顯示隱藏元素

overflow

高級應用

精靈圖(雪碧圖)

字體圖標

css 三角

用戶界面

vertical-align

文字溢出省略號顯示

佈局小技巧

css3新特性

屬性選擇器

結構僞類選擇器

僞元素選擇器

css3盒子模型

過渡

2d轉換translate

2d轉換rotate

2d轉換scale

動畫(animation)

3D轉換

雜項

css書寫規範

頁面佈局總體思路

網頁佈局總結

html5的新特性

參考資料

推薦

未完待續~~~