css3詳解3課件chapter11多列

CSS3多列CSS3多列多列（Multi-column）將文本內(nèi)容設(shè)計成像報紙一樣的多列布局。兼容性IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1+慕課網(wǎng)是垂直的互聯(lián)網(wǎng)IT技能免費學(xué)習(xí)網(wǎng)站。以獨家視頻教程、在線編程工具、學(xué)習(xí)計劃、問答社區(qū)為核心特色。在這里，你可以找到最好的互聯(lián)網(wǎng)技術(shù)牛人，也可以通過免費的在線公開視頻課程學(xué)習(xí)國內(nèi)領(lǐng)先的互聯(lián)網(wǎng)IT技術(shù)。慕課網(wǎng)課程涵蓋前端開發(fā)、PHP、Html5、Android、iOS、Swift等IT前沿技術(shù)語言，包括基礎(chǔ)課程、實用案例、高級分享三大類型，適合不同階段的學(xué)習(xí)人群。以純干貨、短視頻的形式為平臺特點，為在校學(xué)生、職場白領(lǐng)提供了一個迅速提升技能、共同分享進步的學(xué)習(xí)平臺。慕課網(wǎng)秉承“開拓、創(chuàng)新、公平、分享”的精神，將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域，致力于為教育機構(gòu)及求學(xué)者打造一站式互動在線教育品牌。CSS3Multi-columncolumns屬性設(shè)置或檢索對象的列數(shù)和每列的寬度。復(fù)合屬性。語法columns：<'column-width'>||<'column-count'>;參數(shù)說明<'column-width'>：每列的寬度；<'column-count'>：列數(shù)。舉個栗子CSS3column-widthcolumn-width屬性設(shè)置或檢索對象每列的寬度。語法column-width:<length>|auto;參數(shù)說明<length>：用長度值來定義列寬，不允許負值；auto：根據(jù)列數(shù)自定分配寬度。舉個栗子CSS3column-countcolumn-count屬性設(shè)置或檢索對象的列數(shù)。語法column-count:<integer>|auto;參數(shù)說明<integer>：用整數(shù)值來定義列數(shù)，不允許負值；auto：根據(jù)列寬自定分配寬度。舉個栗子CSS3column-gapcolumn-gap屬性設(shè)置或檢索對象的列與列之間的間隙。語法column-gap:<length>|normal;參數(shù)說明<length>：用長度值來定義列與列之間的間隙，不允許負值；normal：與字體大小相同。舉個栗子CSS3column-rulecolumn-rule屬性設(shè)置或檢索對象的列與列之間的邊框。復(fù)合屬性。語法column-rule:<'column-rule-width'>||<'column-rule-style'>||<'column-rule-color'>;參數(shù)說明設(shè)置或檢索對象的列與列之間的邊框厚度、樣式和顏色。舉個栗子CSS3column-rulecolumn-rule-width屬性設(shè)置或檢索對象的列與列之間的邊框厚度。語法column-rule-width:<length>|thin|medium|thick;參數(shù)說明<length>：用長度值來定義邊框的厚度，不允許負值；medium：定義默認厚度的邊框；thin：定義比默認厚度細的邊框；thick：定義比默認厚度粗的邊框。舉個栗子CSS3column-rulecolumn-rule-style屬性設(shè)置或檢索對象的列與列之間的邊框樣式。語法column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;參數(shù)說明none：無輪廓；hidden：隱藏邊框；dotted：點狀輪廓；dashed：虛線輪廓；solid：實線輪廓；double：雙線輪廓；groove：3D凹槽輪廓；ridge：3D凸槽輪廓；inset：3D凹邊輪廓；outset：3D凸邊輪廓。舉個栗子CSS3column-rulecolumn-rule-color屬性設(shè)置或檢索對象的列與列之間的邊框顏色。語法column-rule-color：<color>;參數(shù)說明<color>：指定顏色。舉個栗子CSS3column-spancolumn-span屬性設(shè)置或檢索對象元素是否橫跨所有列。語法column-span:none|all;參數(shù)說明none：不跨列；all：橫跨所有列。舉個栗子CSS3column-fillcolumn-fill屬性設(shè)置或檢索對象所有列的高度是否統(tǒng)一。語法column-fill:auto|balance;參數(shù)說明auto：列高度自適應(yīng)內(nèi)容；balance：所有列的高度以其中最高的一列統(tǒng)一。舉個栗子CSS3column-breakcolumn-break-before屬性設(shè)置或檢索對象之前是否斷行。語法column-break-before:auto|always|avoid;參數(shù)說明auto：既不強迫也不禁止在元素之前斷行并產(chǎn)生新列；always：總是在元素之前斷行并產(chǎn)生新列；avoid：避免在元素之前斷行并產(chǎn)生新列。舉個栗子CSS3column-breakcolumn-break-after屬性設(shè)置或檢索對象之后是否斷行。語法column-break-after:auto|always|avoid;參數(shù)說明auto：既不強迫也不禁止在元素之后斷行并產(chǎn)生新列；always：總是在元素之后斷行并產(chǎn)生新列；avoid：避免在元素之后斷行并產(chǎn)生新列。舉個栗子CSS3column-breakcolumn