HTML+CSS筆記

專業開發人員寫筆記 MarkDown

markdomn是開發人員編寫技術文件的主要方式，支援標題、段落、程式碼塊、摘要等格式的處理，檔案的字尾名是“.md”

支援markdown的筆記工具

印象筆記（馬克飛象）
有道雲筆記
第一項
- 1.1
  - 1.1.1
  - 1.1.2
- 1.2
第二項

var a = 12;
var b = 13;
var x = a+b;
複製程式碼

IDE：編輯工具

+ DW   ADOBE 
+ Hbuilder:適合於Hybrid混合APP開發
+ sublime：輕量級
+ webstorm：重量級前端開發工具
+ Visual Studio Code：目前最常用的，比WS輕量級，而且提示也很強大
複製程式碼

VSCode：

+ 一款強大的跨平臺開發工具，支援至少30多種語言的開發（永久免費）
複製程式碼

1.開啟專案
- 在磁碟中新建一個專案資料夾，在VSCode中
- “檔案->開啟資料夾->選擇專案資料夾”：在VSCode中新建或者開啟一個專案
2.新建專案檔案
- 在專案目錄中（左側資源管理器）“右鍵->新建檔案或者資料夾”，注意：所有的檔案自己手動指定字尾名
3.新建HTML檔案
- 輸入“!”，在有提示的情況下按ENTER或者TAB鍵，可以自動生成HTML主體結構（同樣的原理可以用於其它的程式碼提示）
- 預覽頁面：在HTML頁面的編輯區域，“右鍵->open in default/other browser->選擇谷歌或者其它瀏覽器”
測試：

    |- css
      |- index.css
    |- js
      |- index.js
    |- image （圖片的拷貝是在對應檔案中操作，而不是編輯器中操作）
    |- index.html
複製程式碼

4.設定一些基礎的配置

    “檔案 -> 首選項 
               -> 設定（修改字型大小和自動折行）
               -> 顏色主題（修改編輯器的顏色）”
複製程式碼

1. vscode常用的外掛（左側選單欄的最後一項：擴充套件）
- chinese ：漢化
- beautify：程式碼格式化對齊（SHIFT + ALT + F）
- open in browser：能夠把HTML頁面通過右鍵的方式在瀏覽器中預覽

瀏覽器知識彙總

[webkit核心（v8引擎）]
- chrome 谷歌瀏覽器
- safair瀏覽器
- opera 歐朋瀏覽器（14+）
- 大部分安卓和IOS手機端的瀏覽器
- 大部分國產瀏覽器目前也是V8核心的（相容版本是IE核心）
  - 360瀏覽器（極速版/相容版/移動版）
  - QQ瀏覽器（PC版/移動版）
  - UC瀏覽器
  - 百度瀏覽器
  - 搜狗瀏覽器（極速版/相容版/移動版）
  - ...
[Gecko核心]
- firforx 火狐瀏覽器
[Trident核心]
- IE（6~11/EDGE）
瀏覽器渲染頁面基於核心處理的
一個頁面由三部分組成：
- HTML：搭建頁面的結構
- CSS：編寫頁面的樣式
- JavaScript（JS）：實現頁面中的互動效果和資料呈現
HTML標籤：類似於蓋房子搭建結構的原材料，每一種材料都有自己特殊的用途，我們合理的標籤做合適的事情叫做“標籤語義化”
- 【塊級標籤】
  - div 層（盒子）、p 段落、h1~h6 標題
  - ul/li 無序列表、ol/li 有序列表、dl/dt/dd 自定義列表
  - （HTML5）header 頭部區域、main 主體區域、footer 尾部區域、figure配圖區域、figcaption 配圖說明、nav 導航區域、section 普通區域、article 文章區域...
- 【行內標籤】
  - a 超連結、span 無意義標籤（包裹一段文字設定特殊樣式）、em 特殊文字標記（文字會傾斜）、strong 重點強調（加粗）、small 附屬細則（變小）、i 圖示標記（字型圖示）
- 【行內塊級標籤】
  - img 圖片、audio 音訊、video 視訊、input 表單元素（文字框、密碼框、單選按鈕、核取方塊...）、select/datalist 下拉選單...

VSCode快捷鍵：

ctrl + / ：設定註釋
shift + alt + f ：程式碼對齊格式化
ctrl + k + 0：收起程式碼
ctrl + k + j：展開程式碼

