前端新人学习笔记

一：默认样式重置

但凡是浏览默认的样式，都不要使用。

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}

二：块元素和内嵌元素

块元素的特征:

1.默认独占一行；

2.没有宽度时，默认撑满一排；

3.支持所有css命令；

内联元素的特征：

1.同类的标签可以在同排显示；

2.不支持宽高；

3.内容撑开宽度；

4.不支持上下的margin和padding;

5.代码换行被解析；

三：块元素和内嵌元素的转换

display:block 使内联元素具备块属性标签的特性；

display:inline 使块元素具备内嵌元素的特性。

display:inline-block

特性：1.块在一行显示；

2.行内属性标签支持宽高；

3.没有宽度的时候内容撑开；

问题：1.代码换行被解析；

2.ie6,7不支持块属性标签的inline-block;

四：浮动

1.块在一排显示；

2.内联元素也支持宽高了；

3.默认内容撑开宽度；

4.脱离文档流；

5.提升层级半层

wo shi div

这个时候div标签就和里面的内容位于同一层级了。

box1
box2

这个时候会出现这样的现象，这就和提升了半个层级有关。