)通過創建WebSite程序,創建網頁

通過VS菜單欄的"文件"->"新建"->"新建網站"->"ASP.NET空網站"

在右側的"解決方案"窗口的空網站上右擊選擇"添加"->"html"起個名字

2)通過創建WebApplication程序創建網頁

通過VS菜單欄的"文件"->"新建"->"項目"->"新建項目"->"ASP.NET空Web應用程序"

創建好空web程序之后,添加網頁方式如上一個圖"創建網頁"所示基本差不多不再截圖

3)在指定瀏覽器中查看編輯好的網頁

3.1為WebApplication程序設置指定瀏覽器

如上圖所示,點擊此圖標即可在瀏覽器中查看編輯后的效果;通過此圖標的右側小三角形查看電腦上都有上面瀏覽器,,前面打對勾地表示當前打開的瀏覽器,如果設置其他的默認瀏覽器,選擇"使用以下工具瀏覽"選項,在彈出的對話框中添加,移除設置默認瀏覽器(默不默認個人感覺差別不大),自己手動試試不再贅述

瀏覽器選項中的"Page Inspector"是VS自帶的使用IE內核的小瀏覽器

3.2為WebSite程序指定瀏覽器

3.2.1第一種方式:WebApplication程序設置方式差不多自己測試;

3.2.2第二種方式:在右側WebSite上右擊選擇"瀏覽方式",在此窗口中設置默認等操作

兩種程序第一次點擊瀏覽圖標查看網頁時都會打開一個VS自帶小型的服務器(IIS)

使用VS創建網頁便于下面的JavaScript(簡稱js)語言的講解

SS基礎2

1.CSS選擇器的優先級

標簽選擇器、偽元素選擇器：1

類選擇器、偽類選擇器、屬性選擇器：10

id 選擇器：100

內聯樣式：1000

!important聲明的樣式的優先級最高；

注意事項：

如果優先級相同，則最后出現的樣式生效；

繼承得到的樣式的優先級最低；

通用選擇器（*）、子選擇器（>）和相鄰同胞選擇器（+）并不在這四個等級中，所以它們的權值都為 0

樣式表的來源不同時，優先級順序為：內聯樣式 > 內部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認樣式。

一般來說選擇器越具體，優先級越高

2.display的屬性值及其作用

3.display的block、inline和inline-block的區別

（1）block： 會獨占一行，多個元素會另起一行，可以設置width、height、margin和padding屬性；

（2）inline： 元素不會獨占一行，設置width、height屬性無效。但可以設置水平方向的margin和padding屬性，不能設置垂直方向的padding和margin；

（3）inline-block： 將對象設置為inline對象，但對象的內容作為block對象呈現，之后的內聯對象會被排列在同一行內。

對于行內元素和塊級元素，其特點如下：

（1）行內元素

• 設置寬高無效；
• 可以設置水平方向的margin和padding屬性，不能設置垂直方向的padding和margin；
• 不會自動換行；

（2）塊級元素

• 可以設置寬高；
• 設置margin和padding都有效；
• 可以自動換行；
• 多個塊狀，默認排列從上到下

4.隱藏元素的方法有哪些

display: none：渲染樹不會包含該渲染對象，因此該元素不會在頁面中占據位置，也不會響應綁定的監聽事件。

visibility: hidden：元素在頁面中仍占據空間，但是不會響應綁定的監聽事件。

opacity: 0：將元素的透明度設置為 0，以此來實現元素的隱藏。元素在頁面中仍然占據空間，并且能夠響應元素綁定的監聽事件。

z-index: 負值：來使其他元素遮蓋住該元素，以此來實現隱藏。

clip/clip-path ：使用元素裁剪的方法來實現元素的隱藏，這種方法下，元素仍在頁面中占據位置，但是不會響應綁定的監聽事件。

transform: scale(0,0)：將元素縮放為 0，來實現元素的隱藏。這種方法下，元素仍在頁面中占據位置，但是不會響應綁定的監聽事件

5.transition和animation的區別

transition是過度屬性，強調過度，它的實現需要觸發一個事件（比如鼠標移動上去，焦點，點擊等）才執行動畫。它類似于flash的補間動畫，設置一個開始關鍵幀，一個結束關鍵幀。

animation是動畫屬性，它的實現不需要觸發事件，設定好時間之后可以自己執行，且可以循環一個動畫。它也類似于flash的補間動畫，但是它可以設置多個關鍵幀（用@keyframe定義）完成動畫