css基礎知識

css層疊樣式表，主要是給頁面編寫樣式的

1.css的匯入方式

行內樣式

/*
*行內樣式：通過元素的style屬性設定css樣式
* 1）結構和樣式混在一起，頁面程式碼量多的時候，特別混亂，不利於效能以及開發和維護
* 2）真實專案中一般不用，偶爾需要提高樣式的層級權重會用一下（行內樣式的優先權是最高的）；JS中設定元素的樣式，一般都是設定行內樣式；
*/
<header style="background:red;">
</header>
複製程式碼

內嵌樣式

/*
* 內嵌樣式：在HTML頁面中，把樣式寫在style程式碼塊內（style一般放到head內部中）
* 1）也是要把css程式碼放到頁面中，css程式碼過多，頁面一樣會非常的臃腫
* 2）如果css程式碼不是很多，為了加快頁面載入速度，我們一般也會用內嵌式來進行效能優化（移動端經常這麼幹）
*/
<style>
    header{
        background:yellow;
    }
</style>
複製程式碼

外鏈樣式

/*
*外鏈式：把樣式寫在外部的css檔案中（xxx。css），在頁面的head中基於link標籤，把樣式表匯入進來即可（最常用的）
* rel=“stylesheet”這個才是匯入css，如果是icon代表匯入頁面的圖示
*/
<link rel="stylesheet"
href="css/index.css">
複製程式碼

匯入樣式

/*
* 匯入式：類似於外鏈式，只不過是基於@import匯入進來的外部樣式（不常用）
*/
<style>

    @import 'css/index.css'
    
</style>
複製程式碼

link與@import的區別
- link是XHTML標籤，除了載入CSS外，還可以定義RSS等其他事務；@import屬於CSS範疇，只能載入CSS。
- link引用CSS時，在頁面載入時同時載入；@import需要頁面網頁完全載入以後載入。
- link是XHTML標籤，無相容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支援。
- link支援使用Javascript控制DOM去改變樣式；而@import不支援。
匯入式與外鏈式的區別：
- link是將css佈局檔案先載入如網頁檔案中，所以這時無論網速再慢，最終實現的網頁效果都是一樣的。
- 而@import則是先將網頁檔案載入，再載入佈局檔案，這時候如果網速過慢的話，則會先出現沒有佈局的網頁效果，就會顯得很難看。
- 但是匯入樣式可以避免過多的網頁檔案指向一個css佈局檔案，如果採用link的話，可能會導致由於過多的網頁檔案同時採用一個佈局檔案而導致速度下降。但是使用好的硬碟基本不會出現這樣的情況。
link和 @import的區別：
程式：每一個程式執行都會佔用一到多個程式（瀏覽器開啟一個介面也會佔用一個程式）
執行緒：一個程式包含多個執行緒，每一個執行緒就是做的一件事
link不會阻斷頁面的渲染執行緒（開闢新的執行緒載入資原始檔），而@import 是當前渲染執行緒請求資原始檔，阻斷了頁面渲染的進度（@import資源在沒有請求完成，後面頁面是無法繼續渲染的）

2.css 選擇器

css選擇器就是用來在樣式中獲取到對應的元素，從而設定相關樣式的
基本選擇器
- 標籤選擇器：div{}獲取到頁面中所有的div標籤
- id選擇器: #box{}獲取到頁面中id為box的盒
  - 注意：頁面中元素可以設定ID屬性，屬性值是唯一的（理論上），但是ID相同不會報錯，只是不符合W3C規範：如果想獲取頁面中指定的某一個元素，則用ID選擇器會更快捷準確
- 樣式類名選擇器：.box{}獲取頁面中class='box'的元素
樣式類選擇器特點：
- 不論標籤，想要獲取哪些元素，只要讓他們擁有共同的class值，這樣都可以基於樣式類選擇器獲取到（簡單、粗暴、明瞭）；他是真實專案中最常用的選擇器
群組選擇器:div,.box{} div和樣式類為box的具備共同樣式
萬用字元選擇器：*{} 頁面中所有的標籤
結構選擇器
- 後代選擇器：.box a{} 獲取樣式類名為box，它後代元素中所有的a
- 子代選擇器： .box>a{} 獲取樣式類名為box，它兒子元素中所有的a
- 弟弟選擇器： .box+a{} 獲取樣式類名為box，它下一個弟弟並且是a的元素（最後獲取的是a）
- 同級篩選選擇器：.box a.line{}獲取樣式類名為box，它後代元素中所有的a，並且這個a得有line這個樣式
偽類選擇器
- 結構偽類選擇器
  - :nth-child(1) 獲取當前容器兒子中的第一個
  - :nth-of-type(1) 和nth-child類似，但是它按照分組來選
  - :not() 除了某某某
