CSS总结（6）

CSS总结（6）

一、CSS高级技巧

1、精灵图sprites（CSS精灵技术）

• 核心原理：将网页中一些小背景图像整合到一张大图当中，再在网页当中设置几个盒子来展现出来，这样服务器只需要一次请求就可以了
• 使用精灵图的核心：
精灵技术主要针对于背景图片使用，这个大图片也称为sprites精灵图或者雪碧图
移动背景图片位置，此时用 background-position
在网页当中，向右为x轴、向下为y轴，越往右越往下越大
一般情况下精灵图都是负值

2、字体图标iconfont

• 字体图标主要用于显示网页当中通用、常用的一些小图标，展示的是图标，本质属于字体
• 字体图标的引入：
字体图标下载完成后，将fonts文件夹放入页面根目录下
在CSS样式中全局声明字体（文件夹里面会有一个style.css文件复制一份就行）
最后复制 demo.html 里面的小方框或者 “\字体图标代码” 放到 html 里面去就完成了（注意要先声明字体样式为icomoon）
• 字体图标的追加：
将压缩包里面的 selection.json 重新上传，然后选中自己想要新的图标，重新下载压缩包，并替换原来的文件即可

3、精灵图和字体图标的使用场景

• 如果遇到一些结构和样式比较简单的小图标，就用字体图标
• 如果遇到一些结构和样式复杂一点的小图片，就用精灵图

4、CSS三角

• 网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标
• 用法：
设置宽度与高度均为0，行高与字体大小也均为0，再设置边框即可做出三角形

5、CSS用户界面样式

• 更改用户的鼠标样式（cursor），设置或检索在对象上移动的鼠标指针采用何种光标形状
语法： 选择器 { cursor：属性值；}
常用属性值：default 小白默认、pointer 小手、move 移动、text 文本、not-allowed 禁止
• 表单轮廓
轮廓线 outline，给表单元素添加 outline：0；或者outline：none；样式就可以去掉点击表单时默认的蓝色边框
语法：
• 防止表单域拖拽
防止拖拽文本域，实际开发当中，我们文本域右下角是不可以拖拽的
语法：
textarea { resize：none；}

6、vertical-align属性应用

• 开发中，经常使用 vertical-align 属性设置图片或者表单（行内块元素）和文字垂直对齐
• 语法：
vertical-align：baseline / top / middle / bottom；（写在文字前面的图片样式里面）
baseline为默认，元素放置在父元素的基线上
top为把元素的顶端与行中最高元素的顶端对齐
middle为把元素放置在父元素的中部
bottom为把元素的顶端与行中最低的元素的顶端对齐
• 解决图片底部默认空白缝隙问题：
实际中有一个bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐，解决方法如下：
给图片添加 vertical-align：middle/top/bottom 等（提倡使用的）
或者把图片转换为块级元素（不太提倡）

7、溢出的文字省略号显示

• 单行文本溢出显示省略号
做法：
先强制一行内显示文本：white-space：nowrap；（normal为自动换行，是默认的）
再将超出的部分隐藏：overflow：hidden；
最后用省略号代替超出的部分：text-overflow：ellipsis；
• 多行文本溢出显示省略号（兼容性较差，一般适用移动端）
做法（下面几行代码写上去）：
overflow：hidden；
text-overflow：ellipsis；
弹性伸缩盒子模型显示：display：-webkit-box；
限制在一个块元素显示的文本的行数：-webkit-line-clamp：2；
设置或检索伸缩盒对象的子元素的排列方式：-webkit-box-orient：vertical；
• 最好让后台人员来做这个多行文本溢出省略号的效果，才没有兼容问题

二、常见网页布局小技巧

1、margin负值的巧妙运用

• 一行排列着的浮动盒子会有边框的重合问题，加一个 margin-left：负边框像素值； 令其压住相邻盒子的边框，可以巧妙化解
• 用以上的方法会出现一个问题，就是想要设置鼠标经过盒子的边框样式时，会有一边被遮住而无法显示，解决方法如下：
盒子如果有设置定位，则加 z-index；（常用这种方法）
盒子如果没有设置定位，则加相对定位保留位置

2、文字围绕浮动元素的运用技巧

• 该技巧巧妙运用浮动元素不会压住文字的特性
• 这样就可以直接写入文本，然后插入浮动的盒子，让文本环绕着盒子

3、行内块的巧妙运用

• 添加了 text-align 属性的元素，里面的行内元素与行内块元素都会水平居中对齐
• 行内块元素相邻之间有个小缝隙

4、CSS三角强化运用

• 想要一个不等腰直角三角形，先把 border-bottom 改为0px，再把 border-top 像素值调大（可以把左或右的也改为0px，也可以设为透明）
• 代码举例：
border-color：transparent red transparent transparent（只保留右边的边框有颜色）
border-style：solid（样式都为solid）
border-width：100px 50px 0 0（上边框宽度要大，右边框宽度略小，其余边框为0）
• i 标签是专门用来做这种三角样式的

三、CSS初始化（CSS reset）（重要）

• 不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS进行初始化。每个网页都必须首先进行CSS初始化。
• 常用CSS初始化代码（京东的CSS初始化）：

* {
	margin: 0;
	padding: 0;
}
em,i {
	font-style: normal;
}
li {
	list-style: none;
}
img {
	/*border: 0照顾低版本浏览器*/
	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;
}
.clearfix:after {
	visibility: hidden;
	clear: both;
	display: block;
	content: ".";
	height: 0;
}
.clearfix {
	*zoom:1;
}