**：
前幾天的晚上較全面的去看了下css的一些文件和資料，大部分的樣式運用都沒什麼大問題了，只是有些許較陌生，但是也知道他們的存在和實現的是什麼樣式。今天主要想在這篇學習筆記中寫的也不多，主要是針對:before和:after寫一些內容，還有幾個小樣式略微帶過的介紹下。
什麼是:before和:after？ 該如何使用他們？
:before是css中的一種偽元素，可用於在某個元素之前插入某些內容。
:after是css中的一種偽元素，可用於在某個元素之後插入某些內容。
下面我們先跑個簡單的**測試下效果：
ello worl
以上的**將會在頁面中展現的是」hello world」。我們通過瀏覽器的」審查元素」看到的內容是：
::before
"ello worl"
::after
p標籤內部的內容的前面會被插入乙個:before偽元素，該偽元素內包含的內容是」h」；而在p標籤內的內容後面會被插入乙個:after偽元素，該元素包含的內容是」d」。作為乙隻合格的程式猴子，捍衛」hello world」的完整存在是必要的。
既然筆記主要針對是:before和:after，那麼肯定不會只是僅僅有以上的簡單介紹就完事。下面我們看看平常該怎麼使用他們。
1.結合border寫個對話方塊的樣式。
本獸將上面這句話拆成2部分：結合border，寫個對話方塊的樣式。
既然是結合border，那麼我們先轉個小話題，簡單由淺入深的介紹下怎麼用border畫三角形樣式(這個三角形在寫對話方塊樣式的時候需要)：
效果如下
[img]
以上**將會在頁面上展示乙個正方形，左邊是個紅色的三角形，右邊是紫色的三角形，上面是黑色的三角形，下面是藍色的三角形。那麼有人就會問，我們要的不是三角形麼？野獸你畫個正方形逗我呢？
我們對上面的樣式做些修改：
.********
然後這時我們就會看到乙個在頂部的方向向下的三角形。解釋已詳細的寫在css樣式的注釋裡。
接下來我們加上:before：
完整**：
2.作為內容的半透明背景層。
比如我們的需求是做乙個半透明的登入框吧(這裡也是在**中通過注釋來解釋)：
name
password
上面的**拷貝過去，加上張可測試效果。
說完了:before和:after，我們稍微扯扯一些其他的css樣式及布局注意點(可能大家不怎麼注意，從而導致一些布局和樣式出問題)。
position 定位的問題
position屬性規定了元素的定位型別，預設為static。
該屬性還可以有下值：
absolute：生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。
fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位。
relative：生成相對定位的元素，相對於其正常位置進行定位。
inherit：規定應該從父元素繼承 position 屬性的值。
**：hello world
hello world
hello world
z-index 元素堆疊排序
z-index用於設定或檢索物件的堆疊順序，對應的指令碼特性為zindex。
z-index的數值越大，該元素的堆疊層級越高。
**：這裡我們將第乙個div和第二個div位置放到一起，方便看z-index的效果。以上**的樣式是紫色的正方形裡面有個白色的小正方形。因為小正方形的z-index大於大正方形的z-index，所以能顯示出，當我們把.first-div的z-index設定為3，這時候就看不到白色的小正方形了，它被紫色的大正方形無情的擋掉了…
zoom 元素縮放比例
zoom適用於所有元素，用於設定或檢索物件的縮放比例，對應的指令碼特性為zoom，原比例的值是1。
**：以上**將會展示的依次是紫色-黑色-紅色的div，大小分別是100px的1.5倍，1倍，0.5倍。
em 和 rem 是什麼
1em等於當前的字型尺寸，數值的改變意味著字型大小的調整。em 有繼承這個特性，也就是說，外部父元素定義了字型的em大小，內部子元素會繼承這一屬性的樣式。
rem = root em 。顧名思義，root即根部的，頂部的。也就是根部的em，這個根部指的是html根元素。所以rem的大小是針對html根元素的大小做字型的相對大小的調整。
**：hello world
hello world
hello world
hello world
以上**分別展示了不同大小的字型，em和rem的區別可以通過僅僅注釋body字型樣式和html字型樣式來看看他們之間的差別。
偽類元素before after
1 2325 2627 28開啟發動機阿史蒂芬靜安寺多路閥三階段 29開啟發動機阿史蒂芬靜安寺多路閥三階段 30開啟發動機阿史蒂芬靜安寺多路閥三階段 31開啟發動機阿史蒂芬靜安寺多路閥三階段 32開啟發動機阿史蒂芬靜安寺多路閥三階段 33開啟發動機阿史蒂芬靜安寺多路閥三階段 3435 3637 38...
標籤與before,after偽元素生成加號
before 偽元素在元素之前新增內容。after偽元素在元素之後新增內容。注意 css2及以前的使用方法是a before，css3規定的是a before，為防止相容性的問題，建議使用a before。該偽元素針對行內元素。以a before為例，新增的內容也是在中。應用舉例 使用乙個標籤生成乙...
基於偽元素（before after）的有趣例項
偽元素的英文是pseudo element，意思是虛假的元素。在css2中，偽元素 如 before 與偽類 如 hover 都是以單引號開頭 在css3中，為了跟偽類區分，變成雙冒號 如 before 但為了瀏覽器相容，大多數還在繼續使用單冒號。總體概括，偽元素有以下幾個重點 1.必須設定cont...