- 動態偽類選擇器
  - :hover 滑鼠滑過
  - :active 滑鼠按下
屬性選擇器
- a[href='javascrpit:;']
- 獲取所有的a標籤，在其中篩選出href屬性的值是指定值的（還可以用!=，不加='xxx'意思是隻要包含這個屬性即可）
……

選擇器是有優先順序的

ID選擇器優先順序最高
- 樣式類選擇器其次
  - 標籤選擇器最低
選擇器處理機制：瀏覽器處理選擇器（尤其是後代選擇器），是按照從右到左一次渲染的 .box a{}：先獲取頁面中所有的a，再看哪些是在.box下的，單獨篩選出來（所以樣式中選擇器字首越長，效能越低）
nth-child

<style>
    .aa span:nth-child(1) {
        /*獲取aa兒子中的第一個，並且需要是span：此處獲取不到元素，第一個元素是H2*/
        color:red;
    }
    .aa span:nth-of-type(1) {
        /*獲取aa後代中的span，並且把獲取span中的第一個拿到*/
        color:green;
    }
</style>
<div class="aa">
    <h2>我是標題</h2>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
複製程式碼

選擇器權重

萬用字元選擇器---權重：0<*<1（作為了解，專案中不會用到）
標籤選擇器---權重1
id選擇器-----權重100
類選擇器-----權重10
後代選擇器---權重：所有選擇器相加之和語法：空格隔開 .content .footer{}
子代選擇器---權重：所有選擇器相加之和語法：大於號（>） .content>.footer{}
分組選擇器---權重：獨立計算不會疊加語法：逗號隔開 .div1,.div2,.div3{}
偽類選擇器---權重：10 （常用的是：hover，滑鼠經過時的狀態）
偽元素選擇器---權重：10 （常用的是：after，利用偽元素來清除浮動帶來的影響）

一般常用在字型圖示、清除浮動的影響中使用

css盒子模型

可以把每一個元素理解為一個盒子：給盒子設定的樣式稱為css盒子模型
傳統盒子模型:width/height:內容的寬高（不一定是盒子的寬高）
height預設是auto：內容有多高撐開多高
css3新盒子模型
box-sizing:border-box;
此時設定的width/height指的是盒子的寬高而不是內容的（內容寬度會在盒子寬度不變的情況下自動縮放）

塊狀標籤、行內標籤、行內塊狀標籤的區別

【塊狀標籤：類似於盒子】
寬度預設是當前元素所在容器內容的寬度（width：100%；高度height：auto）
預設無法在同一行展示（哪怕寬度不是100%也不行，需要額外的處理）
支援自己通過width樣式設定寬度
【行內標籤：類似於文字】
寬度預設是：當前元素內容自動撐開的寬度（width：auto；高度height：auto）
預設兩個行內標籤是在同一行並排展示
不支援手動設定width/height
【行內塊狀標籤：具備雙方的特點】
寬度預設是自適應，也就是auto，所以可以在同一行並排展示（繼承行內特點）
可以設定寬高（繼承塊狀特點）

    /*
    *實現標籤之間的相互轉換
    */
    display：block   變為塊狀標籤（讓元素顯示出來，和display：none對應）
    display： inline 變為行內標籤
    display：inline-block 變為行內塊狀標籤
    【思考擴充套件】
        display：table/flex
        display:table 此元素會為塊級表格來顯示（類似 <table>），表格前後帶有換行符。
複製程式碼

box

    /*
    *新盒子模型規定：width/height是盒子本身的大小，邊框或者填充的更改只會讓內容寬高自適應縮放，盒子大小不變
    */
    box-sizing:border-box;
   /* 
    * background-color 設定背景顏色
    * background:-webkit-linear-gradient      控制背景顏色線性漸變
    * background-image 設定背景圖片（指定好圖片的地址）
    * background-repeat 設定背景平鋪方式 no-repeat不平鋪
    * background-position 設定背景圖的位置(x/y）
    * background-size 設定背景圖大小
        100% 100% 設定背景圖大小和容器寬高一致
        cover 以合適的比例鋪滿容器（一般用作大盒子背景圖設定）
    */
     -->
    background：-webkit-linear-gradient（top left,lightblue,red,green,orange,yellow）
    background-image: url(../image/beijing.jpg);
    background-repeat: no-repeat;
    background-position:center center;
    background-size：cover；
