样式初始化+元素类型
一.样式初始化
浏览器对标签默认属性有默认值,但不同浏览器默认值不一定相同;为使页面和代码兼容性,需要对一些标签进行样式初始化.
*{
margin:0;
padding:0;
}/* *通配符选择器 也是选择器的一种表示 选择页面中所有的元素*/
*通配符选择器的利弊
浪费性能，每个标签多执行8次！
多元素选择器多个选择器组合起来使用
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:0;}
二.元素类型的转换
元素的类型通常分为 块级元素 内联元素 内联块元素
1.块级元素
定义：块级元素会占据一行的位置,它后面的元素内容会换行显示
块级元素里面可以放任何内容,主要用来布局。
默认占据一行
自动换行
支持添加宽度高度
支持margin
支持padding
常见的块级元素:
div
p
ul li
dl dd
h1 h6
hr
pre
table
2.行内元素
定义：内联元素也叫行级元素.它只占据他内容所占的位置,其它的
内容在他后面显示，但是 行级元素里面不能放块级元素
不自动换行
不支持宽高
margin上下无效 左右有效
padding上下无效 左右有效
padding只对自身有效
元素类型互相转换呢？
用到display属性：
none
block
inline
3.内联块元素
span{
/*以行内元素形式排列，以块级元素形式显示*/
display:inline-block;
}
1.不换行 横排显示（会解析空格）
2.支持宽高，不给宽高的时候，内容撑开，不给内容的时候是0.0
3.给宽高的时候，占据宽高的位置，不给的时候，占据内容的位置，没内容的时候，不占据
位置
4.支持margin padding 不支持margin auto
4.元素嵌套规则
1 块级元素可以套任意内容 p 标签里面不能套块级 包括其自身 h标签 dt 标签不建议套块级
2 行内不能套块级 a标签不能套a a可以套块级 但是最好是块级套a 然后把a转化成块级元素
3 行内块可以套任意,但是内联元素不管变成什么样子，都不要套块级。
5.外边距合并
垂直相遇的两个盒子会出现外边距合并的情况
包含关系的margin合并的问题
解决原理：
不让他们相遇 加padding 或者 border
