博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端之CSS:CSS补充
阅读量:7082 次
发布时间:2019-06-28

本文共 4261 字,大约阅读时间需要 14 分钟。

css常用的一些属性:

1.去掉下划线 :text-decoration:none ;

2.加上下划线: text-decoration: underline;

3.调整文本和图片的位置(也就是设置元素的垂直对齐方式):vertical-align:-20px;

没设置之前:

 

设置之后:

3.外边距:margin

4.内边距:padding
5.居中;margin 0 auto;(只是针对盒子居中)

6内联标签是不可以设置长宽的,有时候就得把内联标签变成块级标签或者块级内联标签,这就用到了display标签。。

  1.将内联标签转换成块级标签:display:block;
  2.将块级标签转换成内联标签:display:inline;
  3.块级内联标签:display;inline-block;
   块级内联标签可以像块级一样可设长宽,也可像内联一样在一行显示
6.隐藏的两个方法:display:none; #隐藏了会顶上去
         visibility :hidden; #隐藏了不会顶上去
7.隐藏溢出的两个方法:overflow :auto;
           overflow :scoll;  #带滚动条
8.文本水平居中:text-align:center;
   文本垂直居中:line-height;
9.伪类;
  1.没访问之前: a:link{color:red;} 
  2.鼠标悬浮时: a:hover{color:green;}
  3.访问过后: a:visited{color:yellow;}
  4.鼠标点击时 a:active{color:blue;}
  5.在p标签属性为c2的后面加上内容
  p.c2:after{
    content:'hello';
    color:red;
  }
6.在p标签属性为c2的钱面加上内容
  p.c2:before{
    content:'啦啦啦';
    color:red;
  }
10.position的四种属性
  1.static:默认位置
  2.fixed:完全脱离文档流,固定定位(以可视窗口为参照物)
  3.relative:相对定位(参照的是自己本身的位置),没有脱离文档流,没有顶上去,会保持自己的位置不动。可以使用top left进行定位
  4.absolute:绝对定位:脱离了文档流(参照的是按已定位的父级标签定位,如果找不到会按body的去找)
注意!!:将定位标签设置为absolute,将他的父级标签设置为定位标签 (relative)
11.float和position的区别
  float:半脱离文档流
  position:全脱离文档流
12.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

复制代码
1  2  3  4     
5 Title 6 26 27 28
29
30
31 32
复制代码

13.透明度:opacity:0.4;

14.边框弧度:border-radius: 50%;
15.去除列表前面的标志:list-style:none;
16.对齐上面和左边最顶部:padding:0; margin:0;
17.字体加粗样式: font-weight: 900; 
18.需要注意的几个逻辑表达式的问题,下面的这个和js的&&,||用法是一样的
  print(3 and 5) #两个为真才为真
  print(0 and 3) #0是假就不判断后面了,直接成假了
  print(0 or 3) #有一个为真就为真
  print(2 or 3) #2已经为真了那么就不会去判断后面了

复制代码
1  2  3  4     
5 Title 6 66 67 68
69
    70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
77
    78
  • 79
  • 80
  • 81
  • 82
  • 83
84
<
85
>
86 87
88 89 90
复制代码
复制代码
1   2   3   4     
5 后台管理布局 6 51 52 53
54
55
56
61
62
63

海燕啊

64

海燕啊

65

海燕啊

66

海燕啊

67

海燕啊

68

海燕啊

69

海燕啊

70

海燕啊

71

海燕啊

72

海燕啊

73

海燕啊

74

海燕啊

75

海燕啊

76

海燕啊

77

海燕啊

78

海燕啊

79

海燕啊

80

海燕啊

81

海燕啊

82

海燕啊

83

海燕啊

84

海燕啊

85

海燕啊

86

海燕啊

87

海燕啊

88

海燕啊

89

海燕啊

90

海燕啊

91

海燕啊

92

海燕啊

93

海燕啊

94

海燕啊

95

海燕啊

96

海燕啊

97

海燕啊

98

海燕啊

99

海燕啊

100

海燕啊

101

海燕啊

102

海燕啊

103

海燕啊

104

海燕啊

105

海燕啊

106

海燕啊

107

海燕啊

108

海燕啊

109

海燕啊

110

海燕啊

111

海燕啊

112

海燕啊

113

海燕啊

114

海燕啊

115

海燕啊

116

海燕啊

117

海燕啊

118
119
120 121
复制代码
复制代码
1  2  3  4     
5 遮罩层 6 21 22 23
24

haiyan

25

haiyan

26

haiyan

27

haiyan

28

haiyan

29

haiyan

30

haiyan

31

haiyan

32

haiyan

33

haiyan

34

haiyan

35

haiyan

36

haiyan

37
38
39 40
复制代码

 

转载于:https://www.cnblogs.com/kcwxx/p/10152322.html

你可能感兴趣的文章
Android Studio使用说明
查看>>
功能应用程序延迟发送:4款定时发送短信的应用程序
查看>>
linux shell脚本获得当前文件路径
查看>>
畅想(3)-下一步的计划
查看>>
Tail Recursion, Recursion, Concepts and Examples
查看>>
任务超期后的定时器处理
查看>>
myeclipse乱码问题和 编码设置
查看>>
WEB打印的几种方案
查看>>
linux下安装QT过程
查看>>
ADO.NET访问SQL Server调用存储过程带回参
查看>>
为outlook增加“邮件召回”功能
查看>>
设计模式12---设计模式之代理模式(Proxy)(结构型)
查看>>
[置顶] 实现360度全景图像的利器--PanoramaGL
查看>>
杀人放火金腰带,修桥补路无尸骸。
查看>>
UVa 10012 - How Big Is It? 堆球问题 全排列+坐标模拟 数据
查看>>
【转载】pygame的斜线运动
查看>>
How to measure IOPS for VMware
查看>>
GNU风格 ARM汇编语法4
查看>>
poj2148
查看>>
jQuery实现侧边导航栏效果
查看>>