摘要:本篇HTML5教程探讨了CSS3实战Tips,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
使用:not()属性为导航添加或者去除边框
传统的方法是首先为每个li标签添加标签:
/* add border */.nav li {
border-right: 1px solid #666;
}
然后用last-child伪属性作用于最后一个元素上:
/* remove border */.nav li:last-child {
border-right: none;
}
代替的方法应该是使用not伪类去设置仅作用于部分元素的属性:
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
为body添加line-height属性
往往需要为p、h*这类标签单独的添加行高属性等,作为替代的是可以将它添加到body属性中,即:
body {
line-height: 1;
}
通过这种方式文本类的元素可以自动继承该属性。
设置自动居中
任何一个元素的自动居中可以使用flex属性:
html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
使用逗号分割列表
ul > li:not(:last-child)::after {
content: ",";
}
使用负的nth-child属性选择元素
li { display: none; } /* select items 1 through 3 and display them */li:nth-child(-n+3) { display: block; }
使用SVG作为Icon
.logo {
background: url("logo.svg");
}
使用SVG作为图标可以达到自动缩放的效果。
文本显示的优化
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
使用max-height在单纯的CSS滑块上
.slider ul { max-height: 0; overlow: hidden; } .slider:hover ul { max-height: 1000px; transition: .3s ease; /* animate to max-height */ }
继承box-sizing属性
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
设置Table元素等宽
.calendar {
table-layout: fixed;
}
使用Flexbox作为Margin Hacks
.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; }
为空的Links添加默认内容
a[href^="http"]:empty::before {
content: attr(href);
}
防止iOS设备上的元素不可点击
在iOS设备中,有时候Click事件会失效,需要设置一个专门的cursor属性:
cursor:pointer
不过需要注意的是,这个属性不可设置在Android设备上,如果设置在Android设备上,点击的时候会出现一片蓝色的背景。
防止iOS设备上输入失焦
在iOS设备中,有时候如果弹出了键盘会导致输入框失焦,即键盘上的内容无法显示在输入框内,需要进行以下覆盖:
* {
-webkit-user-select: none; /* prevent copy paste */
}
变为
input[type="text"] { -webkit-user-select: text; }
本文由职坐标整理发布,学习更多的HTML5/CSS3相关知识,请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号