CSS樣式更改——裁剪、Z-Index、清除、改變元素的特性

前言

上篇文章主要介紹了CSS樣式更改篇中的框模型、定位、浮動、溢出基礎知識，這篇文章主要分享CSS樣式更改中的裁剪、Z-Index、清除、改變元素的特性基礎知識，一起來看看吧。

1.裁剪Clip

對元素某塊區域就行剪切

img{
   clip:rect(23px,14px,45px,54px)
}
rect (top, right, bottom, left)  設置元素的形狀
auto 不應用任何剪裁

2.Z-Index

設置元素的堆疊順序

div{
z-index:1
}
p{
z-index:10
}
a{
z-index:-1
}
z-index 值越大，所在的元素越靠前顯示

3.清除Clear

專門用來清除浮動

div{
  clear:both
}
left   清除左側浮動
right  清除右側浮動
both   清除左右兩側浮動
none   允許浮動

4.改變元素的特性Display

互相調換元素之間的特性

div{
    display:inline
}
none                元素不會被顯示。
block                元素將顯示爲塊級元素，此元素前後會帶有換行符。
inline               元素將被顯示爲內聯元素，元素前後沒有換行符。
inline-block         行內塊元素
list-item            元素會作爲列表顯示。
run-in               元素會根據上下文作爲塊級元素或內聯元素顯示。
table                元素會作爲塊級表格來顯示，表格前後帶有換行符。
inline-table         元素會作爲內聯表格來顯示，表格前後沒有換行符。
table-row-group       元素會作爲一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group    元素會作爲一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group    元素會作爲一個或多個行的分組來顯示（類似 <tfoot>）。
table-row             元素會作爲一個表格行顯示（類似 <tr>）。
table-column-group    元素會作爲一個或多個列的分組來顯示（類似 <colgroup>）。
table-column          元素會作爲一個單元格列顯示（類似 <col>）
table-cell            元素會作爲一個表格單元格顯示（類似 <td> 和 <th>）
table-caption         元素會作爲一個表格標題顯示（類似 <caption>）

此時的塊級元素div就有了內聯元素的特性了。
參考文檔：W3C官方文檔（CSS篇）

總結

這篇文章主要介紹了CSS樣式更改篇中的裁剪、Z-Index、清除、改變元素的特性，希望讓大家對CSS樣式有個簡單的認識和了解。
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/