front-end CSS (8) CSS高级技巧

最新推荐文章于 2024-03-10 14:43:45 发布

Light touch

最新推荐文章于 2024-03-10 14:43:45 发布

阅读量118

点赞数

分类专栏： front-end 文章标签： css 前端

本文链接：https://blog.csdn.net/hualuhualu/article/details/122505507

版权

front-end 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

精灵图

为什么需要精灵图？
浏览器需要发送请求给服务器，如果图片很多，那么就请求很多次，占用带宽，给服务器增加压力。
为了减少服务器接受和发送请求的次数，提高页面的加载速度，出现了精灵图（CSS sprites）。

什么是精灵图？
把网页中的小图片整合到一张大图片上，只需要向服务器请求一次即可。
核心：主要针对小图标，小背景图片

怎么使用精灵图？

位置是相对于本身盒子的位置。
一般都是往上，往左走，所以都是负数。
需要精确测量每个小元素的位置。

background-position: -10px 0px;
水平-10
垂直0

字体图标

如果想给某个小图标换个颜色，需要返回给设计人员重新上色，非常麻烦。
字体图标出现解决了这个麻烦：看起来是图片，其实是文字。
但是并非完全替换了精灵图。

iconfont的优点：

轻量级：属于文字，不需要去服务器端请求
容易更改颜色，大小，添加阴影等效果
兼容性好，几乎支持所有的浏览器

总结：

结构简单，现成的----iconfont
复杂的，个性化的----精灵图

使用方法：

1.直接从网上下载

推荐网站1：https://icomoon.io/【国外的，第一个推出自定义iconfont生成器】
推荐网站2：阿里iconfont字体库

2.打开压缩包并放置

里面有个fonts的文件夹，里面有4个文件。把fonts文件夹放到合适的目录下。
另外，最好备份下这个fonts文件夹。
在这里插入图片描述

3.在页面中引用字体图标
打开压缩包里的style.css文件，复制下面这段代码：
这段代码是字体声明。

把这段代码粘贴到style标签里。
特别注意URL（）里面的文件路径是否正确。

4.在HTML里使用字体图标
点击压缩包里的Demo.html，可以看到所有的图标：
在这里插入图片描述
把这个方框一样的图标复制，放到span里，然后在span中设置font-family即可。

<style>
span {
		font-family: 'iconmoon';
		font-size:20px;
		color: pink;
	}
</style>
<span>口</span>

字体图标的追加

添加新的字体图标到原来的文件夹中
1.点击icomoon网站上的import icons按钮
打开原来的压缩包里的selection.json文件，点击yes

2.新加想要的按钮，然后generate font，接着下载最新的压缩包
然后用最新压缩包里的fonts文件夹替换老的文件夹即可。

CSS三角做法

原理：宽高设置为0，而边框设置为较大数值。
使用以下代码可以获得一个三角形：

width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: pink;

CSS更改鼠标样式

li {
cursor: default | pointer | move | text | not-allowed
}

在这里插入图片描述

CSS 表单轮廓线

取消表单type:text的外边高亮效果：

input {
	outline: none;
}

文本域禁止拖拽：

textarea {
	resize: none;
	outline: none;
}
为了不让文本框中出现空白区域，最好让开始和结束标签放在一行：
<textarea></textarea>

vertical-align

设置图片，行内块元素和文字的垂直对齐，实现类似如下的效果：
这个属性只针对行内和行内块元素。
注意：img,input,textarea都是行内块元素。
在这里插入图片描述

常用的是以下这行：

vertical-align: middle;

CSS解决图片底部空白缝隙

原因是图片是默认和文字的基线对齐，所以会留出一部分空隙。
在这里插入图片描述
解决办法有2种：

给图片添加下面代码，只要不是baseline皆可【推荐】

vertical-align: bottom | top |middle;

把图片转换为块元素

display: block;

CSS 溢出的文字用省略号显示

单行文本溢出显示省略号

// 一行内显示全部文字，不换行
white-space: nowrap;
normal是默认的自动换行
// 超出的部分隐藏
overflow: hidden;
// 用省略号代替多余的文字
text-overflow: ellipsis;

多行文本溢出显示省略号

有较大兼容问题，适合移动端或者webkit浏览器。
更推荐后台人员来实现这个效果，因为他们可以设置显示多少个字，操作更简单。

overflow: hidden;
text-overflow: ellipsis;

//以下3行必须有：
display: -webkit-box;//弹性伸缩盒子
-webkit-line-clamp: 2;//只显示2行文字
-webkit-box-orient: vertical;//子元素是垂直显示

margin-left实现子元素并排的边框

.child {
    height: 100px;
    width: 100px;
    background-color: lightgreen;
    border: 5px solid green;
    list-style: none;
    float: left;
    margin-left: -5px;
}
.child:hover {
//如果没有定位，鼠标经过添加相对定位。如果有定位，则需要增加z-index: 1;
    position: relative;
    border: 5px solid lightyellow;  
}

在这里插入图片描述

li标签

list-style: none;//去除前面的小点
ul, li {//去除空白
	margin: 0;
	padding: 0;
}

文字围绕图片效果

在这里插入图片描述
给图片添加浮动即可。字体直接包裹在p标签中。

<div class="module">
	<img src="" alt=""/>
	<p></p>
</div>
img {
	float: left;
	width: 100px;
	height: 100px;
	margin-left: 10px;
	}

行内块实现底部页码效果

快速输入alt+shift+鼠标下滑
在这里插入图片描述

文字在a标签中的垂直居中

text-align: center;
line-height: =box-height px;

巧妙利用CSS三角

在这里插入图片描述

CSS初始化【CSS Reset】

不同的浏览器对标签默认的值是不一样的，为了消除这些差异，所以对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: #000;
	text-decoration: none;
}
body {
	background-color: #fff;
	font: 12px/1.5 "Arial";
	color: #000;
	-webkit-font-smoothing: antialiased;// 处理文字放大后出现锯齿的问题	
}
.clearfix:after {
	visibility: hidden;
	clear: both;
	display: block;
	content: ".";
	height: 0;
}
.clearfix {
	*zoom: 1;	
}