css3前綴的使用

1. CSS3目前很多新增屬性尚未被W3C列為標(biāo)準(zhǔn)舶沿，對這些暫時未被公布為標(biāo)準(zhǔn)的屬性以躯，各家瀏覽器會在屬性前加上前綴詞月匣，也將其稱之為瀏覽器的私有前綴历筝。
2. W3C官方認(rèn)為試驗階段的屬性僅為了測試友鼻，未來可能修改或刪除傻昙。
3. 對于CSS3中目前主流瀏覽器不支持屬性，本套課程暫不進行講解.

現(xiàn)在主要流行的瀏覽器內(nèi)核有：

• Webkit內(nèi)核：產(chǎn)要代表為Chrome和Safari
• Trident內(nèi)核：主要代表為IE瀏覽器
• Gecko內(nèi)核：主要代表為Firefox
• Presto內(nèi)核：主要代表為Opera
• 手機等移動端一般是IOS和安卓系統(tǒng)桃移，基本上采用的都是webkit引擎屋匕。

瀏覽器的私有前綴:

• Webkit內(nèi)核：前綴為-webkit-
• Trident內(nèi)核：前綴為-ms-
• Gecko內(nèi)核：前綴為-moz-
• Presto內(nèi)核：前綴為-o-

盒模型

了解盒模型的概念：

1. CSS 盒模型規(guī)定了處理元素內(nèi)容、內(nèi)邊距借杰、邊框 和 外邊距 的方式过吻。
2. 最內(nèi)部分是元素內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距蔗衡。內(nèi)邊距呈現(xiàn)了元素的背景纤虽。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距绞惦。

元素的尺寸:

1. height 設(shè)置元素的高度逼纸。屬性值：auto：默認(rèn)。/px济蝉、cm 等單位定義高度杰刽。/百分比
2. width 設(shè)置元素的寬度屬性值：auto：默認(rèn)。/px王滤、cm 等單位定義高度贺嫂。/百分比
3. max-height 設(shè)置元素的最大高度。屬性值：auto：默認(rèn)雁乡。/px第喳、cm 等單位定義高度。/百分比
4. max-width 設(shè)置元素的最大寬度踱稍。屬性值：auto：默認(rèn)曲饱。/px悠抹、cm 等單位定義高度。/百分比
5. min-height 設(shè)置元素的最小高度扩淀。屬性值：auto：默認(rèn)楔敌。/px、cm 等單位定義高度引矩。/百分比
6. min-width 設(shè)置元素的最小寬度梁丘。屬性值：auto：默認(rèn)侵浸。/px旺韭、cm 等單位定義高度。/百分比
7. 當(dāng)屬性值用百分比時是相對于父元素的尺寸來說的掏觉。
8. 最大最小寬高主要用于動態(tài)控制縮放等情況下

padding 屬性：元素的內(nèi)邊距:

1. padding-top 屬性設(shè)置元素的上內(nèi)邊距（空間）区端。
2. padding-right 屬性設(shè)置元素右內(nèi)邊距（空白）。
3. padding-bottom 屬性設(shè)置元素的下內(nèi)邊距（底部空白）澳腹。
4. padding-left 屬性設(shè)置元素左內(nèi)邊距（空白）织盼。
5. padding 屬性接受長度值或百分比值，但不允許使用負(fù)值酱塔。
   • padding * 同時設(shè)定四個邊距
   • padding ** 分別設(shè)定上下沥邻、左右邊距
   • padding *** 分別設(shè)定上、左右羊娃、下邊距
   • padding **** 分別設(shè)定上唐全、右、下蕊玷、左邊距

border屬性：元素的邊框邮利，是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。

1. border屬性：
   • 可以按順序設(shè)置如下屬性：
   • border-width
   • border-style
     • solid 定義實線垃帅。/dotted 定義點狀邊框/double 定義雙線......
   • border-color

margin 屬性：元素的外邊距:

