style相关基础知识

1. 基本属性：
2. （背景颜色）background-color
3. （字体颜色）color:red
4. （高度）height:48px
5. （宽度）width:200px
6. （字体大小）font-size:16px
7.   (字体加粗)font-weight:bold(也可以给定内置数值)
8.   (左右居中)text-align:center
9.   (上下居中 根据标签高度居中)line-height:48px
10. （让标签浪起来；块级标签也可以堆叠） float
11. 关于background-color的补充知识点：
12. 　　background-image:url("图片路路径") 默认 div越大 图片会重复堆叠直至堆叠满div大小（垂直 水平 都会自动堆叠）
13. 　　background-repeat: repeat-y（垂直方向堆叠）；repeat-x(水平方向堆叠)；no-repeat(不堆叠)
14. 　　background-position-x:10px 表示将background-image中的图片岩x轴方向移动10像素(默认是0)
15. 　　background-position-y:10px 表示将background-image中的图片岩y轴方向移动10像素（默认是0）

16. ---

18. 边框属性：
19. 　　标签边框：-宽度，样式，颜色(border:4px dotted red;)
20. 　　-上下左右(border-left; border-top等等)
21. 补充知识点：在border中的border-radius:30% 可以让边框变圆(相当于倒角)
22. overflow:auto 产生滑块

23. ---

25. 块级标签和行内标签之间的转换：
26. 块级标签和行内标签的转换：例:<div style="display:inline"> <span style="display:block">
27. display:inline是将块级标签转换成行内标签的属性
28. display:block是将行内标签转换成块级标签的属性
29. display:inline-block可以使行内标签具有块级标签的属性；块级标签也会有行内标签的属性
30. display:none 让标签消失

31. ---

33. 边距(padding内边距)
34. (margin外边距) margin-top:48px块级标签离顶部的距离

35. ---

36. 关于position相关：
37. 　　position:给页面分层里面的属性有position:fixed; bottom:20px; right:20px
38. 　　例子1：<div style="GoTop()";style="width:50px;height:50px;position:fixed;bottom:20px;right:20px;">
39. 　　返回顶部</div>
40. 　　其中fixed是用来做固定在页面的某个位置
41. 　　其中absolute是绝对定位；它一般和relative配合使用 不然没有实际意义
42. 　　例子2：<style>.pg-header{
43. 　　height:48px;
44. 　　
45. 　　position:fixed;
46. 　　top:0;
47. 　　right:0
48. 　　left:0
49. 　　}
50. 　　</style>
51. 　　第二个例子可以让头部固定在顶部 不随着页面滚动而改变位置
52. 　　关于absolute的案例在1122213的python文档中
53. 　　opacity:0.5 属性表示层的透明度
54. 　　z-index:10 属性表示层级的顺序数值越大的就在顶层

55. ---

57. overflow标签内部滚动条：
58. 　　overflow:auto这个是如果内容比定义的块标签大且也把块标签撑开了；用这个参数可以使内容和块标签定义的大小一样；并产生滚动条
59. 　　overflow:hidden这个属性可以使内容和块标签定义的大小一样大

　　　　在javascript中overflow的位置获取：

　　　　　　$(window).scrollTop()获取

　　　　　　$(window).scrollTop(0)设置

 

　　　　　　scrollLeft([vall])

 

2. ---

4. css中的hover属性：
5. 　　<!--当鼠标移动到当前标签上时，以下css属性才生效-->
6. 　　.headers .menu:hover{" style="font-size: 14pt;">补充知识点：
7. 　　cursor:pointer;让鼠标变成一个小手