DIV CSS 佈局教程網

1、內聯元素，定義上下邊界不會影響到行高

2、只有普通文檔流中塊框的垂直空白變才會發生空白邊疊加，行內框、浮動框或者定位框之間的空白框是不會疊加的

3、居中布局設計：

方式1：margin：0 auto；

方式2：使用定位和負值空白邊讓設計居中

　　/*將容器的左邊緣定位到頁面的中間*/

　　#box{

   　　width: 720px;

 　　  position: relative;

 　　  left: 50%;  

  　　 border: 1px solid;

　　}

　　/*讓容器的中間居中*/

　　#box{

  　　 width: 720px;

   　　position: relative;

   　　left: 50%;  

   　　margin-left: -360px;

   　　border:1px solid;  

　　}

4、兩列右側寬度自適應布局：設置左側寬度，右欄不設置任何寬度值

5、三列布局中間列寬度自適應布局

　　#left{

   　　width: 220px;

   　　height: 200px;

   　　background-color: #09f;

   　　border:2px solid #06f;

   　　position: absolute;

   　　top:0;

  　　 left: 0;

　　}

　　#right{

   　　width: 200px;

   　　height: 200px;

   　　background-color: #09f;

   　　border:2px solid #06f;

   　　position: absolute;

   　　top:0;

   　　right: 0;

　　}

　　#mian{

   　　height: 200px;

   　　background-color: #09f;

   　　border:2px solid #06f;

   　　margin:0 204px 0 204px;

　　}

6、兩列寬度自適應布局（注意要將整體設置為100%）

　　#left{

   　　width: 20%;

   　　height: 200px;

   　　float: left;

　　}

　　#right{

  　　 width: 70%;

   　　height: 200px;

   　　float: left;

　　}

7、overflow：visible  |　auto    |     hidden   |   scroll

　　visible  :不剪切內容也不添加滾動條

　　auto：該屬性值為body對象以及textarea的默認值，在需要時剪切內容並添加滾動條

　　hidden：不顯示超過對象尺寸的內容

　　scroll：總是顯示滾動條

　　overflow-x以及overflow-y分別設置當前對象的內容超過其指定的寬度時、高度時的處理

8、背景控制：

1. background-origin:border |  padding   | content

          border：從border區域開始顯示背景

          padding ：從padding區域開始顯示背景

          content：從content區域開始顯示背景

1. background-clip:border-box  |   padding-box   |  content-box   |    no-clip

          border-box:從border區域向外剪裁背景圖像

          padding-box：從padding區域向外剪裁背景圖像

          content-box：從content區域向外剪裁背景圖像

          no-clip：從border區域向外剪裁背景圖像，與border-box的屬性值一致

1. background-size：設置背景圖片大小

　　　　length: 第一個值設置寬度，第二個值設置高度，如果只設置一個值，則第二個值會被設置為 "auto"

　　　　percentage : 以父元素的百分比來設置背景圖像的寬度和高度，第一個值設置寬度，第二個值設置高度，如果只設置一個值，則第二個值會被設置為 "auto"

　　　　cover: 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中

　　　　contain：把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域

9、字體樣式控制：

1. font-style:italic（斜體） |  oblique（偏斜體）  |  normal（正常）
2. text-transform：capitalize（單詞首字母大寫） |  uppercase(單詞全部大寫)  |  lowercase（單詞全部小寫）
3. 段落垂直對齊：vertical-align：top（段落頂端對齊） |  middle（段落垂直居中對齊）  |   bottom（段落底端對齊）
4. 字間距：letter-spacing：1em；
5. text-shadow: h-shadow v-shadow blur color
6. text-overflow:設置是否使用一個省略標記（…）標示對象內的文本溢出

　　　　text-overflow:   clip（不顯示，就是簡單的裁切）   |   ellipsis（使用）

　　　　使用省略號掩藏的時候還需要另外設置white-space：nowrap    ；     overflow：hidden

　　　（white-space： pre 空白會被浏覽器保留；nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止；pre-wrap 保留空白符序列，但是正常　　　　地進行換行；pre-line 合並空白符序列，但是保留換行符； normal 默認。空白會被浏覽器忽略）

1. word-wrap：用於設置當前行超過指定容器的邊界時候是否斷開轉行

　　　　normal：控制連續文本換行

　　　　break-word：內容將在邊界內換行，如果需要，詞內換行也會發生

10、圖片對齊方式：

1. 圖片的水平對齊設置:利用text-align屬性設置，但其需要通過為其父元素設置定義的text-align樣式來達到效果
2. 圖片的垂直對齊，vertical-align

11、表單圖像域：是指可以用在提交按鈕上面的圖片，該圖片具有按鈕的功能

　　<input type="image" name="image" src="">

12、用戶界面resize：設置頁面中元素的尺寸大小，用戶可以進行調節

　　both:用戶可以調節高度以及寬度

　　horizontal:用戶可以調節元素的高度

　　vertical:用戶可以調節元素的高度

13、css濾鏡：filter：filter    name（parameters）

       .alpha{

      filter: alpha(Opacity=opacity,Finishopacity= finishopacity)

}

14、columns :  寬度  ||  欄目數