6.偽元素和偽類的區別和作用

偽元素：在內容元素的前后插入額外的元素或樣式，但是這些元素實際上并不在文檔中生成。它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱為“偽”元素

div:before {content:"第一章：";}
div:after {content:"Hot!";}

偽類：將特殊的效果添加到特定選擇器上,它是已有元素上添加類別的，不會產生新的元素

a:hover {color: #FF00FF}
p:first-child {color: red}

偽類是通過在元素選擇器上加?偽類改變元素狀態，?偽元素通過對元素的操作進?對元素的改變。

7.CSS3中有哪些常用新特性

新增各種CSS選擇器 （: not(.a)：所有 class 不是“a”的節點）

圓角 （border-radius:8px）

多列布局 （multi-column layout）

陰影 （Shadow）

文字特效 （text-shadow）

文字渲染 （Text-decoration）

線性漸變 （gradient）

旋轉 （transform）

8.對line-height 的理解及其賦值方式

概念：

line-height 指一行文本的高度，包含了字間距，實際上是下一行基線到上一行基線距離；

如果一個標簽沒有定義 height 屬性，那么其最終表現的高度由 line-height 決定；

一個容器沒有設置高度，那么撐開容器高度的是 line-height，而不是容器內的文本內容；把 line-height 值設置為 height 一樣大小的值可以實現單行文字的垂直居中；

line-height 和 height 都能撐開一個高度；

賦值方式：

帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高

純數字：此數字會與當前的字體大小(font-size)相乘來設置行間,相當于倍數

百分比：與元素自身的字體大小(font-size)有關，計算值是給定的百分比值乘以元素計算出的字體大小

注意：

body {
  line-height: 200%;
  font-size: 30px;
}
p {
  font-size: 16px;
}

這時候p標簽的line-height為60px，因為body的line-height=200% * 30px = 60px。再p標簽直接繼承body的line-height，而不是16*200%的32px

9.CSS 優化和提高性能的方法有哪些

加載性能：

（1）css壓縮：將寫好的css進行打包壓縮，可以減小文件體積

（2）減少使用@import，建議使用link，因為后者在頁面加載時一起加載，前者是等待頁面加載完成之后再進行加載。

選擇器性能：

（1）關鍵選擇器（key selector）。選擇器的最后面的部分為關鍵選擇器（即用來匹配目標元素的部分）。CSS選擇符是從右到左進行匹配的。當使用后代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；

（2）如果規則擁有ID選擇器作為其關鍵選擇器，則不要為規則增加標簽。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）。

（3）避免使用通配規則，如*{}計算次數驚人，只對需要用到的元素進行選擇。

（4）盡量少的去對標簽進行選擇，用class作為選擇器。

（5）盡量少的去使用后代選擇器，降低選擇器的權重值。后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關聯每一個標簽元素。

（6）了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復指定規則。

渲染性能：

（1）慎重使用高性能屬性：浮動、定位。

（2）盡量減少頁面重排、重繪。

（3）去除空規則：｛｝。空規則的產生原因一般來說是為了預留樣式。去除這些空規則無疑能減少css文檔體積。

（4）屬性值為0時，不加單位。

（5）屬性值為浮動小數0.**，可以省略小數點之前的0。

（6）標準化各種瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在后。

（7）不使用@import前綴，它會影響css的加載速度。

（8）選擇器優化嵌套，盡量避免層級過深。

（9）css雪碧圖，同一頁面相近部分的小圖標，方便使用，減少頁面的請求次數，但是同時圖片本身會變大，使用時，優劣考慮清楚，再使用。

（10）正確使用display的屬性，由于display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。

（11）不濫用web字體。對于中文網站來說WebFonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷性能。

可維護性、健壯性：

（1）將具有相同屬性的樣式抽離出來，整合并通過class在頁面中進行使用，提高css的可維護性。

（2）樣式與內容分離：將css代碼定義到外部css中。

10.CSS預處理器/后處理器是什么？為什么要使用它們

預處理器， 如：less，sass，用來預編譯sass或者less，增加了css代碼的復用性。層級，mixin， 變量，循環， 函數等對編寫以及開發UI組件都極為方便。

后處理器， 如： postCss，通常是在完成的樣式表中根據css規范處理css，讓其更加有效。目前最常做的是給css屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

css預處理器為css增加一些編程特性，無需考慮瀏覽器的兼容問題，可以在CSS中使用變量，簡單的邏輯程序，函數等在編程語言中的一些基本的性能，可以讓css更加的簡潔，增加適應性以及可讀性，可維護性等。

其它css預處理器語言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

使用原因：

• 結構清晰， 便于擴展
• 可以很方便的屏蔽瀏覽器私有語法的差異
• 可以輕松實現多重繼承
• 完美的兼容了CSS代碼，可以應用到老項目中

11.::before 和 :after 的雙冒號和單冒號有什么區別

冒號(:)用于CSS3偽類

雙冒號(::)用于CSS3偽元素。

::before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。并不存在于dom之中，只存在在頁面之中。

注意： :before 和 :after 這兩個偽元素，是在CSS2.1里新出現的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進化，在CSS3的規范里，偽元素的語法被修改成使用雙冒號，成為::before、::after

12.單行、多行文本溢出隱藏

單行文本溢出

overflow: hidden;            // 溢出隱藏
text-overflow: ellipsis;      // 溢出用省略號顯示
white-space: nowrap;         // 規定段落中的文本不進行換行

多行文本溢出

overflow: hidden;            // 溢出隱藏
text-overflow: ellipsis;     // 溢出用省略號顯示
display:-webkit-box;         // 作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; // 設置伸縮盒子的子元素排列方式：從上到下垂直排列
-webkit-line-clamp:3;        // 顯示的行數

注意：由于上面的三個屬性都是 CSS3 的屬性，沒有瀏覽器可以兼容，所以要在前面加一個-webkit- 來兼容一部分瀏覽器

12.對 CSS 工程化的理解

CSS 工程化是為了解決以下問題：

1. 宏觀設計：CSS 代碼如何組織、如何拆分、模塊結構怎樣設計？
2. 編碼優化：怎樣寫出更好的 CSS？
3. 構建：如何處理我的 CSS，才能讓它的打包結果最優？
4. 可維護性：代碼寫完了，如何最小化它后續的變更成本？如何確保任何一個同事都能輕松接手？

以下三個方向都是時下比較流行的、普適性非常好的 CSS 工程化實踐：

• 預處理器：Less、 Sass 等；
• 重要的工程化插件： PostCss；
• Webpack loader 等 。

基于這三個方向，可以衍生出一些具有典型意義的子問題，這里我們逐個來看：

（1）預處理器：為什么要用預處理器？它的出現是為了解決什么問題？

預處理器，其實就是 CSS 世界的“輪子”。預處理器支持我們寫一種類似 CSS、但實際并不是 CSS 的語言，然后把它編譯成 CSS 代碼：

那為什么寫 CSS 代碼寫得好好的，偏偏要轉去寫“類 CSS”呢？這就和本來用 JS 也可以實現所有功能，但最后卻寫 React 的 jsx 或者 Vue 的模板語法一樣——為了爽！要想知道有了預處理器有多爽，首先要知道的是傳統 CSS 有多不爽。隨著前端業務復雜度的提高，前端工程中對 CSS 提出了以下的訴求：

1. 宏觀設計上：我們希望能優化 CSS 文件的目錄結構，對現有的 CSS 文件實現復用；
2. 編碼優化上：我們希望能寫出結構清晰、簡明易懂的 CSS，需要它具有一目了然的嵌套層級關系，而不是無差別的一鋪到底寫法；我們希望它具有變量特征、計算能力、循環能力等等更強的可編程性，這樣我們可以少寫一些無用的代碼；
3. 可維護性上：更強的可編程性意味著更優質的代碼結構，實現復用意味著更簡單的目錄結構和更強的拓展能力，這兩點如果能做到，自然會帶來更強的可維護性。

這三點是傳統 CSS 所做不到的，也正是預處理器所解決掉的問題。預處理器普遍會具備這樣的特性：

• 嵌套代碼的能力，通過嵌套來反映不同 css 屬性之間的層級關系 ；
• 支持定義 css 變量；
• 提供計算函數；
• 允許對代碼片段進行 extend 和 mixin；
• 支持循環語句的使用；
• 支持將 CSS 文件模塊化，實現復用

（2）Webpack 能處理 CSS 嗎？如何實現？ Webpack 能處理 CSS 嗎：

• Webpack 在裸奔的狀態下，是不能處理 CSS 的，Webpack 本身是一個面向 JavaScript 且只能處理 JavaScript 代碼的模塊化打包工具；
• Webpack 在 loader 的輔助下，是可以處理 CSS 的。

如何用 Webpack 實現對 CSS 的處理：

• Webpack 中操作 CSS 需要使用的兩個關鍵的 loader：css-loader 和 style-loader
• css-loader：導入 CSS 模塊，對 CSS 代碼進行編譯處理； style-loader：創建style標簽，把 CSS 內容寫入標簽。

在實際使用中，css-loader 的執行順序一定要安排在 style-loader 的前面。因為只有完成了編譯過程，才可以對 css 代碼進行插入；若提前插入了未編譯的代碼，那么 webpack 是無法理解這坨東西的，它會無情報錯。

13.如何判斷元素是否到達可視區域

window.innerHeight 是瀏覽器可視區的高度；

document.body.scrollTop || document.documentElement.scrollTop 是瀏覽器滾動的過的距離；

imgs.offsetTop 是元素頂部距離文檔頂部的高度（包括滾動條的距離）；

內容達到顯示區域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

14.z-index屬性在什么情況下會失效

通常 z-index 的使用是在有兩個重疊的標簽，在一定的情況下控制其中一個在另一個的上方或者下方出現。z-index值越大就越是在上層。z-index元素的position屬性需要是relative，absolute或是fixed。

z-index屬性在下列情況下會失效：

• 父元素position為relative時，子元素的z-index失效。解決：父元素position改為absolute或static；
• 元素沒有設置position屬性為非static屬性。解決：設置該元素的position屬性為relative，absolute或是fixed中的一種；
• 元素在設置z-index的同時還設置了float浮動。解決：float去除，改為display：inline-block；

15.px、em、rem的區別及使用場景

三者的區別：

px是固定的像素，一旦設置了就無法因為適應頁面大小而改變。

em和rem相對于px更具有靈活性，他們是相對長度單位，其長度不是固定的，更適用于響應式布局。

em是相對于其父元素來設置字體大小，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小。而rem是相對于根元素，這樣就意味著，只需要在根元素確定一個參考值。

使用場景：

對于只需要適配少部分移動設備，且分辨率對頁面影響不大的，使用px即可 。

對于需要適配各種移動設備，使用rem，例如需要適配iPhone和iPad等分辨率差別比較挺大的設備。

16.對Flex布局的理解及其使用場景

Flex是FlexibleBox的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。行內元素也可以使用Flex布局。注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis），項目默認沿水平主軸排列。

以下6個屬性設置在容器上：

flex-direction屬性決定主軸的方向（即項目的排列方向）。

flex-wrap屬性定義，如果一條軸線排不下，如何換行。

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

justify-content屬性定義了項目在主軸上的對齊方式。

align-items屬性定義項目在交叉軸上如何對齊。

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

以下6個屬性設置在項目上：

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值為0 1 auto。

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

簡單來說： flex布局是CSS3新增的一種布局方式，可以通過將一個元素的display屬性值設置為flex從而使它成為一個flex容器，它的所有子元素都會成為它的項目。一個容器默認有兩條軸：一個是水平的主軸，一個是與主軸垂直的交叉軸。可以使用flex-direction來指定主軸的方向。可以使用justify-content來指定元素在主軸上的排列方式，使用align-items來指定元素在交叉軸上的排列方式。還可以使用flex-wrap來規定當一行排列不下時的換行方式。對于容器中的項目，可以使用order屬性來指定項目的排列順序，還可以使用flex-grow來指定當排列空間有剩余的時候，項目的放大比例，還可以使用flex-shrink來指定當排列空間不足時，項目的縮小比例

17.各種圖形的繪制

（1）三角1

div {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

（2）三角2

div {
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

（3）扇形

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}

18.設置小于12px的字體

在谷歌下css設置字體大小為12px及以下時，顯示都是一樣大小，都是默認12px。

解決辦法：

使用Webkit的內核的-webkit-text-size-adjust的私有CSS屬性來解決，只要加了-webkit-text-size-adjust:none;字體大小就不受限制了。

使用css3的transform縮放屬性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收縮的是整個元素的大小，這時候，如果是內聯元素，必須要將內聯元素轉換成塊元素，可以使用display：block/inline-block