Home >Web Front-end >HTML Tutorial >CSS3实战之一些常用Tips_html/css_WEB-ITnose

CSS3实战之一些常用Tips_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:05:331343browse

本文为部分翻译文章,主要内容来自于:css-protips,笔者自身也添加了一些自己的小的Tips。

使用: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;}
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn