css 和 文檔

• 層疊： css中解決樣式?jīng)_突的規(guī)則，稱為層疊
• 元素：

      替換、非替換元素
      替換元素： 用來替換元素的內(nèi)容部分橱脸，并非由文檔內(nèi)容直接表示。<img src='xxx'> 標(biāo)記片段中不包含任何具體內(nèi)容分苇，只有一個(gè)屬性
      非替換元素：大多數(shù)元素都是非替換元素添诉。
     元素顯示角色：
     塊級(jí)(block-level)，行內(nèi)(inline-level)
     display: none, inline, block, inline-block, list-item, run-in
  

• css and html:
  1. link 標(biāo)記： <link rel='stylesheet' type='text/css' href='sheet1.css' media='all' />
  2. media 屬性： all, aural(語音合成器), braille, print, screen, tty, tv <link rel='stylesheet' type='text/css' href='sheet1.css' media='screen, tv'/> 在tv医寿， 屏幕設(shè)備上使用共同的css樣式栏赴。
  3. style元素， <style type='text/css'> xxxxx </style>
  4. @import 指令： @import url(style.css) screen, tv; @import 必須寫在樣式表中靖秩，2.须眷， 必須寫在文檔開頭竖瘾，，出現(xiàn)在樣式表中其他規(guī)則的前面.

選擇器

• 規(guī)則結(jié)構(gòu)： 選擇器 + 聲明塊 h1(選擇器) {color: red; background: yellow}(聲明塊)
• 聲明和關(guān)鍵字： 格式：屬性： 關(guān)鍵字\數(shù)值;關(guān)鍵字在多個(gè)的情況下花颗，由空格分隔
• 選擇器：
  1. 元素： html { color: red}
  2. 選擇器分組： 使用捕传，分隔 選擇器 h1, p {color: grey}
  3. 通配選擇器: * {color: red;}
  4. 類選擇器: p.warning 多類選擇器， class='urgent warning' 選擇器如下: .urgent.warning
  5. ID選擇器: #ID
  6. 屬性選擇器:
     1.簡(jiǎn)單屬性選擇器： <h1 class='people'> hello </h1> , h1[class] {color: red;} img[alt] {border: 1px solid red;}扩劝， 可以多個(gè)屬性同時(shí)選擇： a[href][title] {color: red; font-weight: bold;}
     2. 屬性值選擇器： planet[name="1" {color: red;}]
     3. 部分屬性值選擇：主要應(yīng)用在class上庸论，因?yàn)閏lass可能為多個(gè)， 不能直接p[class='name'] 當(dāng)p以后有多個(gè)class時(shí)候棒呛，而是需要p[class~='name']
     4. 特定屬性選擇器： *[lang!="en"] {color: "white";}
  7. 使用文檔結(jié)構(gòu)：
     1. 后代選擇器： h1 em {color: gray;}
     2. 子元素選擇器： h1 > em {color: gray;}
  8. 偽類和偽元素：（可以為文檔中不一定具體存在的結(jié)構(gòu)制定樣式聂示， 會(huì)根據(jù)某種條件來應(yīng)用部分樣式）
     1, 偽類： a 特有的 :link, :visited, 其他的都存在的 :focus, :hover, :active, 其中a 的樣式聲明順序?yàn)?:linkm, :visited, :hover, :active
     2. 偽元素選擇器(動(dòng)態(tài)的給html改變內(nèi)容，樣式簇秒，可以修改文檔本身)： first-letter, :first-line, :before, :after,例如：h2:before{}content: '||'}

結(jié)構(gòu)和層疊

> 繼承是　從一個(gè)元素向其后代元素傳遞屬性所采用的機(jī)制鱼喉，樣式?jīng)_突的解決機(jī)制：通過考慮聲明的特殊性，聲明來源趋观，特殊性蒲凶，這個(gè)決策過程就稱為層疊(cascade)

• 特殊性：

  1. 對(duì)于選擇器中所給定的各個(gè)ＩＤ屬性：0, 1, 0, 0
  2. 對(duì)于選擇器中的各個(gè)類屬性值　屬性選擇、偽類: 0, 0, 1, 0
  3. 選擇器中各個(gè)元素和偽元素：0, 0, 0, 1
  4. 通配符選擇器對(duì)特殊性沒有任何貢獻(xiàn)
  5. 內(nèi)聯(lián)樣式的特殊性: 1, 0, 0, 0

  id 與　p[id='id'] 中拆内，第一個(gè)貢獻(xiàn)的為：0, 1, 0, 0第二個(gè)貢獻(xiàn)為 0, 0, 1, 0

