摘要:本篇教程探讨了常用CSS3技巧,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了常用CSS3技巧,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"> html,body{ -webkit-touch-callout: none; //禁止或显示系统默认菜单
-webkit-user-select: none; //禁止长按复制选择
-webkit-tap-highlight-color: rgba(0,0,0,0);//禁止触摸a标签高亮 这个特别实用 }</pre>
2.行级,块级元素居中显示
以前我们要将文字居中显示的做法是 text-align: center; line-height:x;
如果父级元素的高度是未知的呢 line-height就不好确定了,下面三行代码为你搞定 应为不再考虑父级元素的宽度了
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">section{ //父元素
display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;
}</pre>
3.禁止换行 多余省略号
html结构:
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><div> 看!我只显示一行,多余的用省略号表示哟 </div> </pre>
css:
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.world{ display:block; //如果是块儿级元素可以不用加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}</pre>
4.禁止换行高能升级
如果需求是让文字显示两行多余用省略号显示呢?
来个大招
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.world{ font-size:2.4rem; line-height:130%; height: 7.0rem; line-height: 130%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //显示的行数
-webkit-box-orient: vertical;
}</pre>
[
复制代码
](javascript:void(0); "复制代码")
5.用百分比控制line-height;
移动端应尽量少使用px,用百分比控制更精确
line-height:100%;//两行文字之间无空隙
使用:当拿到设计PSD时 我们先看字号是多少,比如24px; 文字的间距,比如10px; 那么line-height=100%+(10/24)*100%; 这样的行间距是最精确的并且响应各种设备
6.使用flex取代float
html 结构
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></pre>
css
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">ul{ display: -webkit-box; display: box; display: -webkit-flex; display: flex; display: -webkit-flex-box; display:flex-box;
} li{ -webkt-flex:1; flex:1; -webkit-box-flex:1; box-flex:1;
}</pre>
[
复制代码
](javascript:void(0); "复制代码")
7.文字上划斜线
我们知道在文字上划横线是 text-decoration: line-through;但是默认没有划斜线的属性,这个常用于电商网站比如将原价用斜线划掉
这里我们用到before
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.diagonal:before{ position: absolute; content: ""; left: 0; top: 42%; right: -10%; border-top: 2px solid; border-color: #333; transform: rotate(8deg); -webkit-transform: rotate(8deg);
}</pre>
[
复制代码
](javascript:void(0); "复制代码")
8.字体大小使用vw
字号的使用变迁 px->em->rem->vw
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">前三种都不能到达响应的效果
vw是根据设备屏幕的百分比设置
比如
.a{ font-size:10vw;//大小为屏幕宽度的百分之十 当然很少有设这么大的字 } 因为vw设置的字体大小是根据屏幕大小改变而改变 所以在大屏幕上显示会变大 根据可根据 需求使用</pre>
[
复制代码
](javascript:void(0); "复制代码")
9.画1px的细线
html:
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><div></div></pre>
css
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.border1px{ position: relative;} .border1px:after{ content:""; position: absolute; bottom:0px; left:0px; right:0px; border-bottom:1px solid red; border-left:1px solid red; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0;
}</pre>
[
复制代码
](javascript:void(0); "复制代码")
10.display:inline-block 间隙去除
[
复制代码
](javascript:void(0); "复制代码")
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.wrapper{
font-size:0
}</pre>
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">.inlineblock{
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
} <div>
<div></div>
</div></pre>
一像素边框 需要考虑 两倍屏 和三倍屏的不同
@media screen and (-webkit-min-device-pixel-ratio : 2){
.border1px:after{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio : 3){
.border1px:after{
-webkit-transform: scaleY(0.3333);
transform: scaleY(0.3333);
}
}
[
复制代码
](javascript:void(0); "复制代码")
本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号