由于各浏览器的渲染内核都不一样，对相同的标签可能会有不同的样式，为了解决这种问题带来的浏览器的不兼容，在网页开发之前，一般都会进行初始化，下面几个是常用的初始化代码，直接饮用也行。

雅虎CSS初始化

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;}

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

腾讯QQ官网CSS初始化

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

淘宝CSS初始化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
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%; }
table { border-collapse:collapse; border-spacing:0; }

新浪官网CSS初始化

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

网易官网CSS初始化

html {overflow-y:scroll;}
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;}

浮动布局

语法：
关键字：float。值：left（左浮动）;right（右浮动）。

特点：

• 元素浮动之后不占据原来的位置（脱标），下面的元素会在浮动元素的下面。
• 浮动的盒子在一行上显示。
• 行内元素浮动之后转换为行内块元素。（转行内块元素不推荐使用此方法，转行内元素最好使用display: inline-block;）。
• 浮动通常用于：文本绕图（文字不会位于浮动元素的下面）、制作导航（通常是li的浮动）、网页布局。
• 浮动的盒子一般都给宽度,浮动的盒子千万不要让他超出父盒子，超出父盒子的部分会影响下面盒子中的浮动的子盒子。
• 浮动的盒子比标准流盒子高，但是能够遮挡住标准流盒子，遮挡不住里面的图片和文字。
• 同一个父级元素的子盒子，要么都浮动，要么都不浮动。
• 浮动的盒子相互影响，不管是否在一个盒子中。
• 建议浮动的盒子都给宽高，尽量盒子之间有点距离。
• 浮动的盒子，超出父盒子宽度换行解决办法：再给浮动的盒子一个父盒子，父盒子宽度大于要显示的子盒子总宽度，然后用，overflow:hidden切掉。
• 同级相邻的浮动的盒子顶边对齐。

清除浮动

由于元素浮动之后不占据原来的位置（脱标）的缘故当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误，位于浮动元素的下面，所以引入了清除浮动的概念，清除浮动不是不用浮动，清除浮动产生的不利影响。

• 清除浮动的方法
  清除浮动，其实是清除浮动产生的不利影响。
  关键字：clear 值：left（清除左浮动）；right（清除右浮动）；both（清除相关所有浮动，应用最多）

  • 给父元素设置高度。
  • 额外标签法
    在最后一个浮动元素后添加一个清除浮动的标签。例如：<div style="clear: both;"></div>
  • 给父集元素使用overflow:hidden;或者overflow:auto但是，如果有内容出了盒子，外面的部分将会被隐藏，不能使用这个方法。
  • 伪元素清除浮动
    首先定义一个伪元素清除浮动，然后在父元素中调用。

.clearfix:after{
    display:block;
    clear:both;
    height:0;
    content: "";
    visibility: hidden;
    overflow:hidden;
}
.clearfix{
   zoom:1;
}

或者:双伪元素标签法

.clearfix:before,  .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
     zoom: 1;
}

附录：overflow

• overflow:visible;默认值，超过元素框不会被隐藏，会显示在外面。
• overflow:hidden;超过元素框会被修剪，不会显示在外面。
• overflow:scroll;超过元素框会被修剪，但是浏览器会存在滚动条，用户可以通过滚动条来查看所有内容。
• overflow:scroll;超过元素框会被修剪，如果元素被修剪了，浏览器才会出现滚动条，用户可以通过滚动条来查看所有内容。

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

边框(border)

属性（值）

• border-top-style边框样式；solid 实线；dotted 点线； dashed 虚线。
• border-top-color 边框颜色。
• border-top-width 边框粗细。
  注意：边框属性的连写的特点：没有顺序要求，线型为必写项。
• border-collapse:collapse 边框合并 。<label for="one">账号：<input type="text" id="one"></label>
• border-top|right|bottom|left 上右下左边框。

• a标签的部分尽量用margin。

  内边距

  属性（值）

• padding-top|right|bottom|left 上右下左内边距。

• padding连写案例。

  • padding: 20px; 上右下左内边距都是20px。
  • padding: 20px 30px; 上下20px 左右30px。
  • padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40。
  • padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px。

注意：