• 重要性: !important p.dark {color: red !important; background: white !important}
  !important　沒有特殊性旋圆，不過要與其他的分開考慮，所有!important的會(huì)分組在一起考慮麸恍，其中的沖突在內(nèi)部解決灵巧。重要聲明與非沖要聲明相比，總是勝出抹沪。

• 繼承沒有特殊性刻肄，通配符大于繼承的特殊性。注意：不應(yīng)該不加區(qū)別的使用通配符選擇器融欧。

• 層疊規(guī)則：

  1. 找出所有規(guī)則敏弃，這些規(guī)則都包含與一個(gè)給定元素匹配的選擇器
  2. 按照權(quán)重對(duì)應(yīng)用到該元素的所有聲明排序，標(biāo)志!important的規(guī)則的權(quán)重高于沒有的噪馏，按來源進(jìn)行對(duì)應(yīng)用到元素的所有聲明排序麦到，３中來源，　創(chuàng)作人員欠肾，讀者瓶颠，用戶代理。排序?yàn)椋骸∽x者的重要聲明刺桃，〈饬堋２：創(chuàng)作人員的重要聲明，３：創(chuàng)作人員的正常聲明，√乙啤４：讀者的正常聲明屋匕，　５：用戶代理聲明
  3. 按特殊性對(duì)應(yīng)用到給定元素的所有聲明排序借杰，　有較高特殊性的元素權(quán)重大與較低權(quán)重的元素
  4. 按出現(xiàn)順序?qū)?yīng)用到元素的所有聲明排序过吻，一個(gè)聲明在樣式表或者文檔中越后出現(xiàn)，他的權(quán)重越大第步，如果樣式表中有導(dǎo)入的樣式表疮装，一般認(rèn)為出現(xiàn)在導(dǎo)入樣式表中的聲明在前缘琅，主樣式表中的所有樣式表聲明在后粘都。（沒有比較　多個(gè)導(dǎo)入樣式表中的樣式權(quán)重）

值和單位：

em ex為相對(duì)單位長(zhǎng)度，　em定義為　一種給定字體的font-size的值刷袍，如果一個(gè)元素的font-size 為１４px翩隧，　那em為14px,　1ex = 0.5em

字體(先略過)

文本屬性

文本是內(nèi)容，　而字體用于顯示內(nèi)容

• text-indent: 數(shù)值： length, percentage, inherit呻纹，應(yīng)用于： 塊堆生，繼承： 有，百分?jǐn)?shù)：相對(duì)于包含塊的寬度
• text-align: 數(shù)值: left, right, center, justify, inherit, 應(yīng)用于：塊雷酪，繼承性：有
• line-height: 值：length, percentage, number, normal, inherit淑仆，初始值: normal, 應(yīng)用于：所有元素，繼承性：有

基本視覺格式化：（書中的css 版本為 2.１　其中大量的規(guī)則已經(jīng)不能使用了）

• 基本框：css假定每個(gè)元素都會(huì)生成一個(gè)或多個(gè)矩形框哥力，這成為元素框蔗怠。包含：內(nèi)邊框, 邊框，外邊框吩跋，內(nèi)容

• 包含塊：包含塊是一個(gè)元素的上下文

• 塊元素：

  1. 水平格式化：元素的寬度：指的是　左外邊界到右外邊界的距離寞射，可見區(qū)域：width + 內(nèi)邊距，規(guī)則：正常流中的塊級(jí)元素框的水平部分總和等于　父元素的width,
  2. 水平屬性：　margin-left, border-left, padding-left, width, padding-right, border-right, margin-right
  3. width,, margin-left, margin-right中的某個(gè)值設(shè)定為auto锌钮，其余兩個(gè)就會(huì)計(jì)算指定為特定值桥温，使元素的框?qū)挾鹊扔诟痹氐膚idth,　如果三個(gè)都設(shè)定為非auto，會(huì)產(chǎn)生過分受限梁丘，這時(shí)候從會(huì)把　margin-right強(qiáng)制為auto侵浸。margin-left, margin-right 設(shè)定為auto, 會(huì)將元素居中。border不能使用白分?jǐn)?shù)
  4. 一個(gè)元素的默認(rèn)的高度由其內(nèi)容決定氛谜，　高度還會(huì)受內(nèi)容寬度影響通惫。　段落越窄混蔼，相應(yīng)的高度就會(huì)越高履腋。
     5.　垂直屬性：margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom, 屬性值　之和必須等于　包含塊的height, 如果一個(gè)正常流中的一個(gè)塊元素的margin-top, margin-bottom設(shè)置為auto,他會(huì)自動(dòng)計(jì)算為０，并不會(huì)讓塊垂直居中
  5. auto 如果height 為auto，　其高度正好為包含內(nèi)容的高度遵湖，
  6. 合并垂直外邊框：這種合并行為只應(yīng)用于外邊距悔政，如果元素有內(nèi)邊距和邊框，他們絕對(duì)不會(huì)合并延旧。

