1.CSS样式为什么要初始化
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin:0;padding:0;}来统一。
最简单的初始化方法就是：* {padding: 0; margin: 0;}
样式初始化：
简单例子：* {padding: 0; margin: 0;}
<style type="text/css">
*{margin:0;padding:0;}
div{
border:1px solid;
margin:20px auto;
height:100px;
width:100px;
box-shadow:5px 8px 5px 3px red inset ;
}
</style>
</head>
<body>
<div></div>
</body>
实现的效果如下：
*{margin:0;padding:0;}：防止浏览器之间页面显示差异。
2.display的值：
- block 像块类型元素一样显示。
- none 缺省值。像行内元素类型一样显示。
- inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
- list-item 像块类型元素一样显示，并添加样式列表标记。
relative和absolute定位原点：
- absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
- relative：生成相对定位的元素，相对于其正常位置进行定位。
relative：生成相对定位的元素，相对于其正常位置进行定位。
简单例子：
- *{margin:0;padding:0;}
- .pubuliu{
- position:relative;
- width:708px;
- height:auto;/* 居中*/
- margin:20px auto;
- }
- .pubuliu>ul>li{
- list-style:none;
- position:absolute;
}
3.iframe的一些缺点：
- iframe会阻塞主页面的Onload事件；
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过JavaScript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
4.CSS定义权重规则的方法：
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。
5.居中div，居中一个浮动元素：
（1）给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
（2）居中一个浮动元素
确定容器的宽高，如宽500、高 300的层，设置层的外边距：
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
结语：主要分析CSS样式为什么要初始化，display的值，iframe的一些缺点，CSS定义权重规则的方法，居中div，居中一个浮动元素。