360前端星計劃學習-HTML + CSS

時間  2020-01-10
標籤 前端 計劃 學習 html css 欄目 快樂工作 简体版
原文   原文鏈接

瀏覽器

瀏覽器 渲染引擎 JavaScript引擎
IE Trident JScript
Edge EdgeHTML Chakra
Safari Webkit Nitro
Chrome Blink V8
FireFox Gecko SpiderMonkey
Opera Prasto -> blink Carakan -> V8

殼瀏覽器

  • 360瀏覽器css

  • UC瀏覽器html

  • QQ瀏覽器web

  • 搜狗瀏覽器算法

HTML

HTML是什麼

  • HyperText Markup Languagecanvas

  • 使用標籤來描述頁面的內容和結構瀏覽器

Doctype的做用

  • 指定頁面的使用標準和版本ide

  • 決定使用哪一種渲染模式佈局

渲染模式

  • Quirks Mode (怪異模式)字體

  • Almost standard Mode (標準準模式)優化

  • Standard Mode (標準模式)

注意: 若是當咱們不指定Doctype時，IE六、IE7會採用怪異模式渲染頁面，IE8以標準模式渲染頁面，firefox11也是以標準模式渲染頁面。

enter image description here

HTML設計思想

  • 兼容已有內容

  • 避免沒必要要的複雜性

  • 解決現實問題

  • 優雅降級

  • 尊重事實標準

HTML5變化

  • Doctype、meta

  • 新增語義化標籤

  • 去除純表示性的標籤

  • WebStorage、canvas、video、audio、拖拽、離線

語法

  • 標籤不區分大小寫、推薦小寫

  • 空標籤能夠不閉合

  • 屬性沒必要引號。推薦雙引號

  • 某些屬性值能夠省略，如required、readonly

圖片

圖片寬高

  • 不指定高寬：原圖大小顯示

  • 指定寬度：按比例縮放到指定寬度

  • 指定高度：按比例縮放到指定高度

  • 指定高寬：強制按照指定高寬顯示

圖片格式

  • jpg：照片

  • png：色彩較少時使用，png24能夠半透明

  • gif：沒法半透明，能夠多幀作動畫

  • WebP

注意: WebP 的優點體如今它具備更優的圖像數據壓縮算法，能帶來更小的圖片體積，並且擁有肉眼識別無差別的圖像質量；同時具有了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉化效果都很是優秀、穩定和統一。更多...

語義化

  • 提高代碼的可讀性、可維護性

  • 搜索引擎的優化（利於SEO）

  • 提高無障礙性

CSS

選擇器

簡單選擇器

  • 通配選擇器 *

  • 標籤選擇器 p

  • id選擇器 #id

  • 類選擇器 .class

屬性選擇器

  • [attr]只使用屬性名，但沒有肯定任何屬性值;

  • [attr="value"]指定屬性名，並指定了該屬性的屬性值;

  • [attr~="value"]指定屬性名，而且具備屬性值，此屬性值是一個詞列表以空格隔開，其中詞列表中包含了一個value;

  • [attr^="value"]指定了屬性名，而且有屬性值，屬性值以value開頭;

  • [attr$="value"]指定了屬性名，而且有屬性值，並且屬性值以value結尾;

  • [attr*="value"]指定了屬性名，而且有屬性值，並且屬值中包含value;

  • [attr|="value"]指定了屬性名，而且屬性值是value或者以「value-」開頭的值;

僞類 (pseudo-classes)

基於 DOM 以外的信息去（好比根據用戶和網頁的交互狀態）選擇元素。

a:link    { ... }   /* 未訪問過的連接 */
a:visited { ... }   /* 已訪問過的連接 */
a:hover   { ... }   /* 鼠標移到連接上的樣式 */
a:active  { ... }   /* 鼠標在鏈接上按下時的樣式 */
a:focus   { ... }   /* 得到焦點時的樣式 */

選擇器組合

  • 直接組合

E[foo="bar"]
E.warning
E#myid
#myid.warning
.warning[foo="bar"]

  • 後代組合

/* 後代選擇器 */
  article p {...}
/* 親子選擇器 */
  article > p {...}

  • 相鄰兄弟

input[type="check"] + label {...}

  • 通用兄弟

