.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/