• padding没有负值。
• 内边距影响盒子的宽度。
• 边框影响盒子的宽度。
• 盒子的宽度=定义的宽度+边框宽度+左右内边距。
• 继承的盒子一般不会被撑大：包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。
• 盒子的撑开与撑破，有高度会被撑破，没有高度会被撑开。

外边距

属性（值）

• margin-top|right|bottom|left 上右下左外边距。

• margin连写案例。

  • margin: 20px; 上右下左内边距都是20px。
  • margin: 20px 30px; 上下20px 左右30px。
  • margin: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40。
  • margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px。

  **注意：

• 垂直方向外边距合并**
  两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。
• 嵌套的盒子外边距塌陷
  解决方法: 1 给父盒子设置边框，2 给父盒子overflow:hidden; （推荐使用）。

注意：

• 行内元素可以定义左右的内外边距，上下会被忽略掉，并且行内块可以定义内外边距。
• 行内块可以定义内外边距。
• 浏览器默认文字大小16px。

盒子稳定性

• 只给宽高的盒子（宽/高度剩余法）最稳定。
• 给padding的盒子其次。
• 给margin的盒子一般。

盒子的隐藏问题

• overflow：hidden;隐藏盒子超出的部分。
• display: none;隐藏盒子，而且不占位置。(用的最多)
• visibility: hidden; 隐藏盒子，而且占位置。
• opacity: 0;隐藏盒子，而且占位置。
  -position/top/left/...-999px 隐藏盒子，而且占位置。
• margin也可以隐藏盒子。

背景

背景颜色

属性：background-color
值：参考颜色的表示方式

背景图片

属性：background-image
值：url();url里跟的是图片的地址。

背景平铺

属性：background-repeat
值：repeat(默认)表示平铺这个标签；no-repea表示不平铺；repeat-x表示沿x轴平铺；repeat-y表示沿y轴平铺。

背景定位

属性：background-position
值：left表示水平方向的左；right表示水平方向的右；center表示中间；top表示垂直方向的上；bottom表示垂直方向的下。
注意：

• 当方位属性的值只写一个的时候，另外一个值默认居中。
• 如果写2个方位值，顺序没有要求。

• 如果写的是2个具体值的时候，第一个值代表距离左侧的距离，第二个值代表距离顶部的距离。

  固定背景

  属性：background-attachment
  值：

• scroll表示背景在页面的位置不固定，在页面的位置随内容改变而改变。
• fixed表示背景在页面的位置固定，在页面的位置不会随内容改变而改变。相当于在浏览器页面内进行了定位。

附录：背景属性的连写
background:background-color background-image background-repeat background-position background-attachment;
注意：

• background后面只写属性的值；

• background-image的url是必写项，顺序无要求。

  行高

  行高：是基线与基线之间的距离
  行高=文字高度+上下边距
  注意：一行文字行高和父元素高度一致的时候，垂直居中显示。
  行高的计算
  单位除了像素以为，行高都是与文字大小乘积。
  在继承的时候，不带单位时，行高等于行高乘以子元素文字大小，em和%的行高等于和行高乘以父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
  推荐行高使用像素为单位。行高也可以撑开盒子。不设置行高，默认是盒子的高度
  行内元素父元素给了行高之后，子盒子不能使用font，要单独设置字体样式，行内元素尽量不适用font。

超链接标签的CSS伪类

• a:link{属性:值;} 链接默认状态，也可以表示为a{属性:值}。
• a:hover{属性:值;} 鼠标放到链接上显示的状态。
• a:active{属性:值;}链接激活（鼠标点击时）的状态。
• a:visited{属性:值;}链接访问之后的状态。

• :focus{属性:值;}获取焦点
  注意：四种状态都写的时候，必须按顺序写，否则会出现错误。

  附录一：去除链接下划线

  属性：text-decoration
  值： none有下划线（默认）； underline无下划线；line-through无下划线，有删除线

  附录二：鼠标放在链接时的鼠标的形状

  属性：cursor
  值：

