1.左右布局

雙浮動|左右布局：

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">雙浮動，左右布局，右邊自適應(yīng)</figcaption>

雙浮動：

1. 在子元素下面添加float，在父元素上面加上clear，清除浮動效果后父元素的塌陷。
2. 右邊div加上%顯示，可以根據(jù)頁面的伸縮而拉伸，即為自適應(yīng)。

2.左中右布局：

• 左中右布局布局與左右布局類似，就是中間多了一欄，也可以稱為三欄布局。
• 首先在HTML結(jié)構(gòu)上，相比左右布局，多了一個div，因為要多一個容器來容納“中"。

image

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">添加了多一個div來容納中“藍色”，子元素設(shè)置浮動，父元素清除</figcaption>

1. 在子元素上設(shè)置浮動，父元素清除，記得要清除，這是浮動屬性會容易造成bug的原因。
2. 也就是比左右布局多了一條div，跟float，其他的差別不大

3.水平|垂直居中

我們先來說說水平居中，水平居中有很多種，常用的有：一段文字在一個塊級元素里面水平居中，一個塊級元素在一個頁面里面水平居中。

我們一個一個來，先來說說：

• 行內(nèi)元素文字在一個塊級元素里面水平居中

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">text-align:center</figcaption>

• 一個塊級元素在一個頁面里面水平居中：

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">margin: 0 auto; 上下為0，左右自適應(yīng)</figcaption>

直接通過設(shè)置外邊距使一個塊級元素在頁面水平居中。

垂直居中：

行內(nèi)元素的垂直居中：

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">直接設(shè)置line-height屬性與塊級元素高度一樣即可</figcaption>

塊級元素的垂直居中：

image

<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">在已知塊級元素高度情況下，利用定位完成。</figcaption>

水平垂直居中（多用于頁面的登錄框）：

image

   position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0

最后給大家?guī)硪稽cCSS的小技巧，感謝互聯(lián)網(wǎng)大神們的分享

CSS實現(xiàn)純動畫導(dǎo)航：

我們先來看一下效果：

image

HTML代碼

HTML內(nèi)容是一些用作菜單的鏈接，我們在里面添加了一些額外的SPAN標記來幫助實現(xiàn)3D效果：

image

在A鏈接標記旁邊是一系列的SPAN元素，動畫演示過程中，它將用來表現(xiàn)3D立方體的“正面”和“背面”。這些SPAN里的文字和A鏈接里的文字是一致的。

CSS代碼

這個動畫的過程就是實現(xiàn)3D變換和元素位置變化。但實際上A鏈接是沒有移動的，動的是SPAN標簽，而且是最外層的SPAN標簽，內(nèi)部的SPAN標簽被初始化在它的位置上，以后就不做任何變動。每個元素都可以向上翻，并要翻回來，我們使用的是CSS transforms。

image

如果你想看看正面和反面各自是如何旋轉(zhuǎn)移動的，我強烈推薦你們試一下，將其中的一個設(shè)置為display: none，讓鼠標懸停在它們上面，你將會看到它們各自將完成整個動畫的哪一部分動作。

這種實現(xiàn)方式的唯一的缺點是有重復(fù)的菜單名稱，雖然技術(shù)上是隱藏看不出來的，但從代碼質(zhì)量上說存在代碼重復(fù)問題。然而，從視覺效果上看，它的動畫非常順滑，毫無瑕疵。沒有JavaScript，F(xiàn)lash或canvas技術(shù)，只是一些簡單的CSS標記，這技術(shù)CSS動畫….一種我們web程序員都應(yīng)該感謝的技術(shù)。----------資料引用：

純CSS實現(xiàn)菜單、導(dǎo)航欄的3D翻轉(zhuǎn)動畫效果css3_CSS網(wǎng)頁制作_腳本之家?www.jb51.net

圖標