**查詢
彈性布局
多列布局
2.3邊框
2.4漸變背景：
2.5背景美化
3.1過度
3.2動畫
3.3平移和縮放變換
3.4旋轉和傾斜變換
4.1遊戲**
1、面對不同解析度裝置時，靈活性較強。
2、能夠快捷解決裝置顯示適應問題。』
1、相容各種裝置，工作量大，效率低下。
2、****累贅，會出現隱藏無用的元素，載入時間長。
3、響應式設計是一種折中性質的設計解決方案，因多方面因素而達不到最佳效果。
4、一定程度上改變了**原有的步聚結構，會出現使用者混淆。
1、標籤設定瀏覽器視口寬度。
1、裝置的寬和高 2、渲染視窗的寬和高 3、裝置的手持方向
4、畫面比例 5、裝置比例 6、物件顏色或顏色列表
7、裝置的解析度
例項：方法一：
@media all and(max-width:1024px)
@media all and(max-width:768px)
方法二：
1、彈性布局，也叫伸縮盒子或彈性盒布局。為display屬性新增了新增：flex，並定義了一些新的屬性。可以建立對瀏覽器視窗響應良好的流動頁面。
2、一般有彈性布局的容器和彈性布局伸縮專案組成。
(1)、容器值採用彈性布局的dom元素。
(2)、伸縮專案指的是容器中包含的子dom元素。
三要素：
(1)、彈性基準（display：flex;）
(2)、彈性方向(flex-direction:row;)
(3)、是否換行(flex-wrap:wrap;)
屬性：1、彈性顯示順序：order:1;
2、彈性基準：flex-basis:0%;
3、伸縮比例：flex-sherink:1;
3、擴充套件比例：flex-grow:1;
如：flex:1 1 auto;
4、主軸對齊：
（1）、justify-context:flex-end
（2）、針對內容對齊：justify-content:space-around;
5、垂直排列：flex-direction：column;
設定列數： column-count：3；
由瀏覽器自動調整列寬：column-fill：balance；
列與列之間的樣式：column-rule：medium solid black；
列與列之間的距離：column-gap：10px；
當過長時隱藏：overflow：auto；
邊框：border:solid 100px;
邊框：border-image:url() 100 stretch;
注：stretch表拉伸；round表環繞；repeat表平鋪
一、線性漸變：顏色沿著一條直線過度，從一種顏色到另一種顏色的平滑漸變。
linear-gradient([[|to],]?[,]< color-stop >+)
二、徑向漸變：指以乙個點為中心向四周擴散的漸變。
redial-gradient(設定漸變中心，漸變形狀，漸變大小，起始顏色值，中心顏色值)
background-clip和background-origin屬性值如下：
border-box：在邊框盒子內部繪製背景顏色和背景
padding-box：在內邊距盒子內部繪製背景顏色和背景
content-box:在內容盒子內部繪製背景顏色和背景
方式：設定位置：
background-origin：border-box或者padding-box或者padding-box；
剪下：background-clip：content-box或者padding-box或者content-box；
1、//返回後的動畫
strong
//最終效果
strong:hover
css原始碼：
.strong
.strong:hover
2、transition：all 5s ease 0.3s;
注：all表所有屬性； 5s表示動畫執行5秒； 效果為ease； 延遲0.3s
還有很多如：ease、ease-in、ease-out、ease-in-out
background：#ff3366;
定義：變換是使元素改變形狀、尺寸和位置的一種效果，通過css3變換能夠對元素進行移動、縮放、旋轉或扭曲。
變換使用transform屬性來實現。
平移是基於元素中心位置發生變化的。
使用方式：
translate(水平平移大小，垂直平移大小)；
translatex(水平平移大小)；
translatey(垂直平移大小)；
縮放變換包含scale(x,y)、scalex(n)和scaley(n)3個方法。
使用方法：
scale(水平縮放倍數,垂直縮放倍數)；（小於1表縮小大於1表放大）
scalex(水平縮放倍數); 或者 scaley(垂直縮放倍數);
也可以一起使用：
transform：scalex(水平縮放倍數) translatex(水平平移大小);
定義：旋轉變換使用transform屬性rotate函式實現，css3的旋轉變換是依靠角度變換的。用正值圍繞元素中心時順時針旋轉，用負值則逆時針旋轉。
使用transform-origin屬性指定旋轉變換的起點。預設狀態以中心為起點。
可以使用tranlate方法將元素的；原點(0,0)移動到什麼地方，就在什麼地方旋轉，所以先呼叫tranlate方法，再呼叫rotate方法。
在css3實現傾斜變換有以下實現方法：
(1)、skew(x-angle,y-angle)定義2d沿著x軸和y軸傾斜旋轉。
(2)、skewx(angel)就是將元素以旋轉基點為座標原點，沿x軸方向拉伸一定角度。
(3)、skewy(angel)就是將元素以旋轉基點為座標原點，沿y軸方向拉伸一定角度。
設定元素中心點：transform-origin:top left;（top、left表位置可以用百分比表示）
設定旋**transform：rotate(45deg);\設定角度不加deg表弧度
設定傾斜角度：transform：skew(25deg,25deg);或者 skewx(25deg);或者 transform：skewy(25deg);
設計三原則：化繁為簡(共同性)、化零為整(一致性)、化靜為動(靈活性)
首頁布局原則：先主體後細節。
頭部：header
中心部分：section
底部：footer
2、css樣式命名規則：
對於大型**的web頁面來說，組織和管理如此大量的css樣式**是乙個問題。二bem是現代大型專案中css**的組織方式。
bem通過css語義化的命名約定和css層的分離，將有助於css的可擴充套件性，效能的提高和**的組織管理。bem**於3各組成的英文首字母，分別是：塊(block)、元素(element) 修飾符(modifier)。
命名原則：
(1)、bem實體名稱全部是小寫字母或數字。名稱中的不同單詞用單個連字元(-)分隔。
(2)、bem元素名稱和塊名稱之間通過兩個下劃線(_)分隔。
(3)、布林修飾符和其所修飾的實體名稱之間通過兩個連字元(-)不使用名值對修飾符。
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...