2. 程式人生 > >HTML5和css3

HTML5和css3

阿新 • • 發佈：2018-06-25
cli 距離 情況下 20px none 推薦 內部 lin center

超鏈接

    <a target="頁面打開位置" href="鏈接地址">內容</a>
    target:_blank 重新打開一個頁面
    target:_self 當前頁面打開

1.頁面地址：
基礎功能，用於進入該鏈接的頁面；
2.錨點：
需要給標簽名定義id，鏈接地址為#id名，即可在當前頁面進行跳轉；
3.功能性鏈接：
打電話打電話；
發郵件；
***

文本元素

    - h1-h6:對應一級標題到六級標題，字體大小默認情況下從大到小；
    - p：段落；
    - q：小段引用，一般不超過一行；
    - blockqoute:大段引用；
    - abbr：引用，一般用於英文縮寫的全稱解釋；
    - cite：引用參考文獻；
    - b：加粗突出顯示的文本。因加粗一般無法量化不利於排版，一般不用；
    - strong：重要的文本；
    - i：應區別對待的文本，斜體；
    - em：強調的文本；

無語義元素

    - div：分區塊，便於排版；
    - span：行內元素（不換行），僅用於給一小段文本添加樣式；
    - br：空元素，用於在頁面中換行，因換行後間距無法量化不利於排版，一般不用；
    - hr：空元素，用於在頁面中加入分割符號，一般不用；
    - pre:預格式化元素，頁面顯示代碼格式。

實體字符

    書寫格式：&實體名稱；或&#實體編號；
    背景：在瀏覽器中，有些字符會被特殊處理，如<,>會被瀏覽器認為是標記符號，不會直接顯示到頁面；空白字符會被瀏覽器折疊成1個空格。
        空格      &nbsp；      &#160；
    <   小於符號    &lt；        &#60；
    >   大於符號 &gt；       &#62；
    &   並且符號 &&amp；     &#38；
    ?   版權符號 &copy;     &#169;

常見的CSS屬性

color:red   顏色
text-align:center   對齊方式
font-size:28px 字    體大小
font-weight：bold    文字粗細
background-color：red     背景顏色

CSS選擇器

基礎選擇器

  1. 元素
  2. 類

  3. ID（錨點可以使用，一般不推薦使用，預留給JS用）

  4. 通配符選擇器

    格式：*+聲明塊
例子：*{color:red;}

  5. 並集選擇器

    h1{color:red;}
h2{color:red;}
h3{color:red;}
格式：元素或類或ID+","+元素或類或ID+聲明塊
例子：h1,h2,h3{color:red;}
 p,.container,#box{background-color:deeppink;}

    層次選擇器

  6. 子集選擇器

    格式：父級元素名稱+">"+子級元素名稱+聲明塊
例子：div>p{color:red;}

  7. 後代選擇器

    格式：祖先元素名稱+"空格"+後代元素名稱+聲明塊
例子：div p{color:red;}

  8. 兄弟選擇器

    格式：兄弟元素A+"+"+兄弟元素B+聲明塊
例子：div+p{color:red;}

註：只能選中元素A後面的第一個元素

  9. 通用選擇器

    格式：兄弟元素A+"~"+兄弟元素B+聲明塊
例子：div~p{color:red;}

註：表示可以選擇元素A後面任意位置的同級元素

    偽類選擇器

  • 動態偽類選擇器

  1. 未訪問

    格式：a +":"+"link"+聲明塊