複製程式碼

浮動

/*
* float是CSS中設定元素（盒子）對齊的樣式屬性：“浮動”】
* left向左浮動
* right向右浮動
* 設定浮動會產生一個bug:子元素一旦設定了浮動，父元素如果不設定高度，子元素無法把父元素的高度撐開（父元素高度是零）=>設定浮動的元素脫離了文件流
    1.可以給父元素設定固定的高度（不常用）
    2.給父元素設定overflow:hidden即可。（但是hidden本身還有其他的意思，也不一定是最合適的處理方式）
    3.基於clear：both來清除浮動的影響
在reset.min.css檔案中已經寫了清楚浮動的程式碼（類名為：.clearfix）。
*/
float:left;
.box:after{
/*
    :after 在CSS中，動態容器的末尾追加一個虛擬的元素
        content是設定追加元素的內容
    :before/:after <=> 頁首/頁尾
*/
    display:block;
    content:'';
    clear:both;
    }
    .navBox .content a{
    /* 元素設定浮動後就變為行內塊狀標籤 */
    float:left;
}
複製程式碼

定位

定位：把元素放到頁面或容器中的任意位置
- position:relative/absolute/fixed
  - 基於top/left/right/bottom調整元素位置
  - 基於z-index調節元素的層級關係
固定定位：讓當前元素固定在瀏覽器視窗的某個位置


position:fixed;
right:10px;
bottom:100px
複製程式碼

position:relative相對定位（相對於自己之前的位置定位）

.box{
    position:relative;
    top: 300px;
    left:300px;
}
複製程式碼

position:absolute絕對定位（相對於自己的父級參照物定位：父級參照物 !=(不等於) 父級元素，同一個平面最外層的元素是參照物）

B{
    position:relative;
    /* 此處沒有相對於之前的位置移動，但是它可以實現讓B脫離原來的平面，此時B中的後代元素父級參照物就是B了（absoult和fixed也有相同的功效）
    元素設定定位後，脫離原有的平面，其後代元素參照物變成當前的元素
     */
}
A{
    position:absolute;
    top:0;
    left:0;
}
複製程式碼

css3中的動畫和變形

變形：基於transform來修改元素的樣式

translateX/Y/Z:按照某一個方向實現位移
scale:縮放
skew：傾斜
rotateX/Y:旋轉（單位deg）基於transform設定元素的樣式改變，開啟了硬體加速的效果，效能上比使用傳統的CSS樣式改變要高基於transform-origin設定變形的基準點（預設是正中心）

過渡動畫：基於transition實現過渡動畫（給元素設定過渡動畫，當元素的樣式發生改變，不是立即改變，而是執行動畫效果）

transition-property：過渡屬性（哪些樣式改變執行動畫，預設是all代表全部樣式改變都有動畫）
transition-duration：動畫時間（單位：s/ms）
transition-timing-function：設定動畫運動效果（預設是linear勻速，還有ease/ease-in/ease-out/ease-in-out···）
transition-delay:設定延遲時間（預設是0s）

幀動畫：基於animation實現，幀動畫分為兩部分（製作動畫：設定每一幀的效果，播放動畫：在指定時間內把動畫播放完成）

//=>製作動畫
@keyframes動畫名{
    0%{
        起始位置的樣式（from）
    }
    100%{
        結束位置的樣式（to）
    }
}
//=>播放動畫
animation-name：動畫名
animation-duration：動畫時間
animation-timing-function：運動方式（預設ease）
animation-delay：延遲時間
animation-iteration-count：運動次數（預設是1，infinite運動無限次）
animation-fill-mode：設定動畫模式
    forwards 運動完成停留在最後一幀的位置（預設是回到起始位置）
    backwards 在動畫有延遲的情況下，我們讓元素處於第一幀的位置
    both 同時具備以上兩種
複製程式碼