• 行內(nèi)元素－－行內(nèi)布局：

  1. 基本概念：　匿名文本谋国，em框,　內(nèi)容區(qū)，行間距((font-size - line-height) / 2)迁沫，行內(nèi)框（非替換元素芦瘾，行內(nèi)框的高度等于line-height，　替換元素集畅，行內(nèi)框高度等于內(nèi)容區(qū)的高度　替換元素沒有行間距）
  2. 規(guī)則：
     1. 內(nèi)容區(qū)類似于一個(gè)塊級(jí)元素的內(nèi)容框
     2. 行內(nèi)元素的背景應(yīng)用于內(nèi)容區(qū)　以及所有　內(nèi)邊距
     3. 行內(nèi)元素的邊框要包圍內(nèi)容區(qū)　及所有　內(nèi)邊距和邊框
     4. 非替換元素的內(nèi)邊距近弟，邊框和外邊距對(duì)汗內(nèi)元素或者其生成的框沒有垂直效果，也就是說挺智，　他們呢不會(huì)影響元素行內(nèi)框的高度
     5. 替換元素的外邊距和邊框　會(huì)影響該元素行內(nèi)框的高度祷愉，相應(yīng)的影響該元素行框的高度

• 行內(nèi)　非替換元素：

  1. font-size：定義內(nèi)容（字體）高度，　line-height: 定義框高度赦颇，　(line-height - font-size) / 2 為行間距二鳄，　line-height 可以小于font-size導(dǎo)致行內(nèi)框小于內(nèi)容區(qū)，行間距為負(fù)數(shù)媒怯，造成行間重疊订讼。
  2. 行框定義為　行中最高行內(nèi)框的頂端到最低行內(nèi)框低端之間的距離，為了避免行間重疊扇苞。
  3. vertical-align: top, bottom, middle etc,　描述基準(zhǔn)線的位置欺殿。
  4. line-height: 數(shù)值的話：為font-size的縮放比例。該屬性是可以繼承的杨拐，從而在不同的ｆｏｎｔ-size中存在不同的line-height,
     5.　內(nèi)邊距祈餐，外邊距，邊框　可以應(yīng)用到行內(nèi)非替換元素哄陶，但是卻不會(huì)影響行框的高度帆阳，可能會(huì)造成重疊。實(shí)際上屋吨，外邊距不會(huì)應(yīng)用到元素上蜒谤，但是可以應(yīng)用到兩側(cè)≈寥牛可以將文本推離到兩側(cè)鳍徽。

• 行內(nèi)塊元素(inline-block)：

  1. 類似于　圖像放在行中

邊框：

• 基本元素框：
  1. 元素的width：左內(nèi)邊　－－　右內(nèi)邊敢课，　height: 上內(nèi)邊－－下內(nèi)邊阶祭，　不能應(yīng)用到行內(nèi)非替換元素, width: 白分?jǐn)?shù)想對(duì)于　包含塊的　width, 正常流中的元素很少設(shè)定height绷杜，height: 白分?jǐn)?shù)相對(duì)于　包含塊的height。
  2. 背景顏色會(huì)延伸到內(nèi)邊距中濒募，而不會(huì)到外邊距鞭盟。
  3. margin: 白分?jǐn)?shù)相對(duì)于包含塊的width, margin 的左右，上下都是相對(duì)于包含塊width
  4. padding: 白分?jǐn)?shù)相對(duì)于包含塊的width, padding 的左右瑰剃，上下都是相對(duì)于包含塊width
  5. 值復(fù)制：　top right bottom left, top -> right, top -> bottom, right -> left齿诉。
  6. 邊框：border-style: top right bottom left; (none, hidden, dotted, dashed, solid double, grove, ridge, inset, outset, inherit) 注意在邊框指定為none 的時(shí)候，設(shè)定其他屬性是沒有作用的晌姚≡辆纾可以設(shè)定單邊樣式：　border-top-style, border-right-style etc, border-width　同style類似（thin, medium, thick, length, inherit）, 單邊設(shè)定border-top-width, border-color 同style 一樣,單邊設(shè)定 border-top-color: 簡(jiǎn)寫：border-top: thick solid gray;全局邊框: border: thick solid gray;

