精灵图
- 使用精灵图的目的
- 一次加载完成所有图片,减少服务器接收和发送请求的次数,提高页面的加载速度
- 使用方法:background-position
字体图标
使用方法:
- 官网(icomoon.io)下载字体包
- 将fonts文件解压至根目录下
- 引入@font-face 样式
- 在demo.html中复制相应字
- 在样式内引入字体,与上面font-face一致
代码:
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?3a2xdr');
src: url('../fonts/icomoon.eot?3a2xdr#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?3a2xdr') format('truetype'),
url('../fonts/icomoon.woff?3a2xdr') format('woff'),
url('../fonts/icomoon.svg?3a2xdr#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
CSS制作三角图标
制作方法:
-
将全部边框颜色设成透明,设定所有边框都有高度
-
指定某个边框有颜色
border-width: 100px;
border-color: transparent transparent transparent red;
CSS用户界面样式
- 鼠标样式属性cursor
- 轮廓线属性outline
- 防止拖曳文本域属性resize
vertical-align属性
元素对齐的四要素
元素由顶线、中线、基线和底线标定,顶线与底线的距离加上上下间距等于行高
- 用于设置图片或者表单(行内块元素和行内元素)和文字垂直对齐
- vertical-aligncenter;可设置行内元素垂直居中
- vertical-align:top;可消除图片底部的空白缝隙(display:block也有同样的效果)
代码验证:
代码:(除了基线对齐,其余都可取消空隙)
div {
border:1px solid red;
width: 300px;
background-color: blue;
}
.one {
/*默认的是基线对齐*/
vertical-align: baseline;
}
.two {
/*让图片的中线 对齐 文字的中线 垂直居中*/
vertical-align: middle;
}
.three {
/*让图片的顶线 对齐 文字的顶线 顶部对齐*/
vertical-align: top;
}
CSS常见的布局技巧
- margin负值使用
让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框,使盒子间紧密贴合,没有缝隙
鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index) - 文字围绕浮动元素
- 行内块性质的使用
- 底部页码在页面中间显示:
- 把这些链接盒子转换为行内块,并且给父级添加 text-align:center; 行内块元素会水平会居中
- CSS三角高级
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
将border-width设置可以添加非等腰直角三角形效果
CSS3新增伪元素选择器
- ::before ::after
- 基本原理:在基础元素的前后创建一个虚拟的伪元素(在文档结构中找不到)
- 必须要有content:""属性
- 可以借此理解清除浮动的语法:
.clearfix:before,.clearfix:after {
content:"";
display:table;
}.clearfix:after {
clear:both; }
CSS3新增box-sizing属性
- box-sizing:content-box;border-box;
- content-box=width+padding+border
- border-box=width
CSS3新增过渡属性
- transition: 要过渡的属性 花费时间 运动曲线 何时开始;