11.整出高大上的效果來css3布局

1、一.定位類型定位的基本很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。ition 屬性屬性值：absolute：絕對定位，針對是的父元素fixed：固定定位，針對瀏覽器的絕對定位relative：相對定位sic：普通定位，按照普通流來定位二. 定位屬性left：設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 right 設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 top：設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。bottom：設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。z-index：設置元素的

2、堆疊順序。 visibility：規(guī)定元素是否可見?？赡艿闹抵得枋鰂loat：用來設置元素浮動浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。visible默認值。元素是可見的。hidden元素是不可見的。collapse當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容用。如果此值被用在其他的元素上，會呈現為 hidden。inherit規(guī)定應該從父元素繼承 visibility 屬性的值。clear：規(guī)定元素的哪一側不允許其他浮

3、動元素。三.多列布局1.column-count：規(guī)定元素應該被劃分的列數。注意：瀏覽器的支持情況ernet Explorer 10 和Opera 支持屬性。column-countFirefox 支持替代的 -moz-column-count 屬性。Safari 和 Chrome 支持替代的 -webkit-column-count 屬性。2.column-fill：規(guī)定如何填充列（是否進行協調）。注意：瀏覽器的支持情況主流瀏覽器都不支持 column-fill 屬性。3.column-gap：規(guī)定列之間的間隔。注意：瀏覽器的支持情況ernet Explorer 10 和Opera 支持co

4、lumn-gap 屬性。Firefox 支持替代的 -moz-column-gap 屬性。Safari 和 Chrome 支持替代的 -webkit-column-gap 屬性。可能的值值描述left在左側不允許浮動元素。right在右側不允許浮動元素。both在左右兩側均不允許浮動元素。none默認值。允許浮動元素出現在兩側。inherit規(guī)定應該從父元素繼承 clear 屬性的值。column-rule：設置所有 column-rule-* 屬性的簡寫屬性。column-rule-color：規(guī)定列之間規(guī)則的顏色 6.column-rule-style：規(guī)定列之間規(guī)則的樣式 7.colum

5、n-rule-width：規(guī)定列之間規(guī)則的寬度8.column-span：規(guī)定元素應橫跨多少列 9.column-width：規(guī)定列的寬度10.columns：規(guī)定設置 column-width 和 column-count 的簡寫屬性四.可伸縮框布局1.box-align：規(guī)定如何對齊框的子元素。注意：瀏覽器的支持情況目前沒有瀏覽器支持box-align 屬性。Firefox 支持替代的 -moz-box-align 屬性。Safari、Opera以及Chrome 支持替代的-webkit-box-align 屬性。測值描述試start對于正常方向的框，每個子元素的上邊緣沿著框的頂邊放置。測

6、對于反方向的框，每個子元素的下邊緣沿著框的底邊放置。end對于正常方向的框，每個子元素的下邊緣沿著框的底邊放置。測對于反方向的框，每個子元素的上邊緣沿著框的頂邊放置。center均等地分割多余的空間，一半位于子元上，另一半位于子元下。測如果 box-orient 是inline-axis 或horizontal，所有子元素均與其基線對齊。baseline測stretch拉伸子元素以填充包含塊2.box-direction：規(guī)定框的子元素的顯示方向。測值描述試normal以默認方向顯示子元素。測reverse以反方向顯示子元素。測應該從子元素繼承 box-direction 屬性的值inheri

7、t3.box-flex：規(guī)定框的子元素是否可伸縮其尺寸。4.box-flex-group：將可伸縮元素分配到柔性分組。注意：瀏覽器的支持情況目前沒有瀏覽器支持 box-flex-group 屬性。5.box-lines：規(guī)定如果列超出了父框中的空間，是否要換行顯示。注意：瀏覽器的支持情況目前沒有瀏覽器支持 box-flex-group 屬性。box-ordinal-groupbox-orient：規(guī)定框的子元素應該被水平或垂直排列。測值描述試horizontal在水平行中從左向右排列子元素。測vertical從上向下垂直排列子元素。測為 horizontal）。inline-axis沿著行內軸

8、來排列子元素（測為 vertical）。block-axis沿著塊軸來排列子元素（測應該從父元素繼承 box-orient 屬性的值。inheritbox-pack：當框大于子元素的尺寸，在何處放置子元素。該屬性規(guī)定水平框中的水平位置，以及垂直框中的垂直位置。測值描述試start對于正常方向的框，首個子元素的左邊緣被放在左側（最后的子元素后是所有剩余的空間）測對于相反方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）end對于正常方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）。對于相反方向的框，首個子元素的左邊緣被放在左側（最后子元素后是所有剩余的空

9、間）。測center均等地分割多余空間，其中一半空間被置于首個子元素前，另一半被置于最后一個子元素后測justify在每個子元間分割多余的空間（首個子元素前和最后一個子元素后沒有多余的空間）。五.內邊距padding-top ：設置元素的上內邊距 padding-right ：設置元素的右內邊距 padding-bottom：設置元素的下內邊距 padding-left ：設置元素的左內邊距padding：中設置所有內邊距屬性六.外邊距margop：設置元素的上外邊距。 margin-right：設置元素的右外邊距。 margin-bottom：設置元素的下外邊距。 margin-left：設

10、置元素的左外邊距。 margin：中設置所有外邊距屬性。七.元素大小width：設置寬度 height：設置高度min-width：設置最小寬度 min-height：設置最小高度max-width：設置最大寬度 max-height：設置最大高度box-sizing：允許您以特定的方式定義匹配某個區(qū)域的特定元素八.溢出內容處理overflow：規(guī)定當內容溢出元素框時發(fā)生的事情。overflow-x：如果內容溢出了元素內容區(qū)域，是否對內容的左/右邊緣進行裁剪。測值描述試visible不裁剪內容，可能會顯示在內容框之外。測裁剪內容 - 不提供滾制。hidden測scroll裁剪內容 - 提供滾制

11、。測auto如果溢出框，則應該提供滾制。測no-display如果內容不適合內容框，則刪除整個框。測值描述visible默認值。內容不會被修剪，會呈現在元素框之外。hidden內容會被修剪，并且其余內容是不可見的。scroll內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。auto如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。inherit規(guī)定應該從父元素繼承 overflow 屬性的值。overflow-y：如果內容溢出了元素內容區(qū)域，是否對內容的上/下邊緣進行裁剪。測值描述試visible不裁剪內容，可能會顯示在內容框之外。測hidden裁剪內容 - 不提供滾制。測裁剪內

12、容 - 提供滾scroll制。測auto如果溢出框，則應該提供滾制。測no-display如果內容不適合內容框，則刪除整個框。測no-content如果內容不適合內容框，則隱藏整個內容。測overflow-style：規(guī)定溢出元素的首選滾動方法。九.元素框類型display 的屬性值：inline：默認。此元素會被顯示為內聯元素，元素前后沒有換行符。 block：此元素將顯示為塊級元素，此元素前后會帶有換行符。 inline-block：行內塊元素。list-item：此元素會作為列表顯示。run-in：此元素會根據上下文作為塊級元素或內聯元素顯示。table ：此元素會作為塊級表格來顯示inline-table：此元素會作為內聯表格來顯示table-row-group：此元素會作為一個或多個行的分組來顯示 table-header-group：此元素會作為一個或多個行的分組來顯示 table-footer-group：此元素會作為一個或多個行的分組來顯示table-row：此元素會作為一個表格行顯示table-column-group ：此元素會作為一個或多個列的分組來顯示值描述a