筆記整理（第一本前端書籍）

一、 html文檔和標記

• html是超文本標記語言，它通過為超文本添加標記的方式，來賦予超文本內容的網頁語義，即給網頁內容賦予某些用戶代理能夠理解的含義如瀏覽器，從而解析并顯示在網頁上。

• 屬性="屬性值":為瀏覽器提供有關標簽的額外信息。比如alt（屏幕閱讀設備上），src（引入源文件）等

• 段落和標題：h1不僅是最大最突出的標題（除非你用CSS縮小它的字號），搜索引擎也會將其視為僅次于title標簽的另一個搜索關鍵詞的來源。

• 復合元素：創建列表，表單和表格等用戶界面組件，比如<ul><li></li></ul>

• 嵌套標簽：要在一個標簽里嵌套另一個標簽（也就是前者的開標簽寫在后者的開標簽之前），必須要先關閉后一個標簽再關閉前面那個標簽。HTML 文檔的結構正是通過類似這樣的標簽嵌套，以及就此建立起來標簽間的“父－子”關系形成的。

• 文檔流： HTML 元素會按照它們各自在標記中出現的先后順序，依次從頁面上方“流向”下方。

• ★塊級元素和行內元素：幾乎所有 HTML 元素的 display 屬性值要么為 block，要么為 inline。最明顯的一個例外是 table 元素，它有自己特殊的 display 屬性值。

• 行內元素盒子：盒子會盡可能地收縮內容，在水平方向上并排顯示，----設置width，height無效（可以設置line-height），margin上下無效，padding上下無效，border有效。

• 塊級元素盒子：盒子會默認拓展到和父元素同寬，每個元素占據一行，垂直方向上堆疊排列，從新行開始結束接著一個斷行。

• html實體：在前面的例子中，兩個實體的名字分別是“left-double-quote”（左雙引號）和“right-double-quote”（右雙引號）
  的簡寫即&#ldquo和&#rdquo

• 文檔結構模型：html文檔結構對應文檔對象模型（DOM），dom是從瀏覽器的視角觀察頁面的元素和每個元素間的相對關系，由此得到一個家族樹即DOM Tree，在css中引用dom中特定的位置，就可以選中相應的html元素并且修改樣式屬性。

二、CSS的工作原理

• css添加到頁面中的三種方式：行內式，嵌入式，外部式，@import url（##）

• CSS 規則分兩部分，即選擇符和聲明。聲明又由兩部分組成，即屬性和值。聲明包含在一對花括號內選擇符

• css的選擇符：

1.上下文選擇符
1、緊鄰同胞選擇符 +
2、一般同胞選擇符 ~
3、子選擇符 >

 2.id和class 選擇符 
    可以給 id 和 class 屬性設定任何值，但不能以數字或特殊符號開頭。

 3.屬性選擇符
    1、屬性名選擇符[property]
    2、屬性值選擇符[property="value"]
        1、^= "value" 包含某個值開頭的選擇符
        2、$="value" 某個值結尾的選擇符
        3、~="value" 包含某個值的選擇符
 4.偽類選擇符
    1、UI偽類選擇符
        鏈接偽類選擇符 :link :visited :hover :active
        focus 偽類
        target 偽類
        hover 偽類
    2、結構偽類
        :first-child :last-child :nth-child
        :first-type-of...
 5.偽元素選擇符
    ::first-letter
    ::first-line
    ::before ::after
    (搜索引擎不會取得偽元素的信息（因為它在標記中并不存在）。因此，不要通過偽元素添加你想讓搜索引擎索引的重要內容。)
 6.通用選擇符 *

• css的繼承：
  CSS 中有很多屬性是可以繼承的，其中相當一部分都跟文本有關，比如顏色、字體、字號。
  然而，也有很多 CSS屬性不能繼承，因為繼承這些屬性沒有意義。
  這些不能繼承的屬性主要涉及元素盒子的定位和顯示方式，比如邊框、外邊距、內邊距。

• 層疊：
  就是層疊樣式表中的層疊，是一種樣式在文檔層次中逐層疊加的過程，
  目的是讓瀏覽器面對某個標簽特定屬性值的多個來源，確定最終使用哪個值。

• 瀏覽器層疊各個來源樣式的順序：
  瀏覽器默認樣式->用戶樣式表->鏈接（外部）樣式表[按照他們鏈接到頁面的先后順序]->嵌入式樣式->行內樣式

• 層疊規則：按照順序和權重來進行，空格!important 分號（;）用于加重聲明的權重，如 p {color:red !important;}

• CSS的屬性值分為三類：文本值，數字值，顏色值

三、定位元素和背景

• 元素盒子的屬性主要有：邊框屬性（border） 內邊距屬性（padding） 外邊距屬性（margin）

• 重置樣式表 reset.css。這個樣式表不僅重置了外邊距和內邊距，還對很多元素在跨瀏覽器顯示時的外觀進行了標準化。

• 垂直方向上的外邊距不疊加，水平方向上的外邊距疊加。

• box-sizing 屬性，通過它可以將有寬度的盒子也設定成具有默認的auto 狀態下的行為

• 浮動與清除：

