【前端】网页布局常用技巧

精灵图

为什么需要精灵图技术

很多小图片，每一个小图片请求一次，浪费网络 IO

为了减少服务器发送/接受请求次数，提高页面加载速度

精灵图技术原理

精灵图技术主要针对背景图片
将多个背景图片整合到一张图片中
使用background-position/width/height属性将图片进行切割得到想要的图片
一般background-position都是负值

字体图标

字体图标产生的原因

网页上有许多小图标，使用精灵图技术实现有很多缺点

精灵图是背景图片，图片占用存储比较大
图片进行放大缩小时会失真
精灵图一旦确定，修改很麻烦

字体图标的优点

展示的是图标，其实是字体
放大缩小不失真，可以随便改变颜色

字体图标使用

下载字体图标
引入字体图标
- 下载的字体图标放在项目根目录
- 通过 CSS 引入
- 在页面中通过font-family使用图标
更新下载图标
- 原来的文件不能删除
- 导入selection.json

CSS 三角

CSS 三角的原理

通过边框实现

一个没有大小的盒子：box { width: 0; height: 0;}
为盒子设置边框：大小为三角底边长度，颜色为透明，风格为实线：border: 10px solid transparent;
想要的三角形底边在哪，哪个方向的边框设置颜色border-left: red;

用户界面控制

用户界面样式，提高用户体验

鼠标样式

通过li {cursor: value;}控制

default(小白，默认)
pointer(小手)
move(移动)
text(文本)
not-allow(禁止)

表单轮廓

文本框默认有边框轮廓，通过outline: none;取消

防止表单拖拽

文本域防拖拽，默认可以拖拽：resize: none;

行内块元素与文本垂直居中

行内块元素(图片/表单)与文本垂直对齐

为行内块元素设置vertical-align属性

vertical-align: baseline | top | middle | bottom;

值	描述
baseline	基线
top	顶线
middle	中线
bottom	底线

图片和文字默认是基线对齐

图片底部空白缝隙

产生原因

因为图片默认和文字基线对齐，所以底部有缝隙

解决方案

设置vertical-align: bottom | middle | top;
把图片转换为块元素

溢出文字省略号显示

单行文字溢出

单行文本溢出省略显示的三个条件：

强制文本一行显示：white-space: nowrap; 默认normal自动换行
超出部分隐藏：overflow: hidden;
文字用省略号替代超出的部分：text-overflow: ellipsis;

多行文字溢出

多行文本溢出显示省略号，适用于 web-kit 内核，有较大的兼容性问题

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-wbekit-line-clamp: 2;
-webkit-box-orient: vertical;

常见布局技巧

margin 负值的应用

盒子细线边框(合并边框)：

margin-left: -边框宽度;，右边盒子压住左边盒子右边框
鼠标经过，边框变换颜色：
- 盒子没有定位，添加相对定位(不脱标)
- 盒子有定位：z-index: 9999

文字围绕浮动元素

利用浮动不会压住文字的特点，添加浮动之后，文字就会围绕浮动元素

行内块元素巧妙应用

页码布局的实现

利用行内块元素间自带的间隙
文字水平居中：text-align: center;
文字垂直居中：line-height: 行内块元素高度
所有的行内块元素与行内元素水平居中：给父元素text-align: center;

CSS 三角强化

非等腰三角的实现

等腰三角的实现：宽度高度为0的盒子
四条边框颜色不一样，除了直角边设置颜色，其他边设置为transparent
无关的边框设置为 0
短边对面的边框调整宽度

1
2
3
4
5
6
7
8


box {
  width: 0;
  height: 0;
  border-color: transparent red transparent transparent;
  border-style: solid;
  border-width: 22px 8px 0 0;
}
``

CSS 初始化

不同浏览器对于有些标签的默认值不一样，为了消除这个，需要对 CSS 进行初始化

 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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67


/* 清除元素默认内外边距 */
* {
  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, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
  color: #666
}

.hide,
.none {
  display: none
}

/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0
}

.clearfix {
  *zoom: 1
}