顏色和背景：（略過）

浮動(dòng)和定位：

• 屬性：　float: left, right, none, inherit, 應(yīng)用于：所有元素，
• 浮動(dòng)會(huì)將元素從正常流中　刪除挥唠，浮動(dòng)元素包含塊為　其最近的塊級(jí)祖先元素抵恋。只要是浮動(dòng)元素，就會(huì)生成一個(gè)塊級(jí)框猛遍，回像塊及元素一樣表現(xiàn)和擺放馋记。簡(jiǎn)單規(guī)則：
  1. 浮動(dòng)元素的左右外邊界不能超過其包含塊的　左右內(nèi)邊界号坡。
     　　　2. 浮動(dòng)元素的頂端　不能比其父元素的內(nèi)邊界更高
• 定位：　position: static, relative, absolute, fixed, inherit
• 對(duì)于一個(gè)非根元素懊烤，　如果其position為　relative, static包含塊設(shè)定為最近的塊級(jí)框、表單元格宽堆、行內(nèi)塊祖先框的內(nèi)容邊界構(gòu)成
• 對(duì)于非根元素腌紧，如果其position 為absolute，包含塊設(shè)定為最近的position值不是static　的祖先元素畜隶，如果這個(gè)祖先是塊級(jí)元素壁肋，　包含塊設(shè)定為該元素的內(nèi)邊距邊界。
• relative: 元素想對(duì)于之前元素偏移位置籽慢，它原本所占據(jù)的空間仍然保留浸遗。
• absolute: 從文檔流中完全刪除，并相對(duì)于包含塊定位箱亿。元素定位之后會(huì)生成一個(gè)塊級(jí)框跛锌。
• fixed: 表現(xiàn)類似與absolute，不過包含塊是視圖本身届惋。
• relative, absolute, fixed, 描述偏移：　top, right, bottom, left, 用來描述　距離包含塊最近邊的偏移距離髓帽。width, height，　對(duì)于定位元素并不重要脑豹，因?yàn)榭梢酝ㄟ^四個(gè)屬性來隱形的確定郑藏。
• min-width, min-height, max-width, max-height　作用：　可以相對(duì)安全的混合使用不同的單位，　使用白分?jǐn)?shù)的時(shí)候瘩欺，可以設(shè)定長(zhǎng)度限制必盖。
• 內(nèi)容溢出和可見性：　overflow: visible(超出邊框) | hidden(超出邊框的被剪裁) | scroll(html中添加滾輪展示) | auto | inherit, visibility: visible | hidden | collapse | inherit, visible　設(shè)定為展示內(nèi)容拌牲，　hidden 隱藏內(nèi)容，但是并不從文檔流中刪除歌粥，　區(qū)別于 display: none, 會(huì)從文檔中刪除们拙，不占據(jù)位置，　所以 visibility　是可以繼承的阁吝，可以設(shè)定父元素hidden, 子元素為visible

- [還沒有介紹 collapse呢]

• 絕對(duì)定位：包含塊： 最近的position值不為 static 的元素砚婆。通常簡(jiǎn)單的做法是， 選在一個(gè)元素作為絕對(duì)定位元素的包含塊突勇，將其position設(shè)定為relative装盯，并沒有偏移。元素絕對(duì)定位時(shí)候甲馋，還為其后代元素建立了一個(gè)包含塊埂奈。文檔可以滾動(dòng)的話，絕對(duì)定位是隨著文檔滾動(dòng)的定躏，因?yàn)槎ㄎ辉氐陌瑝K是文檔流的一部分账磺。外邊距為 auto可以得到垂直居中的 效果，
• 固定定位： 固定定位與絕對(duì)定位相似痊远，只是包含塊是 視窗垮抗。
• 相對(duì)定位：

家:

海，天空碧聪，星辰冒版，公主，王子逞姿，烤箱（蛋糕）辞嗡，狗，毛絨玩具