CSS使用高级技巧合集(五)
- 原创经验
- |
- 更新：
- |
想要成为一名软件工程师，对于一些程序语言一定要全面进行了解和掌握，比如基础的代码、CSS样式、数据库等等，这些都是电脑软件工程师需要掌握的基本技能，今天要给大家介绍的是CSS使用高级技巧，下面我们就一起来看看吧。
具体内容
-
一致垂直节奏
通用选择器 (*) 跟元素一起使用，可以保持一致的垂直节奏：
.intro > * {
margin-bottom: 1.25rem;*
}
一致的垂直节奏可以提供视觉美感，增强内容的可读性。
-
用 rem 来调整全局大小;用 em 来调整局部大小
在根元素设置基本字体大小后 (html { font-size: 100%; }), 使用 em 设置文本元素的字体大小:
h2 {
font-size: 2em;*
}
p {
font-size: 1em;*
}
然后设置模块的字体大小为 rem:
article {
font-size: 1.25rem;*
}
aside .module {*
font-size: .9rem;*
}
现在，每个模块变得独立，更容易、灵活的样式便于维护。
-
为破碎图象定义样式
只要一点CSS就可以美化破碎的图象：
img {
display: block;*
font-family: sans-serif;*
font-weight: 300;*
height: auto;*
line-height: 2;*
position: relative;*
text-align: center;*
width: 100%;*
}
以添加伪元素的法则来显示用户信息和URL的引用：
img::before {
content: "We're sorry, the image below is broken :(";*
display: block;*
margin-bottom: 10px;*
}
img::after {
content: "(url: " attr(src) ")";*
display: block;*
font-size: 12px;*
}
-
固定比例盒子
要创建具有固定比例的一个盒子，所有你需要做的就是给 div 设置一个 padding：
.container {
height: 0;*
padding-bottom: 20%;*
position: relative;*
}
.container div {
border: 2px dashed #ddd;*
height: 100%;*
left: 0;*
position: absolute;*
top: 0;*
width: 100%;*
}
使用20%的padding-bottom使得框等于其宽度的20%的高度。与视口宽度无关，子元素的div将保持其宽高比(100%/ 20%= 5:1)。
注意事项
-
在这里要提醒大家，支持以上这些技巧的情况，都适用于最新版的 Chrome, Firefox, Safari, Opera,Edge, 以及 IE11，作为一名大学生，如果想要从事软件行业，想要成为优秀的软件工程师，那就把以上的CSS使用高级技巧学起来吧。
