CSS显示
# 元素的显示
让一个元素在页面中隐藏或者显示出来
# display属性
display 属性用于设置一个元素应如何显示
display: none;隐藏对象display: block;转换为块级元素，显示元素
隐藏后的元素不再占有原来的位置
# visibility属性
visibility 属性用于指定一个元素应可见还是隐藏
visibility: visible;元素可视visibility: hidden;元素隐藏
visibility 隐藏元素后，继续占有原来的位置
# overflow属性
overflow 属性指定了如果内容溢出一个元素的框的效果
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出部分隐藏 |
| scroll | 总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
如果盒子加了定位 overflow: hidden 可能会隐藏效果
# 精灵图
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
- 精灵图主要正对小的背景图片使用
- 主要借助背景位置来实现
background-positionx y 坐标
.box {
width: 60px;
height: 60px;
background: url(URL) no-repeat -100px -100px;
}
1
2
3
4
5
2
3
4
5
# 字体图标
iconfont 展示的是图标 本质是字体
- 轻量级：一个图标字体要比图像小
- 灵活性：本质是文字，可以随意的改变颜色、产生阴影、透明、旋转等效果
- 兼容性：几乎支持所有的浏览器
如果遇到一些结构和样式比较简单的小图标，就用字体图标
# 图标的使用
这玩意 是不是过时了 （适用于 iconfont.io 网站）
- 将 font 文件夹放在网站的根目录下
- 复制
@font-face{...}代码 - 复制图标 元素声明字体类型
font-family
# css小三角留白
边框的显示是三角形状
div {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: #fff;
}
1
2
3
4
5
6
2
3
4
5
6
# 界面样式
# 鼠标样式
cursor
| 属性值 | 描述 |
|---|---|
| default | 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
# 轮廓线
outline
取消 none
# 文本框
resize
取消 none
# vertical-align
图片、表单和文字对齐
用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效
| 值 | 描述 |
|---|---|
| baseline | 默认 元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低元素的顶端对齐 |
因为行内元素或行内块元素默认基于基线对齐 所以图片会有一段留白
解决方法
- 给图片添加
vertical-align: middle | top | bottom属性 - 把图片转换为块级元素
display: block
# 文字溢出
# 单行文本
div {
/* 先强制一行内显示文本 normal正常显示 */
white-space: nowarp;
/* 超出的部分隐藏 */
overflow: hidden;
/* 文字用省略号代替超出部分 */
text-overflow: ellispsis;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 多行文本
div {
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 布局技巧
# margin负值
盒子边框重叠解决方法
- 让每个盒子 margin-left 移动 -1px 正好压住相邻盒子边框
但是对伪类 会有显示不出完整边框的情况 解决办法
- 如果盒子没有定位给 伪类加
position: relative; - 如果盒子有定位 伪类加
z-index: 1;
# 文字围绕
给图片添加浮动属性
<div class="box">
<div class="pic">
<img src=“URL”>
</div>
<p>
文字围绕
</p>
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 元素居中
父盒子转换为 行内块元素
text-align: center
# 分割边框效果
原理是大小为0的盒子边框效果显示
div {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
/* 实际效果是高度22px 宽度8px */
border-width: 22px 8px 0 0;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
实际应用
.secbox i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# border-collapse
边框合并 代替直接在HTML中写CSS属性
border-collapse: collapse;
# CSS初始化
/* 把所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
}
/* 把斜体文字不倾斜 */
em,
i {
font-style: normal;
}
/* 把列表标签样式去除 */
li {
list-style: none;
}
img {
border: 0; // 兼容低版本浏览器
vertical-align: middle;//取消图片留白
}
button {
cursor:pointer; // 按钮变小手
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #c81623;
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma ...;
}
body {
//css3 的属性 抗锯齿
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei,...;
color: #666;
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
*zoom: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
编辑 (opens new window)
上次更新: 2023/02/07, 14:51:48