把元素從常規的文檔流中拿出來，一是可以實現傳統出版物上文字圍繞圖片環繞的效果，二是可以讓原來垂直方向排列的元素變成水平排列，即上下堆疊變成左右并排，從而實現布局中的分欄。

 浮動的元素脫離了常規的文檔流后，緊跟在其后的元素會在空間允許的條件下向上提升。

 浮動非圖片元素時，必須給它設定寬度，否則后果難以預料。圖片無所謂，因為它本身有默認的寬度。

 浮動元素脫離了文檔流，其父元素也看不到它了，因而也不會包圍它。圍住浮動元素的三種方法：
 * 1.為父元素添加overflow:hidden，overflow:hidden本來的作用是防止元素被超大的內容撐大，它的另一個作用是迫使父元素圍住浮動的子元素。下拉菜單的頂級元素不能使用
 * 2.為父元素設定浮動，迫使父元素圍住浮動的子元素，但要為父元素其后的元素設置clear:both。
 * 3.在父元素最后添加子元素作為清除元素，迫使父元素圍住子元素。
    1.添加空的div元素，并設置clear:both
    2.父元素添加class="clearfix",并設置.clearfix::after {content=".";display:block;height:0;visibility:hidden;clear:both;}

 沒有父元素的時候如何清除浮動： 用.clearfix規則.

• 定位：css布局的核心是position，position屬性有4個值：static relative absolute fixed 默認值是static

  1.靜態定位：按照文檔流的順序上下堆疊

  2.相對定位：相對它原來在文檔流的位置，可以用top、left、bottom、right，但它原來占據的空間沒有改變，其他元素也沒有改變。

  3.絕對定位：使元素徹底脫離文檔流，元素原來占據的空間被"回收了"，一般是相對頂級元素body來定位。

  4.固定定位：使元素徹底脫離文檔流，和絕對定位的不同之處在于定位上下文是視口（瀏覽器窗口或者手持設備的屏幕），它不會隨滾輪的滾動而滾動

注意： 外部 div 改為相對定位之后，其后代中絕對定位的元素就會按照 top 和 left 屬性的設定，相對于外部 div 定位

• 顯示屬性：display的值有：inline，block，none，通過顯示屬性行內元素和塊級元素可以相互轉化。

• 背景：css中每個盒子都由兩個圖層組成：元素的前景層包括內容和邊框；元素的背景層應用在整個元素盒子的后面（3d）
  其中，背景圖片在背景顏色之前。

  background相關屬性：
  background-color background-image background-repeat background-position background-size background-attachment

  background-repeat的值：
  no-repeat,repeat-x,repeat-y,round,space(增大圖片間的空白)

  background-position有5個關鍵自值：
  top、left、bottom、right和 center,也可以設置數字值如(30%,40%)，還能設置負值

  background-size的值有：
  50%，cover，contain，100px 50px

  background-attachment背景粘附屬性，它的默認值是scroll，即背景圖片隨元素移動，如果把值設為fixed，背景圖片不會隨元素滾動。

  簡寫：background: #fff url(4.png) no-repeat scroll bottom left;

  background-clip 控制背景繪制區域的范圍

  background-origin 背景區域的原點

  以下 CSS3 屬性必須加 VPS：
  border-image translate
  linear-gradient transition
  radial-gradient background*
  transform background-image*
  transform-origin

 * 針對背景圖片或漸變

linear-gradient線性漸變屬性 background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%,#fff 75%, #e86a43)

radial-gradient放射性漸變屬性 如 background: radial-gradient(#e86a43, #fff,#123456)

四、字體和文本

• 字體的來源：
  用戶機器上安裝的字體；保存在第三方網站上的字體；保存在web服務器上的字體（可以使用@font-face隨網頁一起發給瀏覽器）

• 字體屬性：font font-size（筆須）font-family（必須） font-style font-weight font-variant

• 文本屬性：
  text-indent letter-spacing word-spacing text-decoration text-align line-height text-transform vertical-align

• text-indent具有繼承性,設定塊級盒子內容相對于包含元素的起點。默認情況下，這個起點就是包含元素的左上角.
  注意：對段落p等塊狀元素有用，span設置無效，因為span沒有有效的寬度，但可以為span設置margin-left一樣效果。

• letter-spacing 為正值時增大字符間距，為負值時縮小間距。

• word-spacing 單詞間距與字符間距非常相似，區別在于它只調整單詞間距，而不影響字符間距。
  注意： CSS 把任何兩邊有空白的字符和字符串都視作“單詞”

• 文本裝飾屬性 text-decoration 值有：underline none overline line-through blink

• 文本對齊屬性 text-align 值有：left right center justify
  center值也可以用來在較大的元素中居中較小的固定寬度的元素或圖片.

• 行高line-height 值是任何數字值，不需要單位, 也可以添加單位，如果只設置值忘記添加單位，會成倍放大元素的高度

• 文本轉換屬性 text-transform 值有：uppercase lowercase none captalize

• 垂直對齊屬性 vertical-align 值有：sub super top middle bottom或者任意長度值如60%
  注意： vertical-align 以基線為參照上下移動文本，但這個屬性只影響行內元素。想在垂直方向上對齊塊級元素，必須把其 display屬性設定為 inline

• 字體打包：

     <link  rel="stylesheet">
     @font-face {
     /*這就是將來在字體棧中引用的字體族的名字*/
     font-family:'UbuntuTitlingBold';
     src: url('UbuntuTitling-Bold-webfont.eot');
     src: url('UbuntuTitling-Bold-webfont.eot?#iefix')
     format('embedded-opentype'),
     url('UbuntuTitling-Bold-webfont.woff')
     format('woff'),
     url('UbuntuTitling-Bold-webfont.ttf')
     format('truetype'),
     url('UbuntuTitling-Bold-webfont.
     svg#UbuntuTitlingBold') format('svg');
     font-weight: normal;
     font-style: normal;
     }