例子：a:link{color:black;}

  2. 已訪問(訪問後）

    格式：a +":"+"visited"+聲明塊
例子：a:visited{color:green;}

  3. 懸停（鼠標停留在鏈接上時的樣式）

    格式：a +":"+"hover"+聲明塊
例子：a:hover{color:deeppink;}

  4. 點擊時

    格式：a +":"+"active"+聲明塊
例子：a:active{color:deeppink;}

  5. 焦點框（多用於輸入框肯鏈接）

    格式：a +":"+"focus"+聲明塊
a:focus{color:五光十色；}

以上偽類書寫順序
A方案：
link,visited,focus,hover,active
B方案：
visited,link,focus,hover,active
註：IE7以前是不支持:focus
註：IE6以前是不支持:hover,active

  • 結構偽類選擇器

    1.格式：元素名稱+":nth-child(n)"+{聲明塊}
例子： h1:nth-child(5){color:gray;}
表示選中第5個h1元素，顏色為灰色
表示選中第5個元素，並且滿足是h1的情況，才會應用樣式

註：（n）中的n表示元素的位置
:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。


2.格式：元素名稱+":nth-of-type(n)"+{聲明塊}
例子： h1:nth-of-type(5){color:gray;}

表示選中類別為h1的第5個h1
表示先篩選出所有的h1標簽，然後在結果裏選中第5個h1
:nth-of-type(n) 選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素。


3.格式：元素名稱+":first-child"+{聲明塊}
例子： h1:fist-child{color:gray;}
表示選中第1個h1元素

4.格式：元素名稱+":last-child"+{聲明塊}
例子： h1:last-child{color:gray;}
表示選中最後1個h1元素


5.格式：元素名稱+":nth-child(odd)"+{聲明塊}
例子： h1:nth-child(odd){color:gray;}
表示選中奇數項

6.格式：元素名稱+":nth-child(even)"+{聲明塊}
例子： h1:nth-child(even){color:gray;}
表示選中偶數項

  • 否定偽類選擇器

    格式：元素名稱+":not(相應的選擇條件)"+{聲明塊}
例子： h1:not(:nth-child(3)){color:gray;}
表示除第3個h1元素，都應用樣式

偽元素選擇器

    1.格式：元素名稱+":"+"before"+｛content:"加的內容"｝

    例子：h1:before{
    content: "F51";
    }
    表示在元素前面加內容

    2.格式：元素名稱+":"+"after"+｛content:"加的內容"｝

    例子：h1:before{
    content: "F51";
    }
    表示在元素後面加內容

    3.格式：元素名稱+":"+"first-line"+{聲明塊}
    例子：p:first-line{color:green}
    表示選中第一行
    
    4.格式：元素名稱+":"+"first-letter"+{聲明塊}
    例子：p:first-letter{color:red}
    表示選中第一個字母

    5.格式：元素名稱+"::"+"selection"+{聲明塊}
    例子：p::selection{background-color:green;color:chocolate}
    表示設置選中內容的背景色和字體色

層疊

層疊機制

當發生聲明沖突（同一個樣式的不同值應用到同一個標簽上）時瀏覽器會觸發層疊機制。

層疊過程

  1. 比較優先級

    重要性：屬性值+！important;
來源：用戶>開發者>瀏覽器

  2. 比較特殊性（特指值或特指度）
    每個聲明都有一個特殊性（specificity）
    選擇器規則適用範圍越大，特殊性越小。
    行內樣式>ID選擇器>類選擇器>元素選擇器>通配符選擇器

    a：聲明是行內樣式則為1，否則為0；
b：規則中ID選擇器的個數；
c：規則中類選擇器，偽類選擇器，屬性選擇器個數；
d：規則中元素選擇器，偽元素選擇器的個數
通配符選擇器的特殊性為0。

a, b, c, d依次比較只要對應位相同進入下一位比較，否則停止比較，該位上數值大的勝出。

選擇器分組時（並集選擇器）要分開計算
h1,h2,h3{color:red;}
h1{color:blue;} 勝出

  3. 比較源次序

    最後出現的聲明勝出，其他的全部淘汰。
該規則的實際應用：
CSS Reset代碼前置 解決兼容性問題；
a元素的偽類書寫順序。

    繼承（inherit）

    是指子元素會自動擁有父元素的某些屬性

    可被繼承的屬性：color,font-size,font-weight,text-align等
    基本上文本類的樣式都可以被繼承。
    不可被繼承的屬性：background-color。
    繼承的場景：

    該屬性是可繼承屬性；
該屬性在樣式表中沒有聲明。

強制繼承

    也叫顯示繼承，是指將css屬性值設置為inherit。
    為了繼承某些不可繼承屬性或已聲明屬性。

盒子模型

    每個元素都在頁面中形成一個矩形區域，CSS稱該區域為盒子（box）
  1. 盒模型 單個盒子組成
  2. 視覺格式化模型 多個盒子的排列（相互作用，影響）
  3. 布局 實際應用

margin

    外邊框，與其他盒子之間的距離。
    指盒模型可見部分之外的透明區域空間，讓我們可以控制頁面元素之間的距離，幫助將元素定位到頁面上的一個特定位置上，或者給元素提供呼吸的空間，讓他與其他元素保持一個安全的距離。

padding

    內邊距，邊框和內容之間的可選距離。
    他會應用到內容和內邊距組成的區域。因此，內邊距常被用於在內容周圍創建一個隔離帶，這樣內容就會與背景混在一起。

content

    內容的高度和寬度。

overflow

    超出內容的展示方式。

1.overflow:hidden 表示超出內容隱藏；
2.overflow:auto 表示哪個方向的內容超出，該方向出現滾動條；
3.overflow:visible 默認值，溢出部分顯示；
4.overflow:scroll 表示垂直和水平方向上都出現滾動條，但只有超出的方向滾動條可用。

    全屏顯示時頁面緊張出現橫向滾動條。

盒模型padding

    類似於箱子和內部物品之間的填充物。
    padding-top：上內邊框，不可繼承，默認值為0px，其他取值單位em、%。

padding：取1,2,3,4,個值分別對應不同的意義。
上，右，下，左對應top，right，bottom，left方向。

  • 取1個值時，4個方向相同；
  • 取2個值時，上下相同對應第一個值，右左相同對應第二個值；
  • 取3個值時，第一個值對應上，第三個值對應下，第二個值對應相同的右左；
  • 取4個值時，分別對應上右下左。

border-radius

  • 取1個值時，4個角的弧度半徑；

  • 取2個值時，第一個是左上和右下的弧度半徑；第二個是右上和左下的弧度半徑。
    設置某一個角的圓角：
    border-bottom-right-radius:30px(對應x軸半徑) 20px（對應y軸半徑）;
    border的默認顏色是當前標簽的字體顏色。
    取transparent值 表示透明色。
    #盒子模型補充

    子盒子

    邊框盒（border-box）

    背景色默認渲染區域，可通過設置background-clip： 調節。

    填充盒（padding-box）

    嚴格意義上overflow溢出是指溢出填充盒。

    內容盒（content-box）

    默認情況下width和height屬性是指內容盒的寬度和高度。

    盒子尺寸的計算

    box-sizing：設置元素的尺寸範圍。
content-box（默認值）
border-box表示元素的width和height設置區域是邊框盒。
可以解決頁面橫向滾動條的問題。

    註：width：100%的基礎上加margin，設置box-sizing:border-box也無效。
    outline：外邊框，用法和border完全一致。不占尺寸顯示，可輔助布局。

視覺格式化模型（visual formatting model）

    css的一種機制，規定了頁面中多個盒子如何相互影響，如何布局。

視口（viewport）

    可視窗口，通常指瀏覽器的可視區域。視口的尺寸僅受到瀏覽器可視窗口大小的影響，和內容無關。
    當內容超出視口時，瀏覽器會出現滾動條。

包含塊（contianing block）

    每個元素都有一個包含塊，他是指元素在頁面中的擺放區域，通常情況下元素的包含塊是他父元素的內容盒。
    html根元素的包含塊是：初始化包含塊（initial containing block）

定位體系

視覺格式化模型的基礎，一共有3種：

  1. 常規流 （normal flow） 又叫文檔流或常規文檔流
  2. 浮動（float）默認值為none

  3. 絕對定位 （absolute positioned）默認值為static
    每一個元素都屬於其中一個定位體系。
    先判斷絕對定位，如果position屬性值為absolute或fixed則為絕對定位，否則進入浮動判斷，如果float值為left或right，則為浮動定位，否則為常規流。

    盒模型和定位體系

    盒模型 = 盒子尺寸 定位體系 = 盒子位置
    定位體系會影響盒模型。（width和height值為auto時）
  4. margin px, em, %, auto（可為負值）
  5. border px, em
  6. padding px, em, %
  7. width px, em, %, auto

  8. height px, em, %, auto

px和em是固定單位，固定值或者絕對值；

    1em是指當前標簽font-size的一倍。
    註：當前標簽沒有font-size時註意繼承關系。

%和auto是相對單位，相對值。

    常規流中width取值為%，是指相對父級元素（包含塊）width的百分比。
    margin，padding，width的百分比是包含塊寬度的百分比。

三角形的繪制方法

將一個塊級元素的border設置合適寬度，width和height設置為0.只設置一邊的顏色，另外三邊顏色設置為透明即可。通過調整每個邊的border值調整三角形形狀。
將width或者height設置合適的值可繪制梯形。

塊級元素水平方向居中方法

該元素：margin-left：-50%；
包含塊：padding-left：50%；

盒模型padding

    類似於箱子和內部物品之間的填充物。
    padding-top：上內邊框，不可繼承，默認值為0px，其他取值單位em、%。

padding：取1,2,3,4,個值分別對應不同的意義。
上，右，下，左對應top，right，bottom，left方向。

  • 取1個值時，4個方向相同；
  • 取2個值時，上下相同對應第一個值，右左相同對應第二個值；
  • 取3個值時，第一個值對應上，第三個值對應下，第二個值對應相同的右左；
  • 取4個值時，分別對應上右下左。

border-radius

  • 取1個值時，4個角的弧度半徑；

  • 取2個值時，第一個是左上和右下的弧度半徑；第二個是右上和左下的弧度半徑。
    設置某一個角的圓角：
    border-bottom-right-radius:30px(對應x軸半徑) 20px（對應y軸半徑）;
    border的默認顏色是當前標簽的字體顏色。
    取transparent值 表示透明色。
    #盒子模型補充

    子盒子

    邊框盒（border-box）

    背景色默認渲染區域，可通過設置background-clip： 調節。

    填充盒（padding-box）

    嚴格意義上overflow溢出是指溢出填充盒。

    內容盒（content-box）

    默認情況下width和height屬性是指內容盒的寬度和高度。

    盒子尺寸的計算

    box-sizing：設置元素的尺寸範圍。
content-box（默認值）
border-box表示元素的width和height設置區域是邊框盒。
可以解決頁面橫向滾動條的問題。

    註：width：100%的基礎上加margin，設置box-sizing:border-box也無效。
    outline：外邊框，用法和border完全一致。不占尺寸顯示，可輔助布局。

視覺格式化模型（visual formatting model）

    css的一種機制，規定了頁面中多個盒子如何相互影響，如何布局。

視口（viewport）

    可視窗口，通常指瀏覽器的可視區域。視口的尺寸僅受到瀏覽器可視窗口大小的影響，和內容無關。
    當內容超出視口時，瀏覽器會出現滾動條。

包含塊（contianing block）

    每個元素都有一個包含塊，他是指元素在頁面中的擺放區域，通常情況下元素的包含塊是他父元素的內容盒。
    html根元素的包含塊是：初始化包含塊（initial containing block）

定位體系

視覺格式化模型的基礎，一共有3種：

  1. 常規流 （normal flow） 又叫文檔流或常規文檔流
  2. 浮動（float）默認值為none

  3. 絕對定位 （absolute positioned）默認值為static
    每一個元素都屬於其中一個定位體系。
    先判斷絕對定位，如果position屬性值為absolute或fixed則為絕對定位，否則進入浮動判斷，如果float值為left或right，則為浮動定位，否則為常規流。

    盒模型和定位體系

    盒模型 = 盒子尺寸 定位體系 = 盒子位置
    定位體系會影響盒模型。（width和height值為auto時）
  4. margin px, em, %, auto（可為負值）
  5. border px, em
  6. padding px, em, %
  7. width px, em, %, auto

  8. height px, em, %, auto

px和em是固定單位，固定值或者絕對值；

    1em是指當前標簽font-size的一倍。
    註：當前標簽沒有font-size時註意繼承關系。

%和auto是相對單位，相對值。

    常規流中width取值為%，是指相對父級元素（包含塊）width的百分比。
    margin，padding，width的百分比是包含塊寬度的百分比。

三角形的繪制方法

將一個塊級元素的border設置合適寬度，width和height設置為0.只設置一邊的顏色，另外三邊顏色設置為透明即可。通過調整每個邊的border值調整三角形形狀。
將width或者height設置合適的值可繪制梯形。

塊級元素水平方向居中方法

該元素：margin-left：-50%；
包含塊：padding-left：50%；

盒模型padding

    類似於箱子和內部物品之間的填充物。
    padding-top：上內邊框，不可繼承，默認值為0px，其他取值單位em、%。

padding：取1,2,3,4,個值分別對應不同的意義。
上，右，下，左對應top，right，bottom，left方向。

  • 取1個值時，4個方向相同；
  • 取2個值時，上下相同對應第一個值，右左相同對應第二個值；
  • 取3個值時，第一個值對應上，第三個值對應下，第二個值對應相同的右左；
  • 取4個值時，分別對應上右下左。

border-radius

  • 取1個值時，4個角的弧度半徑；

  • 取2個值時，第一個是左上和右下的弧度半徑；第二個是右上和左下的弧度半徑。
    設置某一個角的圓角：
    border-bottom-right-radius:30px(對應x軸半徑) 20px（對應y軸半徑）;
    border的默認顏色是當前標簽的字體顏色。
    取transparent值 表示透明色。
    #盒子模型補充

    子盒子

    邊框盒（border-box）

    背景色默認渲染區域，可通過設置background-clip： 調節。

    填充盒（padding-box）

    嚴格意義上overflow溢出是指溢出填充盒。

    內容盒（content-box）

    默認情況下width和height屬性是指內容盒的寬度和高度。

    盒子尺寸的計算

    box-sizing：設置元素的尺寸範圍。
content-box（默認值）
border-box表示元素的width和height設置區域是邊框盒。
可以解決頁面橫向滾動條的問題。

    註：width：100%的基礎上加margin，設置box-sizing:border-box也無效。
    outline：外邊框，用法和border完全一致。不占尺寸顯示，可輔助布局。

視覺格式化模型（visual formatting model）

    css的一種機制，規定了頁面中多個盒子如何相互影響，如何布局。

視口（viewport）

    可視窗口，通常指瀏覽器的可視區域。視口的尺寸僅受到瀏覽器可視窗口大小的影響，和內容無關。
    當內容超出視口時，瀏覽器會出現滾動條。

包含塊（contianing block）

    每個元素都有一個包含塊，他是指元素在頁面中的擺放區域，通常情況下元素的包含塊是他父元素的內容盒。
    html根元素的包含塊是：初始化包含塊（initial containing block）

定位體系

視覺格式化模型的基礎，一共有3種：

  1. 常規流 （normal flow） 又叫文檔流或常規文檔流
  2. 浮動（float）默認值為none

  3. 絕對定位 （absolute positioned）默認值為static
    每一個元素都屬於其中一個定位體系。
    先判斷絕對定位，如果position屬性值為absolute或fixed則為絕對定位，否則進入浮動判斷，如果float值為left或right，則為浮動定位，否則為常規流。

    盒模型和定位體系

    盒模型 = 盒子尺寸 定位體系 = 盒子位置
    定位體系會影響盒模型。（width和height值為auto時）
  4. margin px, em, %, auto（可為負值）
  5. border px, em
  6. padding px, em, %
  7. width px, em, %, auto

  8. height px, em, %, auto

px和em是固定單位，固定值或者絕對值；

    1em是指當前標簽font-size的一倍。
    註：當前標簽沒有font-size時註意繼承關系。

%和auto是相對單位，相對值。

    常規流中width取值為%，是指相對父級元素（包含塊）width的百分比。
    margin，padding，width的百分比是包含塊寬度的百分比。

三角形的繪制方法

將一個塊級元素的border設置合適寬度，width和height設置為0.只設置一邊的顏色，另外三邊顏色設置為透明即可。通過調整每個邊的border值調整三角形形狀。
將width或者height設置合適的值可繪制梯形。

塊級元素水平方向居中方法

該元素：margin-left：-50%；
包含塊：padding-left：50%；

盒模型padding

    類似於箱子和內部物品之間的填充物。
    padding-top：上內邊框，不可繼承，默認值為0px，其他取值單位em、%。

padding：取1,2,3,4,個值分別對應不同的意義。
上，右，下，左對應top，right，bottom，left方向。

  • 取1個值時，4個方向相同；
  • 取2個值時，上下相同對應第一個值，右左相同對應第二個值；
  • 取3個值時，第一個值對應上，第三個值對應下，第二個值對應相同的右左；
  • 取4個值時，分別對應上右下左。

border-radius

  • 取1個值時，4個角的弧度半徑；

  • 取2個值時，第一個是左上和右下的弧度半徑；第二個是右上和左下的弧度半徑。
    設置某一個角的圓角：
    border-bottom-right-radius:30px(對應x軸半徑) 20px（對應y軸半徑）;
    border的默認顏色是當前標簽的字體顏色。
    取transparent值 表示透明色。
    #盒子模型補充

    子盒子

    邊框盒（border-box）

    背景色默認渲染區域，可通過設置background-clip： 調節。

    填充盒（padding-box）

    嚴格意義上overflow溢出是指溢出填充盒。

    內容盒（content-box）

    默認情況下width和height屬性是指內容盒的寬度和高度。

    盒子尺寸的計算

    box-sizing：設置元素的尺寸範圍。
content-box（默認值）
border-box表示元素的width和height設置區域是邊框盒。
可以解決頁面橫向滾動條的問題。

    註：width：100%的基礎上加margin，設置box-sizing:border-box也無效。
    outline：外邊框，用法和border完全一致。不占尺寸顯示，可輔助布局。

視覺格式化模型（visual formatting model）

    css的一種機制，規定了頁面中多個盒子如何相互影響，如何布局。

視口（viewport）

    可視窗口，通常指瀏覽器的可視區域。視口的尺寸僅受到瀏覽器可視窗口大小的影響，和內容無關。
    當內容超出視口時，瀏覽器會出現滾動條。

包含塊（contianing block）

    每個元素都有一個包含塊，他是指元素在頁面中的擺放區域，通常情況下元素的包含塊是他父元素的內容盒。
    html根元素的包含塊是：初始化包含塊（initial containing block）

定位體系

視覺格式化模型的基礎，一共有3種：

  1. 常規流 （normal flow） 又叫文檔流或常規文檔流
  2. 浮動（float）默認值為none

  3. 絕對定位 （absolute positioned）默認值為static
    每一個元素都屬於其中一個定位體系。
    先判斷絕對定位，如果position屬性值為absolute或fixed則為絕對定位，否則進入浮動判斷，如果float值為left或right，則為浮動定位，否則為常規流。

    盒模型和定位體系

    盒模型 = 盒子尺寸 定位體系 = 盒子位置
    定位體系會影響盒模型。（width和height值為auto時）
  4. margin px, em, %, auto（可為負值）
  5. border px, em
  6. padding px, em, %
  7. width px, em, %, auto

  8. height px, em, %, auto

px和em是固定單位，固定值或者絕對值；

    1em是指當前標簽font-size的一倍。
    註：當前標簽沒有font-size時註意繼承關系。

%和auto是相對單位，相對值。

    常規流中width取值為%，是指相對父級元素（包含塊）width的百分比。
    margin，padding，width的百分比是包含塊寬度的百分比。

三角形的繪制方法

將一個塊級元素的border設置合適寬度，width和height設置為0.只設置一邊的顏色，另外三邊顏色設置為透明即可。通過調整每個邊的border值調整三角形形狀。
將width或者height設置合適的值可繪制梯形。

塊級元素水平方向居中方法

該元素：margin-left：-50%；
包含塊：padding-left：50%；

塊盒在常規流下的位置

    盒子在包含塊的content垂直方向上依次擺放；
    依次擺放：按照HTML元素的書寫順序從上到下擺放；
    盒子在包含塊中的尺寸是整個盒子的尺寸。

垂直方向上

若兩個盒子外邊距相鄰（margin），則進行合並（折疊）。水平方向上不會。

    外邊距相鄰：兩個元素的外邊距之間沒有padding，border，content。

兄弟元素合並：margin都為正值取最大，都為負值取最小，一正一負相加。

快盒常規流盒模型的auto值

水平方向

常規流盒子水平方向上的尺寸，必須等於包含塊的尺寸。如果該盒子的width+margin小於包含塊的width，不足部分有該元素的margin補齊。

    margin-left：auto && margin-right：auto 居中
    margin-left：定值 && margin-right：auto  右邊補齊
    margin-left：定值 && margin-right：定值 仍不足，同margin-right：auto 的情況。

想要一個塊級元素居中的方法：
給固定寬度，左右margin值設置為auto。

垂直方向

margin-top || margin-bottom：auto = 0。
height：auto = 適應內容的高度。

浮動

當元素的float屬性取值為left和right時，元素屬於浮動定位。
float：不可繼承；
取值：none（默認取值）= 不浮動；
left = 左浮動；
right = 右浮動；
浮動時： margin：auto = 0；
width：auto = 適應內容寬度；
height：auto = 適應內容高度。

浮動規則

  1. 左浮動的盒子向左、向上排列；
  2. 右浮動的盒子向右、向上排列；
  3. 浮動盒子的頂邊不得高於上一個盒子的頂邊；
  4. 若剩余的空間無法放下浮動的盒子，則該盒子向下移動，知道具備足夠的空間容納盒子，然後再向左或向右移動。

當常規流遇上浮動
常規流盒子和浮動盒子混合擺放；
浮動盒子在擺放時避開常規流盒子；
常規流盒子在擺放時無視浮動盒子。

HTML5和css3

相關推薦

HTML5和CSS3扁平化風格博客

清除浮動 小細節 介紹 first header ant oct some main.c 多學一點總是好的~自始至終都覺得的css和html效果比較美觀，於是在看慕課網教程時，自己也跟著敲了深愛著的前端代碼這部分分為兩部分：①基礎篇：http://www.imooc.com

一起感受HTML5和CSS3

css3 .section back 但是 nth 簡潔 信息 tar 最簡 Web設計師可以使用HTML4和CSS2.1完成一些很酷的東西。我們可以在不使用陳舊的基於table布局的基礎上完成文檔邏輯結構並創建內容豐富的網站。我們可以在不使用內聯<font&

HTML5和css3 實現雪花飄動和translate的練習

utf-8 紛飛 下拉 light mar true posit fall back 看了看HTML5和css3 練習他的動畫和位移 記錄一下 <!DOCTYPE html> <html lang="en"> <head>

響應式Web設計:HTML5和CSS3實戰 第2版 (本·弗萊恩) 中文pdf完整版

教程 理解 第2章 web設計 掌握 不可 css3過渡 div and 本書將當前Web 設計中熱門的響應式設計技術與HTML5 和CSS3 結合起來，為讀者全面深入地講解了針對各種屏幕大小設計和開發現代網站的各種技術。書中不僅討論了媒體查詢、彈性布局、響應式圖片，更

一些html5和css3的一些常見面試題

span location 可用性 text 增加 浪費 email 瀏覽器兼容問題 socket 最近總結了一些有關於html5和css3的一些常見面試題，希望對正在找工作的你有所幫助。還有歡迎大家補充~~~ 一、HTML5 CSS3 　　<1>.CSS3有哪

關於html5和css3的一些常見面試題

get orm calendar center sessions 選擇器 終端 enter 關閉 CSS3有哪些新特性？ 　　1. CSS3實現圓角（border-radius），陰影（box-shadow）， 　　2. 對文字加特效（text-shadow、），線性漸

HTML5和css3

cli 距離 情況下 20px none 推薦 內部 lin center 超鏈接 <a target="頁面打開位置" href="鏈接地址">內容</a> target:_blank 重新打開一個頁面 target:_se

[轉載] 用HTML5和CSS3完美實現網頁中動起來的箭頭

我們經常看到許多網站或者H5的動畫都做成了整屏切換的形式，為提高使用者體驗，會在首屏頁面下方放上一個動態的向下箭頭來提示使用者切換至下一屏。 動態箭頭的效果圖如下： 那麼這種效果是如何實現的呢？ 其實非常簡單，在CSS3中提供了animation屬性，專門用於動畫。要使用這個屬性，需要先了解@

HTML5和CSS3 新特性總結

HTML5 1.HTML5 新元素 HTML5提供了新的元素來建立更好的頁面結構： 標籤 描述 定義頁面的側邊欄內容。 <bdi> 允許您設定一段文字，使其脫

關於IE7 IE8相容HTML5和CSS3的一種解決方案

 今天突然發現一網站用JS來實現這個支援 新增到head裡 <!--[if IE 7]> <script type='text/javascript' src='js/excanvas.js'></script> <link rel

《響應式Web設計——HTML5和CSS3實戰》——知識點整理總結(持更~)

1.HTML5、CSS3及響應式入門 1.1 什麼是響應式 如果要用一句話概括，那麼響應式網頁是針對人以裝置對網頁內容進行完美佈局的一種顯示機制。相反，如果需要根據不同裝置提供特定的內容和功能，那就需要一個真正的“手機版”網站。這種情況下，手機版網站會提供與

HTML5和CSS3開發第六章課後作業

1，製作北大青鳥網站的中心開班模組。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中心開班資訊</t

超酷HTML5和CSS3實現的登入及其註冊功能表單

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <

html5和css3新增的常用知識點

H5新增的離線應用： （1）當要開發基於h5的離線應用時，先確定伺服器是否支援對manifest檔案的解析。 （2）若不支援，需要使用者手動設定，在伺服器mime.types檔案中新增； （3）為什麼要求伺服器一定要支援manifest檔案？        答：因為離線儲存

HTML5和CSS3開發電子商務網站 第一章習題

3.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聚美優品常見問題頁面</title> <

bootstrap模板為使IE6、7、8版本（IE9以下版本）瀏覽器相容html5和css3

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com

響應式Web設計：HTML5和CSS3實戰（讀書筆記）

視口：瀏覽器視窗內的內容區域，不包含工具欄，標籤欄。網頁實際顯示. 螢幕尺寸：裝置物理顯示區域 各種寬度和高度 a、可視區的真實寬度和高度 document.documentElement.clientWid

html5和Css3 的參考手冊(中文chm版)

 html5的其實就是利用w3c的線上版做成的chm，只是希望對沒網路的朋友一點幫助。(哈哈..我就是那樣有時不能上網的)。     包含了HTML 5 中的一些新特性：嵌入音訊、視訊、圖片的函式、客戶端資料儲存，以及互動式文件。其他特性包括新的頁面元素，比如 <

使用HTML5和CSS3開發電子商務網站——第三張課後作業

1.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>申請表</title> </head&

HTML5和CSS3的新特性

綜述：這個問題在面試的時候經常被問到，有必要做一個總結，理解的深刻充分一些 1.html5的新特性？(記住有九大模組內容) 添加了video，radio標籤 添加了canvas畫布和svg,渲染向量圖片 添加了一些列語義化標籤header,fo