參加工作了感觸就特別多了無論是心態和情感上還是學習和工作上感觸多且深刻。每次在技術總結完以後我基本都會寫一篇生活中學習和工作給自己心態的變化的記錄（類似於日記）。發現最近特別想學習了，真的當你瞭解的東西多了，想進一步深入研究的時候就會發現自己會的東西真的好少，原本計劃每個月寫2篇技術總結的（沒2週一篇），但這個星期接觸了一些新的東西，急切的想記錄和與人分享，所以即使佔用週末的時間我也想寫一下。
首先還是總結一些本週遇到的的問題和解決的方法吧：
漂浮：
漂浮：讓一個div（就以div爲例）漂浮在領一個div上，位置自選（例如左邊，右邊），
實現方法：首先在佈局上被漂浮的div應該嵌套在主要的div裏面，讓外面（主要）的div定位方式爲，對象不可疊加（我個人稱爲浮動定位即position: relative;），然後裏面（被浮起來）的div相對於外面的（住div絕對定位即position: absolute;），
設置：外面（主要）的div（也就是下面的div）的 z-index: 0;設置浮動（也就是上面的）div的 z-index: 1;再設置對呀div的寬度和高度，然後通過left、top設置左邊距，上邊距，（不能用左浮動或右浮動，因爲絕對定位脫離文檔流，不存在定位方式），讓其達到想要的效果
具體方法：
<divclass="right2_2"><divclass="right2_absolute1"></div></div>
.right2_2 {
float: left;
width: 160px;
height: 102px;
position: relative;
z-index: 0;
border:1px solid #000;
}
.right2_absolute1 {
position: absolute;
z-index: 1;
width: 61px;
height: 60px;
top: 0px;
left: 100px;
background: url(./../../images//140611/show_30.png) left top no-repeat;
}
關於一些常用的技術和經典的解決方法如果在上次總結中出現過，這這裏就不在囉嗦了。
發現：
原來div在不浮動的情況下是處於一種類似於自由的狀態下，所以自動的高度及通過樣式設置div的高度爲自動(height:aoto)是沒有用的，所有在佈局的時候默認div左浮動比較好，讓它在佈局的時候通過寬度自動塌陷來達到想要的效果，這樣的div處於浮動的狀態，div的高度會隨着裏面的內容（控件和文字）來自動增長，而不會因爲裏面的內容的高度大於div自身的高度而出現溢出的現象，如果有需求當然也可以手動清除浮動。當然自己的一些小總結。
疑點：
今天（2014/6/16）發現了一個特別有趣的現象：IE居然和火狐谷歌的顏色有差距。就是一淺綠色圖片爲背景的div，然後在大的div裏面放以藍色爲主體淺綠色爲邊框的（藍色和淺綠色交錯）的的圖片爲背景的div，在谷歌和火狐下看見的是一塊很順眼的淺綠色裏面嵌套一個藍色的場景，結果到IE下看見的卻是那一個淺綠色的類似邊框的地方變成了藍色。
切圖
還有一點差點忘了，不是與前端佈局相關的，但我想說一些，就是圖片透明的問題，以及切圖過程的一些細節問題，在此談一些工作經歷。剛開始切圖的時候以爲只有把圖片切下來就可以了，大小（幾個像素）不重要，在佈局中也可以通過幾個補丁就可以達到想要的效果。的確在一些要求不是很嚴格的（特別是頁面寬度固定的頁面）這樣做的確一點問題都沒有。但我最近做響應式設計的時候發現這是一個很嚴重的問題（有時候一個像素也能讓你的整個頁面佈局亂成一團）我是切身體驗過了的，還有就是切圖的時候最好吧不需要的（例如不規則的圖片多餘的：一個正方形的圖片，只有其中的一半（一個三角形），那另一半（三角形）就設置爲透明），吧所以的圖片切好以後再把所有的背景和圖層 全部去掉（隱藏） 這樣切出來的圖片多餘的部分全部透明。
總結：切圖的時候確保像素精確（精確到1個像素），也許剛開始你不會覺得，但當你做網頁一段時間後你會發覺這樣能給你帶來很大的幫助，不要切多餘的（比如你要吧切的圖片黨做背景，控件（或容器）高度爲30px；而這個圖自身大小爲18x18上下各有6個像素的空白，此時千萬不要切成18x30,應該就切成18x18）
評價：也許當你切成18x30的時候覺得這樣很合適，的確這樣和合適 ，但當控件大小發生變化的時候呢，特別是響應式設計裏面要是隻有5到10個像素的變化（特別是只有高度）就沒必要重新做一直圖片了，在背景圖片設置的時候垂直居中，就會自動居中，要是高度爲30就會看見上面有6個像素的空白，而主要的部分會有6個像素看不見，切圖精確，不切多餘的，有利於拓展，而且這樣切的時候也不糾結。再次強調一點要精確不能多一個像素。也許在一般的佈局中不會體驗的這點，只有經歷過響應式設計的人才能體會。
今天主要是想說一下響應式設計的：
關於響應式設計最重要的一點（兩點吧），就是設置最大寬度和最小寬度（max-width: 720px;min-width:320px;）對於手機頁面我們基本不管頭部和底部，主要管主體部分的最大和最小寬度 具體：
.main{
height:auto;
max-width:720px;
min-width:320px;
margin:0pxauto;
}
一般的手機的屏幕最小不會小於320 ，所有這裏吧主體部分控制在320到720之間，要是屏幕小於320的時候就按照320的寬度計算（此時可以左右滑動），當大於720的時候左右兩邊多出的部分會成空白，主體居中。
最常用的的控件圓角div和圓角按鈕（此時不是button而是a標籤）如果是div（圓角div），只需要對div設置（border-radius: 10px; border:1px solid #ccc;）屬性border-radius的值表示控件（div）圓角的程度。border-radius屬性是不允許使用負值的，當其中一個爲0時，則該值對應的角爲矩形，否則爲圓角。border:1px solid表示給原件div加一個邊框，如果不加邊框圓角就（貌似看不見效果，當然也可以設置背景顏色），不過最多的嘴經典的不是給div設置圓角，而是給a標籤設置圓角，在手機端就類似於按鈕，首先吧a標籤變爲塊狀，然後設置寬度，此時的a標籤就像div一樣可以設置各種樣式包括浮動，補丁背景顏色，背景圖片，而且還可以點擊鏈接到想要的頁面
.main2 a {
display:block;
text-decoration:none;
width:49%;
text-align:center;
font-size:26px;
border-radius:10px;
border:1px solid #c6c3c3;
}
經驗總結：對於響應式設計最難的不是佈局，而是調試，適應多種屏幕的寬度，這裏說一些最常見的例子：
屏幕寬度變化：字體大小肯定會變，寬度不要用具體的像素（基本不能用具體寬度，除了一些小的補丁外。比如5個像素的外補丁，可以用具體的數字外，），圖片大仙肯定要變的，最好吧圖片設置爲背景，這樣即使控件變小也不會導致佈局亂，最多看到的圖片（背景圖片）不完整，所有對圖片的大小（即使是1像素）要求比較高，還有基本每張圖片要做三張，大小爲（一最小的圖片爲1）一張爲1，一張爲1.5，一張爲2（例如：18x18、24x24、36x36），
然後來適應不同的屏幕寬度，從720到320中途設置2個節點（基本是320-430,430-580,580-720，我是這樣設置的）字體最後同意設置，讓後統一改變，
body {
font-size: 18px;
color: #909090;
background-color: #f7f7f7;
}
@media screen and (max-width:580px) {
body {
font-size: 14px;
}
}
@media screen and (max-width:430px) {
body {
font-size: 12px;
}
}
除了字體外其餘的耶可以這樣更改，比如外補丁：第一個階段（最多的時候）爲15個px，第二個階段只需要該表裏面的值爲10，最小的階段該爲5；
.ml_15{
margin-left:15px;
}
.ml_15{
margin-left:10px;
}
.ml_152
margin-left:1px;
}
總結改善：如果把握的好補丁最好也設置爲百分百（我嘗試過，發現很不好把握，當然一些簡單的比例還是可以的）比如2個div並列，中間一點縫隙，設置2個div的跨度爲48%，然後設置左右補丁爲1%，正好就是100%；48*2+2*2=100；呵呵，或者31*3+3*2=97，此時每個div與div之間的距離就2%的間隙；而且不會坍塌。當然這是一些簡單的佈局，有時候需要左浮動，右浮動，或則div裏面嵌套div的時候就需要很複雜的去算，而且算了還很容易算錯，只有慢慢的調試。
最麻煩的就是圖片的處理：
基本每個按鈕（圓角a標籤）都會加上至少一個圖片，讓後再加上幾個文字，然後庫點擊，如果是圖片當屏幕改變的時候圖片大小肯定要改變的，這個處理起來都不是很麻煩。還有一種肯坑爹的就是把一張圖片設置爲一個按鈕（圓角a標籤）背景，此時就不是該圖片那麼簡單了，因爲圖片是背景，如果按鈕（圓角a標籤）的寬度和高度變小，而圖片不變，很難看的，所以基本的方法（也是唯一的方法，當然不考慮腳本的情況下）就是換背景圖片
.selectChang {
background: url(../images/icon/icon_select75x75.png) center centerno-repeat;
width: 75px;
height: 74px;
}
@media screen and (max-width:580px) {
.selectChang {
background: url(../images/icon/icon_select53x53.png) center centerno-repeat;
width: 53px;
height: 53px;
}
}
@media screen and (max-width:430px) {
.selectChang {
background: url(../images/icon/icon_select33x33.png) center centerno-repeat;
width: 33px;
height: 33px;
}
}
補充一點，如果是手機端的圓角是border-radius屬性就可以隨意實現圓角效果。
但如果是pc端的圓角還考慮瀏覽器的兼容問題
Chrome瀏覽器需要寫成-webkit-border-radius;Firefox瀏覽器則要寫成-moz-border-radius;兼容的示例代碼如下：
.div{
Border-radius:10px;
/*firefox瀏覽器*/
-moz-border-radius:10px;
/*webkit內核瀏覽器*/
-webkit-border-radius:10px
}
。