1 伪类选择器
1.1 :empty 选择内容为空的元素。:not(:empty) 不为空的元素。
举个栗子：
<body>
<div class="Alert">
<p>Success! Your profile has been updated.</p>
</div>
<div class="Alert">
</div>
</body>
.Alert {
border: 3px solid darkgreen;
margin: 1em;
padding: 1em;
background-color: seagreen;
color: white;
border-radius: 4px;
}
Screen Shot 2017-04-03 at 12.15.04 PM.png
如果想让空的alert隐藏可以：
.Alert:empty {
display: none;
}
但更简单的方法是：
.Alert:not(:empty) {
border: 3px solid darkgreen;
margin: 1em;
padding: 1em;
background-color: seagreen;
color: white;
border-radius: 4px;
}
这样的嵌套式使用伪类选择器的例子还有很多
比如:not(:last-child),:not(:first-child)。
1.2 选择同类元素中的第一个/第n个/唯一一个等。也非常实用。
first-of-type
last-of-type
only-of-type
nth-of-type(odd)
nth-of-type(even)
nth-of-type(3)
nth-of-type(4n+3)
2.calc()实现响应式设计
比如一个这样结构的网页，包含nav，main，aside三部分。
Screen Shot 2017-04-03 at 1.19.38 PM.png
nav {
position: fixed;
top: 0;
left: 0;
width: 5rem;
height: 100%;
}
aside {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 20rem;
}
当屏幕尺寸变化的时候，希望保持当前的布局，让中间的content随之变化，只需要一行css就能实现了。
main {
margin-left: 5rem;
width: calc(100% - 25rem);
}
如下图gif动图展示效果：
responsivecontent.gif
再加上一些media query，就是一个完整的针对移动设备和pc的响应式css。
3.用vh，vw规定元素大小
经常被使用到的单位是px，em，rem
你有没有用过更简单的vh，vw呢，这两个单位是相对于当前viewport的百分比。可以很简单的控制元素在viewport中的相对位置：
.Box {
height: 40vh;
width: 50vw;
margin: 30vh 25vw;
}
只需要这一点点css就能让box这个元素不论viewport size如何变化都保持永远居中。因为height+marginTop+ marginBottom = 100vh, width+marginLeft+marginRight = 100vw。
alwaycenter.gif
用这样的方法很简单就能写出一个整页page上下滑的网页效果：
ezgif.com-resize.gif
没有用到任何js,非常简单的css，如下：
section {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
如果觉得有用，请给我点个赞吧(ง •̀_•́)ง!
网友评论