對於一個小白來講，遇到的前端問題（2）

時間 2019-11-08

標籤對於一個來講遇到前端問題简体版

原文原文鏈接

1. 寫在前面

自從入了前端的坑。坑是愈來愈大，快把本身埋了。現在又開始搞樣式了。javascript

2. CSS樣式的寫法

CSS樣式的寫法有這麼3種，如下咱們一一介紹。css

1. 外部樣式表

鏈入外部樣式表是這種，通常放在<head></head>裏：前端

<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">…… </head>

當中mystyle.css是本身寫的CSS文件。內部大概是長這種：java

.text-center{ vertical-align: middle; text-align:center; display: table-cell; }
.vw { width: 50%; height: 50%; }
.contentstyle{ transform: scale(0.95); border-left-color:black;border-left-width:1px;border-left-style:solid; border-right-color:black;border-right-width:1px;border-right-style:solid; margin-top:-13px; }

引入的時候，經過class來引入。像如下這樣：web

<div class="mybackgrounds"  id="maindiv">

2. 內部樣式表

內部樣式表大概長這樣：bootstrap

<head> …… <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> …… </head>

3. 內嵌樣式

內嵌樣式通常是這樣子的：瀏覽器

<p style="color: sienna;margin-left: 20px;"> 這是一個段落 </p>

通常不推薦這第三種這種，通常使用第一種寫法。easy管理，也便於重用。markdown

只是這三種樣式也是有優先級的：內聯式 > 嵌入式 > 外部式，但是嵌入式>外部式有一個前提：嵌入式css樣式的位置必定在外部式的後面。app

事實上總結來講。就是–就近原則（離被設置元素越近優先級別越高）。wordpress

3. CSS樣式表和Js文件位置

通常來說引用的外部js放在如下。外部css放在上面這是習慣，其緣由例如如下：
1. JS 有可能會改動 DOM.
典型的，可能會有 document.write. 這意味着，在當前 JS 載入和運行完畢前，興許所有資源的下載有多是不是必需的。這是 JS 堵塞興許資源下載的根本緣由。
2. JS 的運行有可能依賴最新樣式。
比方，可能會有 var width = $(‘#id’).width(). 這意味着，JS 代碼在運行前，瀏覽器必須保證在此 JS 以前的所有 css（無論外鏈仍是內嵌）都已下載和解析完畢。這是 CSS 堵塞興許 JS 運行的根本緣由。

3. CSS要先渲染。

CSS放在前端是頁面渲染時首先是依據DOM結構生成一個DOM樹而後加上CSS樣式生成一個渲染樹，假設CSS放在後面可能頁面會出現閃跳的感受，或者是白屏或者佈局混亂樣式很是醜直到CSS載入完畢。

但是，現代瀏覽器之間的競爭也十分激烈。他們一般有本身的優化方式。可以進行prefetch優化，這種話。性能是如此重要，現代瀏覽器在競爭中。在 UI update 線程以外。還會開啓還有一個線程。對興許 JS 和 CSS 提早下載（注意，僅提早下載，並不運行）。有了 prefetch 優化。這意味着，在不存在不論什麼堵塞的狀況下，理論上 JS 和 CSS 的下載時機都很是優先。和位置無關。

4. iframe與變換縮放

使用iframe的時候。最大的優勢就是內網頁不用本身寫了，可以引用。但是通常會有一個問題。因爲iframe有可能僅僅是咱們本身網頁的一部分，那麼引用網頁有多是一個完整的網頁，那麼這樣子的話，會形成顯示上的問題。那這時候，事實上使用縮放來作，可以作一個折中的方案，畢竟原網頁不是你想改就能改的。

縮放也是有2種的。一種是ZOOM，還有一種是CSS3的transform:scale。那麼他們有什麼不一樣呢？

首先。他們的來源不一樣：
還在幾年前，zoom還僅僅是IE瀏覽器本身私有的玩具，但是，現在，除了FireFox瀏覽器，其它。尤爲Chrome和移動端瀏覽器已經很是好支持zoom屬性了。注意。儘管Chrome/Safari瀏覽器支持了zoom屬性。但是，事實上zoom並不是標準屬性。
而Transform則是CSS3標準，明明白確寫入規範的。
從IE9+到其它現代瀏覽器都支持。
其次，是他們寫法不一樣：
來看一下他們假設都是縮放一半，應該怎麼寫：
.zoom-half { zoom: 0.5; }
.scale-half { transform: scale(0.5); }
最後是他們的效果不一樣：
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放縮更好一些。

5.背景漸變

背景漸變這個應該簡單的不能再簡單了，簡單來說就是長這種：

.mybackgrounds{ background:-webkit-linear-gradient(top,#222222,#FFFFFF); }

這裏詳細的，來說。background是設置背景，而-webkit-linear-gradient則表示線性漸變，(top,#222222,#FFFFFF)分別表示的是開始位置（從上到下），開始顏色（灰黑），結束顏色（白色）。更詳細的可以看一下如下這裏：背景漸變詳細解釋

6. 輸入框組

輸入框組就像以前提到的那樣，boostrap裏提供了一個簡單的樣式，但是還算美觀。詳細的寫法例如如下：

<div  class="form-group">
    <div class="input-group ">
        <span id="hotwordspan" class="input-group-addon">
        熱點詞彙
        </span>
        <asp:TextBox ID="TextBox2"  class="form-control"runat="server">
        </asp:TextBox>
    </div>
</div>

尤其值得注意的是，class="form-control"輸入框的這個class要加入。否則的話。輸入框會比前一個span小上一部分，所以必須加上這個。

相同的，<asp:TextBox ID="TextBox2" class="form-control"runat="server"></asp:TextBox>
這個可以換成其它的組件。包含像下拉框、選擇框、輸入框等等都可以。

7. 時間選擇

時間框也是非常常見的組件。咱們來看一下長什麼樣：

<div class="form-group">
    <div 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">
    <span class="input-group-addon">選擇日期</span>
    <!--這是終於獲取日期的框-->
    <asp:TextBox ID="TextBox1" class="form-control" runat="server"></asp:TextBox>
    <!--這是一個清除圖標-->
    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
    <!--這是一個日期圖標-->
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
    <!--這是一個展現日曆框-->
    <input type="hidden" id="dtp_input1" value="" />
</div>

這都寫完了就完畢了麼？不。這個組件被稱爲是Js組件，所以還需要寫如下js代碼：

$('.form_date').datetimepicker({
                format: 'yyyy-mm-dd',
                weekStart: 1,
                autoclose: true,
                startView: 2,
                minView: 2,
                forceParse: false,
                //選擇語言
                language: 'zh-CN',
                //今天button可用否
                todayBtn: true,
                //今天高亮否
                todayHighlight: true,
                //初始化日期
                initialDate: '2016-07-01',
            });

固然。把這些都寫完了之後，仍是不成功的話。你需要考慮如下有沒有引入這個：

<link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" />

上一個是Bootstrap樣式，下一個是datetimepicker組件。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。