1. 圍繞在元素邊框的空白區(qū)域是外邊距延届。設(shè)置外邊距會在元素外創(chuàng)建額外的“空白”。
2. margin-top 屬性設(shè)置元素的上外邊距（空間）贸诚。
3. margin-right 屬性設(shè)置元素外內(nèi)邊距（空白）方庭。
4. margin-bottom 屬性設(shè)置元素的下外邊距（底部空白）。
5. margin-left 屬性設(shè)置元素左外邊距（空白）酱固。
6. margin 屬性接受長度值或百分比值械念，允許使用負(fù)值。
   • margin * 同時設(shè)定四個外邊距
   • margin ** 分別設(shè)定上下媒怯、左右外邊距
   • margin *** 分別設(shè)定上订讼、左右、下外邊距
   • margin **** 分別設(shè)定上扇苞、右欺殿、下寄纵、左外邊距

外邊距的合并

1. 外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時脖苏，它們將形成一個外邊距程拭。
2. 合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

溢出的處理

1. overflow 如果內(nèi)容溢出了元素內(nèi)容區(qū)域棍潘，是否對內(nèi)容的邊緣進行裁剪恃鞋。
2. overflow-x 如果內(nèi)容溢出了元素內(nèi)容區(qū)域，是否對內(nèi)容的左/右邊緣進行裁剪亦歉。
3. overflow-y 如果內(nèi)容溢出了元素內(nèi)容區(qū)域恤浪，是否對內(nèi)容的上/下邊緣進行裁剪。
   • visible 不裁剪內(nèi)容肴楷，可能會顯示在內(nèi)容框之外水由。
   • hidden 裁剪內(nèi)容 - 不提供滾動機制。
   • scroll 裁剪內(nèi)容 - 提供滾動機制赛蔫。
   • auto 如果溢出框砂客，則應(yīng)該提供滾動機制。

CSS定位的概念：

1. CSS 定位屬性允許對元素進行定位改變其在頁面的位置呵恢。
2. CSS 有三種基本的定位機制：普通流鞠值、浮動和絕對定位。
3. 普通流中的元素的位置由元素在HTML中的位置決定渗钉。

元素定位的屬性：

1. position 把元素放置到一個靜態(tài)的彤恶、相對的、絕對的晌姚、或固定的位置中粤剧。

   • static 默認(rèn)值。沒有定位挥唠。
   • absolute 絕對定位抵恋，相對于(static 定位以外的第一個) 父元素進行定位。通過絕對定位宝磨，元素可以放置到頁面上的任何位置弧关。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。(注：static 定位以外的第一個父元素：相對與最接近的一個最有定位設(shè)置的父級對象進行絕對定位唤锉，如果對象的父級沒有設(shè)置定位屬性世囊，則依據(jù) body 對象左上角作為參考進行定位。)

   position: absolute;;
   left: 150px;
   

   • relative 相對定位窿祥，相對于其正常位置進行定位株憾。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。

   position: relative;
   left: 10px;
   

   • fixed 絕對定位，相對于瀏覽器窗口進行定位嗤瞎。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定墙歪。

   相對窗口定位
   position: fixed;
   left: 10px;
   

   • 絕對定位和相對定位的區(qū)別
     • 絕對定位對象可以層疊,相對定位的對象不可以
     • 相對定位對象會占據(jù)它原來位置,絕對定位不會

2. top 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。注：如果 "position" 屬性的值為"static"贝奇，那么設(shè)置 "top" 屬性不會產(chǎn)生任何效果虹菲。

3. right 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。注：如果 "position" 屬性的值為"static"掉瞳，那么設(shè)置 "right" 屬性不會產(chǎn)生任何效果毕源。

4. bottom 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。注：如果 "position" 屬性的值為"static"陕习，那么設(shè)置 "bottom" 屬性不會產(chǎn)生任何效果霎褐。

5. left 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。注：如果 "position" 屬性的值為"static"衡查，那么設(shè)置 "left" 屬性不會產(chǎn)生任何效果瘩欺。

