目录
一、精灵图
为减少服务器接收和发送请求次数,提高页面加载速度,出现css精灵技术(CSS Sprites、css雪碧)
核心原理:将网页中一些小背景图整合到一张大图中,使得服务器只需请求一次即可。
使用核心:
1、主要用于背景图,多个小背景图整合到一张大图,这个大图称为sprites 精灵图 雪碧图
2、移动背景图片位置用background-position,移动距离为目标图片的x、y坐标
3、一般都是往上往左移,所以数值是负值
4、要精确测量每个小背景图大小及位置
使用方法:
1、不要移动图片位置,切片工具框起来所需小图片,可得大小位置数据(ps可用矩形工具看属性)
2、建立和所需小图片一样大的盒子,加背景background:url(路径);
3、移动精灵图background-position:-180px 0;
【可连写background:url(路径) no-repeat -180px 0;】
二、css三角
1、常见
常见的小三角(一些弹窗盒子会多一个小三角)用css就可实现
原理:
.box1 {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid yellow;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
.box1 {
width: 0;
height: 0;
line-height: 0; /*为了提高兼容性,可以不需要*/
font-size: 0; /*为了提高兼容性,可以不需要*/
border: 10px solid transparent;
border-left: 10px solid green;
}
2、强化(实心三角)
直角三角形
调整边宽,该长的长该0的0
再改透明色,得到
.box2 {
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 20px 10px 0 0;
}
红盒子里要包一个i盒子做三角,子绝父相移位置
3、强化(线形三角)
写出两条边然后旋转。
div {
position: relative;
width: 250px;
height: 35px;
border: 1px solid black;
}
div::after {
content: "";
position: absolute;
top: 9px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
}
三、css用户界面样式
1、鼠标样式cursor
属性值
default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
2、取消表单轮廓线outline
给表单添加outline:0;或outline:none;,可去掉默认蓝色边框(点击输入,边框会变成蓝色)
3、防止拖拽文本域resize
为实现文本域右下角不可以拖拽用textarea{ resize: none;}
四、vertical-align属性
1、行内块和文字垂直居中对齐
用于设置图片或表单和文字垂直对齐,只针对行内元素或行内块元素有效
vertical-align :baseline / top / middle / bottom
属性值:
baseline 默认,元素放在父元素基线上(a的底端)
top 把元素顶端与行中最高元素的顶端对齐
middle 把此元素放在父元素中部
bottom 把元素顶端与行中最低元素的顶端对齐(j的底端)
2、解决图片底部默认空白缝隙问题
图片和基线对齐,不是底线,所以会有缝隙
解决方法(两种):
①给图片加vertical-align:bottom / top / middle;(推荐)
②把图片转化为块元素display:block;
五、溢出文字省略号显示
1、单行文本溢出显示省略号
white-space:nowrap; (强制一行内显示文本,不换行)
overfloe:hidden; (超出部分隐藏)
text-overflow:ellipsis; (文字用省略号替代超出部分)
2、多行文本溢出显示省略号
有较大兼容性问题,适合webKit浏览器或移动端(移动端大部分是webKit内核)一般交给后台人做
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;/*弹性伸缩盒子模型显示*/
-webkit-line-clamp:2;/*限制在一个块元素显示的文本的行数*/
-webkit-box-orient:vertical;/*设置或检索伸缩盒子的子元素的排列方式*/
六、布局技巧
1、margin负值运用
避免出现以上情况,想实现以下情况
只需让每个盒子margin:-1px;左移即可盖住相邻盒子边框
为解决以下情况:
鼠标经过某个盒子时,提高当前盒子层级即可(没定位就加相对定位,保留位置;有定位就加z-index)
2、文字围绕浮动元素
浮动元素不会压住文字
类似该效果,只需图片向左浮动即可
3、行内块应用
用行内块做,行内块本身有大小有距离,给父级使用text-align里面的行内、行内块也会居中
display:inline-block;
text-align:center;