一.标签转换：
html中所有标签都是可以通用的，分为行级标签、行内块级标签、块级标签
1.行级标签：本身不具有宽高，不换行，即使设置了宽度也不生效
解决方法：如果要设置宽高，可以将行级标签转换为行内块级标签或者块级标签
display: inline-block 转换为行内块级标签，不换行
display: block 转换为块级标签，会换行
2.行内块级标签：本身具有宽高，不换行
解决方法：如果要换行，可以将行内块级标签转换为块级标签
display: block 转换为块级标签，会换行
display:inline 转换为行级标签，不会换行
3.块级标签：本身具有宽高，并且会换行
解决方法：如果要设置不换行，可以将块级标签转换为行级标签或者行内块级标签
display: inline 转换为行级标签，无宽高，不会换行
display: inline-block 转换为行内块级标签，有宽高，不会换行
二.显示与隐藏：
1.display
例：display: none 隐藏，隐藏后不占有空间 display: block 显示
2.visibility
例：visibility:hidden 隐藏，隐藏后依然占有空间
3.overflow
例：overflow: none 只有超出的时候才隐藏
三.定位：
定位分为相对定位(relative)、绝对定位(absolute)、固定定位(fixed)
1.相对定位(relative)：对象遵循标准文档流，并且参照自身所在的文档流位置通过top，right，bottom，left四个偏移量来设置对应的位置（一般使用两个偏移量来确定位置），占有空间。数值的计算法从自身的位置开始。
2.绝对定位(absolute)：不占有空间，对象脱离了文档流。此时偏移量属性参照离自身最近的定位父标签来设置对应的位置，如果一直没有找到定位的父标签，最后就以浏览器窗口（document）来设置对应的位置。
3.固定定位(fixed)：就是把标签元素固定在页面的某一个位置。 对象脱离了文档流，此时对象是以浏览器窗口来设置偏移量。IE6它不支持固定定位。
三大定位的特性：
1.relative a)不影响标签自身特性 b)标签不脱离文档流,依然会占有原来的位置 c)提升层级
2.absolute a）标签会脱离文档流 b)内容撑开宽高 c)支持所有css样式 d)提升层级 e)它最好和相对定位配合使用 f)如果有定位的父标签，就针对父标签来设置偏移量，如果第一个父标签没有定位，那就找父标签的父标签，如果找着了，就以该父标签来设置偏移，如果一直都未找到，最终就以窗口来设置偏移量，父标签的定位不一定是相对定位，也可以是绝对定位。g)如果绝对定位标签下的子标签有浮动，就可以不用BFC（清除浮动）。
3.fixed a) ie6不兼容 b)就是针对窗口设置偏移量，虽然标签中是嵌套关系，实际上它们互不影响。c) g)如果固定定位标签下的子标签有浮动，就可以不用BFC（清除浮动）
四.标签层级：
z-index 数字（可以正数 或负数）
比较方法：
1.当定位的标签都没有给z-index时，那就按照后写的在上面；
2.当z-index的值相同时，就看哪个标签写在后面，谁就在上面
3.谁的z-index值越大，谁就在前面，和标签书写顺序没有关系注意点：
z-index必须和有定位的标签使用，就是有position样式时才可以使用z-index，其他情况都没有效。
例：
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Document</title>
6. <style>
7. div{
8. width:200px;
9. height:200px;
10. }
11. .one{
12. background: red;
13. position: absolute;
14. top:0px;
15. left:0px;
16. z-index:2;
17. }
18. .two{
19. background: blue;
20. position: absolute;
21. top:0px;
22. left:100px;
23. }
24. </style>
25. </head>
26. <body>
27. <divclass="one"></div>
28. <divclass="two"></div>
29. </body>
30. </html>
1277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