• url：需使用的自定义光标的 URL。注意：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
• default：默认光标（通常是一个箭头）。
• auto：浏览器设置的光标（一般标签默认）。
• crosshair：光标呈现为十字线。
• pointer：光标呈现为指示链接的指针（一只手）。
• move：此光标指示某对象可被移动。
• e-resize：此光标指示矩形框的边缘可被向右（东）移动。
• ne-resize：此光标指示矩形框的边缘可被向上及向右移动（北/东）。
• nw-resize：此光标指示矩形框的边缘可被向上及向左移动（北/西）。
• n-resize：此光标指示矩形框的边缘可被向上（北）移动。
• se-resize：此光标指示矩形框的边缘可被向下及向右移动（南/东）。
• sw-resize：此光标指示矩形框的边缘可被向下及向左移动（南/西）。
• s-resize：此光标指示矩形框的边缘可被向下移动（南）。
• w-resize：此光标指示矩形框的边缘可被向左移动（西）。
• text：此光标指示文本。
• wait：此光标指示程序正忙（通常是一只表或沙漏）。
• help：此光标指示可用的帮助（通常是一个问号或一个气球）。

继承性

前提：继承性发生的前提是包含（嵌套关系）
作用：子元素可以继承父元素的样式
注意：

• 文字的所有属性都可以继承。
• 标题（h1~h6）不能继承文字的大小

• 超链接（a）标签不能继承文字颜色

  层叠性

  注意：当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行样式表后边的代码(浏览器的执行顺序是从上向下的，所以和标签调用选择器的顺序没有关系）。

  优先级

  !important>行内样式>id选择器>类选择器>标签选择器>通配符>继承>默认样式
  权重参考表（只作为参考，无实际意义）

  内联样式	ID	类，伪类和属性选择器	类型选择器和伪元素选择器	通配符、子选择器、相邻选择器
  1000	100	10	1	0

  注意：

• !important1000以上
• 继承的权重为0
• 权重会叠加

块状元素

特点：

• 独占一行；
• 元素的高度、宽度、行高以及顶和底边距都可设置；

• 元素宽度在默认不设置的情况下，宽度和他的父级元素相同。
  典型代表：div、p、h1、form、ul、li

  内联元素（行内元素）

  特点：

• 在一行显示；
• 元素的高度、宽度及顶部和底部边距不可设置；

• 元素的宽度是他包含内容的宽度，不可改变。
  典型代表：span、a、label、 strong、em

  内联块状元素（行内块元素）

  特点：

• 在一行显示；

• 元素的高度、宽度、行高以及顶和底边距都可设置。
  典型代表：img、input

  附录：转换

• 块状元素转行内元素：display:inline;
• 行内元素转块状元素：display:block;
• 块状元素和行内元素转行内块元素：display:inline-block;

内嵌式

特点：样式只作用于当前网页文件，没有真正实现结构表现分离

<style type="text/css">
    样式表位置
</style>

外链式

特点：作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。（建议使用）

<link rel="stylesheet" type="text/css" href="1.css">

行内式

特点：作用范围仅限于当前标签，范围小，结构表现混在一起。（不建议使用）

<p style="width:12px;height: 30px">你好</p>

属性

• font-size 文字大小。
• Font-weight文字粗细，值从100-900，也可以使用：normal（400）默认值；定义标准的字符。bold（700）定义粗体字符。bolder定义更粗的字符；lighter定义更细的字符。（建议使用数字）
• Font-family 文本的字体。值得形式：中文名称；英文名称；unicode 编码。
• Font-style 值：normal 默认值；italic斜体。
• line-height 行高。

注意：谷歌不支持12px以下字体。

附录一：文本属性连写

font: font-style font-weight  font-size/line-height  font-family;

注意：font:后边写的是属性的值一定按照书写顺序；文本属性连写文字大小和字体为必写项。

附录二：查看字体的unicode 编码

第一步：打开浏览器的调试模式
快捷键：F12
也可以点击鼠标右键，选择审查元素（不同的浏览器可能不同）
第二步：选择console

第三步：输入escape("字体名称")

注意：一定是在英文状态下
第四步：把%u换成/

颜色的名称

示例：p{color:gray;}

RGB颜色

• 使用百分比 p{color:rgb(100%,100%,100%);} 注：可以有小数
• 十六进制颜色p{color:#cc00cc;} 注：范围（0~f）
• 数字颜色1p{color:rgb(255,125,246);} 注：范围（0~255），不可以有小数
• 数字颜色2p{color:rgba(255,125,246,0.5);} 注：范围（0~255），不可以有小数,a代表alpha 不透明度(值 0-1,1代表不透明)

注意：opacity可以使盒子变透明。优点方便，里面的内容也会半透明。