.active ~ li {...} /* 選擇全部兄弟 */

  • 同時爲一組選擇器定義樣式

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
  margin: 0;
  padding: 0;
}
[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

選擇器優先級根據特異度判斷(Specificity)

選擇器 內聯? id個數 (僞)類個數 標籤個數 特異度
#nav .list li a:link 0 1 2 2 0122
.hd ul.links a 0 0 2 2 0022

哪條聲明起做用？

  • 找出匹配到的該屬性全部聲明

  • 根據規則來源，優先級從低到高：

  • 瀏覽器預設

  • 用戶設置

  • 網頁樣式

  • 同一來源中，按照特異度排序，越特殊優先級越高

  • 特異度同樣時，按照樣式書寫順序，後面的優先級高

有 !important 時的變化

  • 找出匹配到的該屬性全部聲明

  • 根據規則來源, 優先級從低到高：

  • 瀏覽器預設

  • 用戶設置

  • 網頁樣式

  • 含 !important 的網頁樣式

  • 含 !important 的用戶設置樣式

  • 同一來源中，按照特異度排序，越特殊優先級越高

  • 特異度同樣時，按照樣式書寫順序，後面的優先級高

css文本樣式可繼承

font-family

  • 使用逗號分隔的字體族名稱

  • 初始值由瀏覽器設置決定，可繼承

字體匹配算法

  1. 瀏覽器先獲取一個系統字體列表

  2. 對於元素中每個字符，使用 font-family 屬性及其它屬性進行匹配，若是能匹配就暫定該字體

  3. 若是步驟2沒有匹配上，選擇下一個可選的 font-family 執行步驟2

  4. 若是匹配到一個字體，可是字體中沒有該字符，繼續對下一個可選的 font-family 執行步驟2

  5. 若是沒有匹配到字體，使用瀏覽器默認字體。

font-family 使用

  • 英文字體放在中文字體前面

  • 最後老是添加通用字體族

font-size

  • 定義文字的大小，可以使用px、百分比、em等作單位

  • 取值

    • 絕對值 xx-small | x-small | small | medium | large | x-large | xx-large

    • 相對值 larger | smaller

    • 長度

    • 百分數，相對於父元素計算值

  • 初始值爲 medium（由瀏覽器設置決定，通常16px），可繼承

長度單位em

  • 通常是相對於元素 font-size 的計算值的

  • 用在 font-size 屬性上時，是相對於父元素的 font-size 計算值

font-style

  • 定義文字以斜體仍是正常方式顯示

  • 取值：normal | italic | oblique

  • 初始值爲 normal，可繼承

font-weight

  • 定義文字的粗細程度

  • 取值：normal | bold | bolder | lighter | 100 | 200 | ... | 900

  • 初始值爲 normal，可繼承

line-height

  • 元素所屬的 line box 所佔高度

  • 初始值爲normal（具體值由瀏覽器決定），可繼承

  • 取值：<長度> | <數字> | <百分比>

  • 段落文字通常取值1.4～1.8

line-height:26px; 表示行高爲26個像素
line-heigth:120%;表示行高爲當前字體大小的120%
line-height:2.6em; 表示行高爲當前字體大小的2.6倍

帶單位的行高都有繼承性，其子元素繼承的是計算值，如父元素的字體大小爲14px，定義行高line-height:2em;則計算值爲 28px，不會因其子元素改變字體尺寸而改變行高。(例如：父元素14px，子元素12px,那麼行高就是28px，子元素雖然字體是12，行高仍是父元素的行高)
line-height:2.6;表示行高爲當前字體大小的2.6倍
不帶單位的行高是直接繼承，而不是計算值，如父元素字體尺寸爲14px，行高line-height:2;他的行高爲28px;子元素尺寸爲12px，不須要再定義行高，他默認的行高爲24px。（例如：子元素12px，他的行高是24,不會繼承父元素的28）

text-align

  • 定義文本在容器內的對齊方式

  • 取值：left | right | center | justify

  • 初始值由 HTML 的 dir 屬性決定，可繼承

letter-spacing

  • 指定字符之間的間距

  • 取值：normal | <length>

  • 初始值爲 normal，可繼承

word-spacing

  • 指定單詞之間的間距

  • 取值：normal | <length>

  • 初始值爲 normal，可繼承

text-indent

  • 指定文本縮進

  • 取值：normal | <length> | <percentage>

  • 初始值爲 0，可繼承

text-decoration

  • 定義了文本的一些裝飾效果，好比下劃線、刪除線等

  • 初始值爲none，可繼承

  • 其它值：underline | line-through | overline

white-space

  • 指定空白符如何處理

  • 取值：normal | nowrap | pre

word-break

  • 指定是否容許在單詞中間換行

  • 取值： normal | break-all | keep-all

box model

width的值爲百分比時，參考的是父元素盒子的width;
height的值爲百分比時，參考的是父元素盒子的height;
padding的值爲百分比時，參考的是父元素的width;
margin的值爲百分比時，參考的是父元素的width;

塊級元素(Block-level Elements)

  • 會被格式化成塊狀的元素

  • 例如 p、div、section 等

  • 將 display 設置爲 block、list-item、table 使元素變爲塊級

行級元素(Inline-level Elements)

  • 不會爲其內容生成塊級框

  • 讓其內容分佈在多行中

  • display 設置爲 inline、inline-block、inline-table 使元素變爲行級

margin：行級盒的 margin-top 和 margin-bottom 不會產生效果
padding：行級盒的 padding-top 和 padding-top 不影響行佈局

塊級盒子中的子盒子的生成

  • 塊級盒子中能夠包含多個子塊級盒子

  • 能夠包含多個行級盒子

  • 不在行級元素裏面的文字，會生成匿名行級盒。好比:

<p>Some<em>Text</em></p>

  • 塊級盒子中不能同時包含塊級和行級盒子。遇到這種狀況時，會生成匿名塊級盒來包含行級盒。好比:

<div><h1>標題</h1><span>2016-12-12</span></div>

行級盒子內的子盒子的生成

  • 行級盒子內能夠包含行級盒子

  • 行級盒子包含一個塊級盒子時，會被塊級盒子拆成兩個行級盒子，這兩個盒子又分別被匿名塊級盒包含

定位模式

  • 常規流(Normal Flow)

  • 浮動(Float)

  • 絕對定位(Absolute Positioning)

常規流

  • 除根元素、浮動元素和絕對定位元素外，其它元素都在常規流以內(in-flow)

  • 而根元素、 浮動和絕對定位的元素會脫離常規流(out of flow)

  • 常規流中的盒子，屬於塊級格式化上下文或行級格式化上下文

塊級格式化上下文 (Block Formatting Context)

  • 盒子在容器（包含塊）內從上到下一個接一個地放置

  • 兩個兄弟盒之間的豎直距離由 margin 屬性決定

  • 同一個 BFC 內垂直 margin 會合並

  • 盒子的左外邊緣挨着容器（包含塊）的左邊

塊級格式化上下文(BFC) 的特性:

  • BFC 內的浮動不會影響到BFC外部的元素

  • BFC 的高度會包含其內的浮動元素

  • BFC 不會和浮動元素重疊

  • BFC 能夠經過 overflow:hidden 等方法建立

BFC 的建立:

  • 浮動框

  • 絕對定位框

  • 非塊級的塊容器(inline-block)

  • overflow 屬性非 visible 的塊框

BFC的做用:

  • 清除浮動

  • 防止 margin 摺疊

  • 雙欄佈局

行級格式化上下文 (Inline Formatting Context)

  • 盒子一個接一個水平放置

  • 盒之間的水平 margin，border和padding 都有效

  • 同一行的盒子所在的矩形區域叫行盒(Line box)

  • 當一個行盒放不下上下文內全部盒子時，會被分到多個垂直堆疊的行盒裏

  • 行盒內的水平分佈由'text-align'屬性決定

  • 若是一個行級塊沒法分割(單詞、inline-block)，該元素會被做爲一個總體決定分佈在哪個行盒

浮動（float）

  • 浮動元素從常規流中脫離，被漂浮在容器(包含塊)左邊或右邊

  • 浮動盒會一直漂到其外邊緣捱到容器邊緣或另外的浮動盒

  • 浮動元素不會影響其後面的流內塊級盒

  • 可是浮動元素後面的行級盒子會變短以避開浮動元素

position

  • static，非定位，默認值

  • relative，相對定位（相對本身）

  • absolute，絕對定位，相對非 static 祖先元素定位

  • fixed，相對於視口絕對定位

relative

  • 在常規流裏面佈局

  • 相對於本身本應該在的位置進行偏移

  • 使用 top、left、bottom、right 設置偏移長度

  • 流內其它元素當它沒有偏移同樣佈局

absolute

  • 脫離正常流

  • 相對於最近的非 static 祖先的 padding box 定位

  • 不會對流內元素佈局形成影響

  • 能夠有 margin，但不會摺疊

fixed

  • 相對於 Viewport 定位

  • 不會隨頁面滾動發生位置變化

z-index 堆疊層次

爲定位元素指定其在 z 軸的上下等級
用一個整數表示，數值越大，越靠近用戶
初始值爲 auto，能夠爲負數、0、正數

注意: z-index大的不必定在上面，要考慮到層疊上下文
關於層疊上下文

堆疊上下文的生成

  • Root 元素

  • z-index 值不爲 auto 的定位元素

  • 設置了某些 CSS3 屬性的元素，好比 opacity、transform、animation 等

繪製順序

  • 在每個堆疊上下文中，從下到上：

    • 造成該上下文的元素的 border 和 background

    • z-index 爲負值的子堆疊上下文

    • 常規流內的塊級元素非浮動子元素

    • 非定位的浮動元素

    • 常規流內非定位行級元素

    • z-index 爲 0 的子元素或子堆疊上下文

    • z-index 爲正數的子堆疊上下文

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程