目錄(?)
[-]
寫在前面
css樣式的寫法
外部樣式表
內部樣式表
內嵌樣式
css樣式表和js檔案位置
iframe與變換縮放
背景漸變
輸入框組
時間選擇
自從入了前端的坑，坑是越來越大，快把自己埋了。現在又開始搞樣式了。
css樣式的寫法有這麼3種，下面我們一一介紹。
鏈入外部樣式表是這樣的，一般放在裡：
href="mystyle.css"
rel="stylesheet"
type="text/css"
media="all">…… head>
mystyle.css是自己寫的css檔案，內部大概是長這樣的：
.text-center
.vw.contentstyle
class="mybackgrounds"
id="maindiv">
內部樣式表大概長這樣：
…… type="text/css">
hr p
body
style> …… head>
style="color: sienna;margin-left: 20px;"> 這是乙個段落 p>不過這三種樣式也是有優先順序的：內聯式 > 嵌入式 > 外部式，但是嵌入式》外部式有乙個前提：嵌入式css樣式的位置一定在外部式的後面。
其實總結來說，就是–就近原則（離被設定元素越近優先級別越高）。
一般來講引用的外部js放在下面，外部css放在上面這是習慣，其原因如下：
1. js 有可能會修改 dom.
css放在前端是頁面渲染時首先是根據dom結構生成乙個dom樹然後加上css樣式生成乙個渲染樹，如果css放在後面可能頁面會出現閃跳的感覺，或者是白屏或者布局混亂樣式很醜直到css載入完成。
使用iframe的時候，最大的好處就是內網頁不用自己寫了，可以引用，但是通常會有乙個問題，因為iframe有可能只是我們自己網頁的一部分，那麼引用網頁有可能是乙個完整的網頁，那麼這樣子的話，會造成顯示上的問題。那這時候，其實使用縮放來做，可以做乙個折中的方案，畢竟原網頁不是你想改就能改的。
縮放也是有2種的，一種是zoom，另一種是css3的transform:scale，那麼他們有什麼不同呢？
首先，他們的**不同：
還在幾年前，zoom還只是ie瀏覽器自己私有的玩具，但是，現在，除了firefox瀏覽器，其他，尤其chrome和移動端瀏覽器已經很好支援zoom屬性了，注意，雖然chrome/safari瀏覽器支援了zoom屬性，但是，其實zoom並不是標準屬性。
而transform則是css3標準，明明確確寫入規範的。從ie9+到其他現代瀏覽器都支援。
其次，是他們寫法不同：
來看一下他們如果都是縮放一半，應該怎麼寫：
.zoom-half
.scale-half
最後是他們的效果不同：
zoom縮放是相對於左上角的，而scale預設是相對於元素的中心點縮放的，scale可以通過設定transform-origin來改變縮放的相對位置，當設定transform-origin: 0 0時，scale縮放可以達到和zoom縮放相似的結果。
總而言之還是有一些差異的：
瀏覽器相容性。ie全族/chrome/safari和ie9+現代瀏覽器的差別。
控制縮放的值不一樣。zoom更全面，但是不能是負數，只能等比例控制；而scale雖然只能是數值，但是能負數，可以只控制1個維度。
zoom的縮放是相對於左上角的；而scale預設是居中縮放；
zoom的縮放改變了元素佔據的空間大小；而scale的縮放佔據的原始尺寸不變，頁面布局不會發生變化；
zoom和scale對元素的渲染計算方法可能有差異。
對文字的縮放規則不一致。zoom縮放依然受限於最小12畫素中文大小限制；而scale就是純粹的對圖形進行比例控制，文字50%原來尺寸。
渲染的效能差異明顯。
綜合上述原因，iframe應當使用的是transform：scale放縮更好一些。
背景漸變這個應該簡單的不能再簡單了，簡單來講就是長這樣的：
.mybackgrounds
輸入框組就像之前提到的那樣，boostrap裡提供了乙個簡單的樣式，但是還算美觀。具體的寫法如下：
class="form-group">
class="input-group ">
id="hotwordspan"
class="input-group-addon">
熱點詞彙
"textbox2"
class="form-control"runat="server">
div>
div>
尤為值得注意的是，class="form-control"輸入框的這個class要新增，不然的話，輸入框會比前乙個span小上一部分，因此必須加上這個。
同樣的，
這個可以換成其他的元件，包括像下拉框、選擇框、輸入框等等都可以。
時間框也是非常常見的元件，我們來看一下長什麼樣：
class="form-group">
class="input-group date form_date"
data-date=""
data-date-format="dd mm yyyy"
data-link-field="dtp_input2"
data-link-format="yyyy-mm-dd">
class="input-group-addon">選擇日期span>
id="textbox1"
class="form-control"
runat="server">
asp:textbox>
class="input-group-addon">
class="glyphicon glyphicon-remove">
span>
span>
class="input-group-addon">
class="glyphicon glyphicon-calendar">
span>
span>
div>
type="hidden"
id="dtp_input1"
value="" />
div>
$('.form_date').datetimepicker();href="css/bootstrap.min.css"
rel="stylesheet" />
href="css/bootstrap-datetimepicker.min.css"
rel="stylesheet"
media="screen" />
乙個前端會經常遇到的問題
從乙個前端經常會遇到的問題 從如何監聽fetch請求說起fetch url then res const myfetch window.fetch 到redux最精髓的中介軟體原始碼compose函式function add1 str function add2 str function add3 ...
乙個前端小白的面試之路
第一次寫自己的部落格，居然是寫自己的職業，哈哈，算是一種緣分吧，只是想講講自己的面試之路 想來自己的第一次面試也不是自己的職業，而是做兼職，我還清晰的記得是去某飲料廠裝箱。那是在學校的貼吧裡面看見了招聘，想著反正寒假也沒啥事，就去試試，面試也沒什麼技術含量，當然，只是去當苦力的，手腳和心智健全就應該...
開放API好用麼 對於乙個小團隊來說
開放的api是個好東西 從google,facebook,twitter 到國內的各種sns,微博站點,它們中的絕大部分都有一套基於http xml json的開放api。靠這些開放api,乙個簡單的手機客戶端也能做很多事情，如果配合自己的伺服器程式,開發者很快就可以推出一套低成本的客戶端 網路服務...