.CSS樣式初始化

不同的瀏覽器對有些HTML標簽屬性的默認值是不同的，為消除這種差異，需要對CSS進行初始化，即通過設置樣式及其屬性值，替代瀏覽器默認的屬性值。

2.京東首頁CSS初始化

（1）CSS初始化樣式引入方式

采用引入外部樣式表的方式進行CSS初始化

（2）相關代碼解讀

/* 京東CSS初始化 */
/* *為通配符，表示html所有標簽 */
* {
margin: 0; /* 標簽外邊距為0*/
padding: 0; /* 標簽內邊距為0*/
}
 /* em、i表示斜體標簽 */
em,
i {
font-style: normal; /* 表示標簽中內容不以斜體表示*/
}
/* li 表示列表標簽 */
 li {
list-style: none; /* 表示去掉列表的樣式，如前面圓點等*/
}
/* img 表示圖片標簽 */
img {
border: 0; /* 以下兩句表示 圖片與同級別行內元素middle對齊*/
vertical-align: middle;
}
/* button 表示按鈕標簽 */
button {
cursor: pointer; /* 表示鼠標樣式 小手 */
}
/* a 表示超鏈接標簽 */
a {
color: #666;
text-decoration: none; /* 表示去掉超鏈接下劃線 */
 }
 /* a:hover 表示a標簽的動態偽類選擇器 */
a:hover {
color: #c81623; /* 表示當鼠標懸停在超鏈接上時，自體變為紅色 */
}
 /* button、input表示按鈕標簽、表單輸入標簽 */
button,
 input {
/* 設置默認字體，包括unicode編碼的字體 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
"\5B8B\4F53", sans-serif;
}
 /* body 表示body標簽*/
body {
/* css3屬性（-webkit-font-smoothing）字體抗鋸齒渲染，字體更為平滑 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,
Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666;
}
/* 表示當class屬性的值包含hide、none時的樣式 */
.hide,
.none {
display: none; /* 表示隱藏元素，且該元素空間可以被其他元素使用*/
}
/* 表示偽元素選擇器 用來清除浮動*/
.clearfix:after {
visibility: hidden; /* 為保證兼容性 必要的固定設置*/
clear: both; /* 清除浮動 必要的固定設置*/
display: block; /* 清除浮 必要的動固定設置*/
content: "."; /* 清除浮動 必要的固定設置*/
height: 0; /* 可選的固定設置*/
}
.clearfix {
/* 這是針對于IE6/7的，因為IE6/7不支持:after偽類，
讓IE6/7的元素可以清除浮動來包裹內部元素。*/
*zoom: 1;
}

3.淘寶首頁CSS初始化

（1）CSS初始化樣式引入方式

采用內部樣式的方式進行CSS初始化

（2）相關代碼解讀

淘寶在進行CSS樣式初始化時，并沒有采用通配符*的方式設置標簽的內外邊距，而是將具體的標簽進行并集羅列。根據網上資料，通配符*，容易書寫，但是在大型網站中，會初始化所有標簽，會加大網站負荷，使得網站加載變慢。當然京東應該是做了優化的，不然網站體驗也會很差。

/* 淘寶CSS初始化 */
/* 設置標簽的內外邊距為0 */
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
padding: 0;
}
/* 設置字體大小、行高及默認字體 */
body,
button,
input,
select,
textarea {
font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",sans-serif;
}
/* 字體大小同body中設置的一樣 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
 }
/* 字體不采用斜體展示 */
address,
cite,
dfn,
em,
var {
font-style: normal;
}
/* 設置默認字體 */
code,
kbd,
pre,
samp {
font-family: courier new, courier, monospace;
}
/* 設置標簽為small的字體大小 */
small {
font-size: 12px;
}
/* 去掉字體列表樣式 */
ol,
ul {
list-style: none;
}
/* 去掉a標簽下劃線 */
a {
text-decoration: none;
}
/* 設置動態偽類選擇器，鼠標懸停其上時顯示下劃線 */
a:hover {
text-decoration: underline;
}
/* 設置垂直對齊方式，在右上角 */
sup {
vertical-align: text-top;
}
/* 設置垂直對齊方式，在右下角 */
sub {
vertical-align: text-bottom;
}
legend {
color: #000;
}
fieldset,
img {
border: 0;
}
button,
input,
select,
textarea {
font-size: 100%;
 }
button {
border-radius: 0;
      }
 /* 設置表格相鄰邊框融合 */
table {
border-collapse: collapse;
border-spacing: 0;
 }

4.尋找CSS樣式初始化代碼技巧

通常在CSS初始化代碼中包含padding:0和margin:0的代碼，表示將內外邊距設置為0；當找到該代碼時，一般是找到了CSS樣式初始化的代碼開頭。

關于偽類和偽元素參見：Web前端開發-CSS中偽類和偽元素

言

上篇文章主要介紹了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/