提示的收集,以帮助提升你的 CSS 技巧。
对于其他大名单退房 的策展的名单 .
选择器来决定表单是否显示边框
- :not()
来选择元素
- nth-child
来建立纯 CSS 的滑块
- max-height
来控制字体弹性
- :root
关于表单元素为更好的移动体验
- font-size
CSS 重置帮助实施用干净的石板为造型元素在不同的浏览器风格的一致性。您可以使用 CSS 复位库像 等,也可以使用一个更简化的复位方法:
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- }
现在的元素将被剥离利润率和填充和
,您可以管理与 CSS 盒模型布局。
- box-sizing
注意:如果按照尖下面你可能会选择不包含在你的 CSS 复位
财产。
- box-sizing
- box-sizing
从
元素继承
就好:
- box-sizing
- html {
- box - sizing: border - box;
- } * ,
- *:before,
- *:after {
- box - sizing: inherit;
- }
如此在插件或其它组件里改变
变得简单。
- box-sizing
选择器来决定表单是否显示边框
- :not()
与其加上边框……
- /* 添加边框 */
- .nav li {
- border-right: 1px solid #666;
- }
…… 然后去掉最后一个元素的边框……
- /* 去掉边框 */
- .nav li:last-child {
- border-right: none;
- }
…… 不如使用
伪类来达成同样的效果:
- :not()
- .nav li:not(:last-child) {
- border-right: 1px solid #666;
- }
当然,也可以使用
或者
- .nav li + li
来达成,但是
- .nav li:first-child ~ li
选择器的方式更清晰明了,一目了然。
- :not()
元素添加行高
- body
不必为每一个
,
- <p>
,等元素逐一添加
- <h*>
,为
- line-height
元素添加就好了:
- body
- body {
- line-height: 1.5;
- }
文本元素可以很自然地继承
的样式。
- body
这不是黑魔法,真的可以垂直居中任何元素:
- html, body {
- height: 100%;
- margin: 0;
- }
- body {
- -webkit-align-items: center;
- -ms-flex-align: center;
- align-items: center;
- display: -webkit-flex;
- display: flex;
- }
这还不够?垂直方向,水平方向…… 任何元素,任何时间,任何地方?CSS-Tricks 讲到了各种居中的技巧。
注意:IE11 对 flexbox 的支持 。
列表的每项都由逗号分隔:
- ul > li:not(:last-child)::after {
- content: ",";
- }
使用了
伪类,因此最后一项没加逗号。
- :not()
注意:这一技巧对于无障碍,屏幕阅读器而言并不理想,需要注意。
来选择元素
- nth-child
使用负的
可以选择 1 至 n 个元素。
- nth-child
- li {
- display: none;
- }
- /* 选择第 1 至第 3 个元素并显示出来 */
- li:nth-child(-n+3) {
- display: block;
- }
或许你已经掌握了,试下这个:
- /* 选择第 1 至第 3 个元素并显示出来 */
- li:not(:nth-child(-n+3)) {
- display: none;
- }
就是这么简单。
没有理由不使用 SVG 图标:
- .logo {
- background: url("logo.svg");
- }
SVG 在所有分辨率下都可以良好缩放,IE9+ 及其它所有浏览器都支持,丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。
注意:针对仅有图标的按钮,如果 SVG 没有加载成功的话,以下样式对无障碍有所帮助:
- .no-svg .icon-only:after {
- content: attr(aria-label);
- }
这个名字可能比较陌生,不过全局选择器 (
) 和 相邻兄弟选择器 (
- *
) 一起使用,效果非凡:
- +
- * + * {
- margin-top: 1.5em;
- }
在此示例中,遵循其他元素的文档流中的所有元素将都接收上边距
的样式。
- margin-top: 1.5em
更多 "形似猫头鹰" 的选择器,可参考 上面
来建立纯 CSS 的滑块
- max-height
与 overflow hidden 一起来建立纯 CSS 的滑块:
- max-height
- .slider {
- max-height: 200px;
- overflow-y: hidden;
- width: 300px;
- }
- .slider:hover {
- max-height: 600px;
- overflow-y: scroll;
- }
移入滑块元素时增大它的
的值,便可以显示溢出部分。
- max-height
可以让每个格子保持等宽:
- table-layout: fixed
- .calendar {
- table-layout: fixed;
- }
无痛的 table 布局。
与其使用
,
- nth-
, 和
- first-
去除列之间多余的间隙,不如使用 flexbox 的
- last-child
属性:
- space-between
- .list {
- display: flex;
- justify-content: space-between;
- }
- .list .person {
- flex-basis: 23%;
- }
列之间的间隙相等,并且首尾没有多余的间隙。
当
元素没有文本内容,但是有
- <a>
属性的时候,可以显示它的
- href
链接:
- href
- a[href^="http"]:empty::before {
- content: attr(href);
- }
相当简便。
给 "预设" 链接定义样式:
- a[href]:not([class]) {
- color: #008000;
- text-decoration: underline;
- }
通过 CMS 系统插入的链接,通常没有
属性,以上样式可以甄别它们,而且不会影响其它样式。
- class
通用选择器 (
) 跟元素一起使用,可以保持一致的垂直节奏:
- *
- .intro > * {
- margin-bottom: 1.25rem;
- }
一致的垂直节奏可以提供视觉美感,增强内容的可读性。
要创建具有内在比一个盒子,所有你需要做的就是应用顶部或底部填充,从一个 div:
- .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%的填充使得框等于其宽度的 20%的高度。不管视口的宽度,子元素的 div 将保持其宽高比(100%/ 20%= 5:1)。
只要一点 CSS 就可以美化破碎的图象:
- img {
- display: block;
- font - family: Helvetica,
- Arial,
- 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;
- }
了解更多关于这类样式的技巧 的 .
来调整全局大小;用
- 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;
- }
现在,每个模块变得条块分割,更容易、灵活的样式,以便于维护。
这是一个自定义的使用者样式表一个伟大的把戏。避免在加载页面时自动播放。如果没有静音,则不显示视频:
- video[autoplay]:not([muted]) {
- display: none;
- }
再次,我們趁著使用的偽類。
来控制字体弹性
- :root
在响应式布局的类型字体大小应能与每个视区进行调整。你可以计算的基础上视区高度的字体大小和宽度,使用
:
- :root
- :root {
- font-size: calc(1vw + 1vh + .5vmin);
- }
现在,您可以利用基于计算的值
单位:
- root em
:
- root
- body {
- font: 1rem/1.6 sans-serif;
- }
关于表单元素为更好的移动体验
- font-size
为了避免在 HTML 表单元素缩放移动浏览器(Safari 浏览器的 iOS, 。)当一个
下拉被窃听,加上
- <选择>
的选择规则:
- 字体size
- input[type="text"],
- input[type="number"],
- select,
- textarea {
- font-size: 16px;
- }
:dancer:
这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。
来源: