css3和H5

在css中盒模型被分爲兩種，一種是w3c標準模型，另外一種是IE傳統模型。它們的相同之處就是對元素計算尺寸的模型。它們的不一樣之處就是計算方法不同。

CSS3中box-sizing屬性
content-box

　　默認值，其讓元素維持W3C的標準盒模型，也就是說元素的寬度和高度（width/height）等於元素邊框寬度（border）加上元素內距（padding）加上元素內容寬度或高度（content width/ height），也就是element width/height = border + padding + content width / height
border-box
　　從新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統的盒模型（IE6如下版本和IE6-7怪異模式），也就是說元素的寬度或高度等於元素內容的寬度或高度。從上面盒模型介紹可知，這裏的內容寬度或高度包含了元素的border、padding、內容的寬度或高度（此處的內容寬度或高度＝盒子的寬度或高度—邊框—內距）。

CSS中的動畫

　　Animation:name duration timing-function delay iteration-count direction

　　Animetion-play-state:paused（動畫中止）

  Animation-fill-mode:forwards;（動畫完成停留末尾，不返回原來的位置）

  語法：@-webkit-keyframes 動畫名 {0{}100%{}}

背景的透明度

　　Opacity:0-1;

　　標準瀏覽器的寫法，內容字體跟着一塊兒有透明度。

　　Background:rgba(255,2,2,.3) 標準瀏覽器擁有的，可是元素內容不跟着一塊兒透明。

　　在ie8一下 透明度的寫法 filter:alpha(opacity=30);

CSS3動畫性能的問題
　　在作CSS3動畫的時候，若是使用 gpu 渲染圖形，能夠減小 cpu 的消耗，提升程序的性能。
　　當咱們使用動畫改變圖片的left值時候，一般會使用margin-left的屬性，可是margin-left屬性的時候會觸發頁面的重　繪和重排。當咱們使用css3新屬性transform 來代替傳統的 margin-left 來改變元素位置的時候，不會觸發任何的重繪。並且會觸發 gpu 來幫助頁面的排版。

移動佈局

　　1.移動設備 手機 和ipad

　　安卓系統 ios系統

　　安卓系統 內置瀏覽器是谷歌  ios內置 safari瀏覽器 他們的內核都是webkit，不考慮兼容性，須要考慮的是安卓和ios的區別。

 

　　2.佈局

 

　　設備寬度  設備的實際大小 設備的分辨率 廠家給的

 

　　頁面的大小  設計稿上的大小

 

　　瀏覽器的視口 瀏覽器自帶的用document.documentElement.clientWidth查看，在移動設備上若是不作視口處理通常默認是980

 　　彈性佈局

　　1.分兩部分 彈性父級 彈性子元素

　　2.給父級設置display:flex或inline-flex

　　Flex-direction 指定彈性盒子中子元素的排列方式

　　Display屬性 flex 指定父元素爲彈性盒模型 display:flex;

　　內部元素按行排列，變成了行級塊元素

　　Flex屬性 設置彈性盒的子元素如何分配空間 屬性值是數字

　　flex:1;

　　Flex-direction 指定彈性盒中的子元素的排列方式

 　　流失佈局

　　  百分百佈局

　　Rem佈局

　　Rem是單位，由根節點的字體大小來決定。Html就是根節點

　　1rem=html中font-size的大小

　　響應式佈局

　　在不一樣的設備上，頁面的佈局是不同的，這種佈局方式就是響應式佈局由媒體查詢實現的。@media

　　@media 能夠定義視口 能夠定義寬高 能夠定義dpr 能夠定義設備朝向

　　語法  @media mediatype(設備類型) and (property屬性) {

　　Css樣式

　　}

　　設備類型 scroll 屏幕設備  all 表明全部

　　Property：width device-pixel-ratio