/* vertical-align設定行內標籤對齊的方式，middle是設定行內居中 */
vertical-align:middle;
baseline ：預設。元素放置在父元素的基線上。
sub ：垂直對齊文字的下標。
super : 垂直對齊文字的上標
top : 把元素的頂端與行中最高元素的頂端對齊
text-top:把元素的頂端與父元素字型的頂端對齊
middle:把此元素放置在父元素的中部。
bottom:把元素的底端與行中最低的元素的頂端對齊。
text-bottom:把元素的底端與父元素字型的底端對齊。
length	 
% : 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit : 規定應該從父元素繼承 vertical-align 屬性的值。
複製程式碼

雪碧圖

真實專案中為了優化頁面的效能，我們減少資原始檔請求次數，會把很多小圖合併到一個大圖中，最後基於背景定位的方式找到需要的小圖 1.合併圖片可以用PS 2.只有背景圖可以這樣處理，img不行 =>css Sprite技術、雪碧圖、圖片精靈

雪碧圖的使用技巧

簡單來說，就是一張圖片上有好多個小圖示，被稱為雪碧圖，也叫精靈圖雪碧圖必須用CSS樣式來使用（background） PC端雪碧圖的使用技巧

1.找到想要引入的那個小圖示，要量一下這個小圖示的寬度、高度
引入雪碧圖，使雪碧圖不平鋪background: url('index.png') no-repeat;
改變雪碧圖的位置background-position: -230px -145px;x/y值都為負值

.box {
            padding-left: 40px;
            margin-left: 100px;
            line-height: 50px;
            font-size: 16px;
            font-weight: normal;
            border-bottom: 2px solid lightcoral;
            background: url('index.png') no-repeat;
            background-position: -230px -145px;
            background-size: 413px 465px;
        }
複製程式碼

移動端雪碧圖的使用技巧

float:left/right;和display:inline-block;的優缺點

float:left/right;||display:inline-block;都是為了轉成行內塊級元素的
行內塊級元素的特點：1.可以設定寬高 2.可以在一行排布
float:left/right;
優點:1.轉成行內塊，在一行顯示 2.從左到右、從右到左排布
缺點：脫離文件流（父元素找不到子元素了，父元素的高度為零）
解決方法：

1.給父元素設定overflow:hidden;

2.利用偽元素來清除浮動帶來的影響（給子元素設定浮動了，必須給父元素加一個class類名clear）常用

高版本瀏覽器
.clear:after{
    display:block;
    content:"";
    clear:both;
}
低版本瀏覽器
.clear{
    *zoom:1;
}
複製程式碼

display:inline-block;

優點:1.不脫離文件流 2.轉化為行內塊，在一行顯示，從左到右
缺點:1.基線對齊 2.有間隙
1.間隙：在編輯程式碼時，行內元素與行內元素之間出現空格、回車，會有間隙（4px）(行內元素包括行內標籤與行內塊級標籤)
- 解決辦法：給 父元素或者body設定font-size:0;
基線對齊解決辦法：給行內元素（所有的標籤）都設定vertical-align:top/middle/bottom;
- vertical-align:top/middle/bottom;常用值：middle

rem 和 px 和 em

CSS中的樣式單位

px畫素，他是固定單位（解析度和電腦螢幕尺寸不變的情況下，1*1px就是指定的大小，不會受到其他樣式的影響）
em，相對於父元素的字型大小設定的單位（父元素font-size：20px => 1em=20px，也理解為1em是一個字型的大小）
rem，相對於根元素HTML的字型大小來設定的單位（html的font-size:100px，則頁面中的1rem=100px，以後修改了html的字型大小，所有以rem為單位的樣式都會跟著自動縮放）
百分比是根據容器內容的寬高來設定比例的（一定要保證父元素的寬/高是確定的才可以）

iframe

iframe:把其他頁面嵌入到當前頁面中
- 當前頁面：父頁面
- 嵌入頁面：子頁面

HTML+CSS筆記

專業開發人員寫筆記 MarkDown

IDE：編輯工具

VSCode：

瀏覽器知識彙總

VSCode快捷鍵：

css基礎知識

1.css的匯入方式

2.css 選擇器

選擇器權重

css盒子模型

塊狀標籤、行內標籤、行內塊狀標籤的區別

box

浮動

定位

css3中的動畫和變形

雪碧圖

雪碧圖的使用技巧

float:left/right;和display:inline-block;的優缺點

rem 和 px 和 em

iframe

相關文章