6. clip 設(shè)置元素的形狀。元素被剪入這個形狀之中拌牲，然后顯示出來。

   • 語法 clip: rect(top, right, bottom, left);目前裁切形狀只有矩形可以使用
   • rect()需要設(shè)置四個值：top, right, bottom和left歌粥。他們之間需要用逗號隔開塌忽，而且rect()屬性值和margin、padding一樣的標(biāo)準(zhǔn)失驶，遵循順時針旋轉(zhuǎn)的規(guī)則土居。
   • 注意：clip屬性只能在元素設(shè)置了“position:absolute”或者“position:fixed”屬性起作用。
   • auto：這是一個默認(rèn)值嬉探，clip設(shè)置auto值和沒有進行剪切是一樣的效果;

   clip: rect(200px,300px,300px,0px);上右下左擦耀，相對上，左距離

7. vertical-align 設(shè)置元素的垂直對齊方式涩堤。

   • baseline 默認(rèn)眷蜓。元素放置在父元素的基線上。
   • top 把元素的頂端與行中最高元素的頂端對齊
   • middle 把此元素放置在父元素的中部胎围。
   • bottom 把元素的底端與行中最低的元素的底端對齊吁系。
   • 數(shù)值（像素）/百分比
   • text-top 把元素的頂端與父元素字體的頂端對齊
   • text-bottom 把元素的底端與父元素字體的底端對齊。
   • sub 垂直對齊文本的下標(biāo)白魂。
   • super 垂直對齊文本的上標(biāo)

   vertical-align: bottom;

8. z-index 設(shè)置元素的堆疊順序汽纤。
   z-index: 1;

9. overflow 設(shè)置當(dāng)元素的內(nèi)容溢出其區(qū)域時發(fā)生的事情。

10. float 浮動：定義元素在哪個方向浮動福荸。

    • left 元素向左浮動蕴坪。
    • right 元素向右浮動。
    • none 默認(rèn)值敬锐。元素不浮動背传，并會顯示在其在文本中出現(xiàn)的位置捆等。

    float: right;

11. clear 浮動的清除：常用屬性值 both/left/right/none

    clear: both;

表格有關(guān)的屬性：

1. border-collapse 設(shè)置是否把表格邊框合并為單一的邊框.屬性值：separate 默認(rèn)值/collapse邊框合并

   border-collapse: collapse;

2. border-spacing 設(shè)置分隔單元格邊框的距離。

   border-spacing: 10px;

3. caption-side 設(shè)置表格標(biāo)題的位置续室。屬性值：top 默認(rèn)值,在表格之上栋烤。bottom在表格之下。

   caption-side: bottom;

4. empty-cells 設(shè)置是否顯示表格中的空單元格挺狰。屬性值：hide/show默認(rèn)

   empty-cells: hide;

5. table-layout 設(shè)置顯示寬度是否隨內(nèi)容拉伸明郭。屬性值：auto默認(rèn)/fixed列寬由表格寬度和列寬度設(shè)定。

   table-layout: fixed;

列表的屬性：

1. list-style 簡寫屬性丰泊。用于把所有用于列表的屬性設(shè)置于一個聲明中薯定。

   list-style: inside circle;

2. list-style-type 設(shè)置列表項標(biāo)志的類型。

   • none無標(biāo)記瞳购。/disc默認(rèn),實心圓话侄。/circle 標(biāo)記是空心圓。/square實心方塊学赛。/
   • decimal 數(shù)字年堆。/decimal-leading-zero 0開頭的數(shù)字/lower-roman小寫羅馬數(shù)字upper-roman大寫羅馬數(shù)字/lower-alpha 小寫英文字母/upper-alpha大寫英文字母
   • ......日文、拉丁文等其他符合盏浇，有興趣自己查CSS手冊变丧。

   list-style-type: circle;

3. list-style-position 設(shè)置列表項標(biāo)志的位置。屬性值：inside/outside默認(rèn)值

   list-style-position: inside;

4. list-style-image 將圖象設(shè)置為列表項標(biāo)志绢掰。屬性值：URL圖像的路徑痒蓬。/none默認(rèn)。無圖形被顯示滴劲。

   list-style-image: url(xx);