css你所不知道技巧

利用属性选择器来选择空链接

当 <a> 元素没有文本内容，但有 href 属性的时候，显示它的 href 属性：

a[href^="http"]:empty::before {content: attr(href);
}

创造格子等宽的表格

table-layout: fixed 可以让每个格子保持等宽：

table {border: 1px solid #ccc;border-collapse: collapse;table-layout: fixed;width: 100%;
}

使用 `max-height` 来建立纯 CSS 的滑块

max-height 与 overflow hidden 一起来建立纯 CSS 的滑块：

.slider {max-height: 200px;overflow-y: hidden;width: 300px;
}.slider:hover {max-height: 600px;overflow-y: scroll;
}

逗号分隔列表

使列表的每项都由逗号分隔：

ul > li:not(:last-child)::after {content: ",";
}

给 “默认” 链接定义样式

给 “默认” 链接定义样式：

a[href]:not([class]) {color: #008000;text-decoration: underline;
}

通过 CMS 系统插入的链接，通常没有 class 属性，以上样式可以甄别它们，而且不会影响其它样式。

使用选择器`:root`来控制字体弹性

在响应式布局中，字体大小应需要根据不同的视口进行调整。你可以计算字体大小根据视口高度的字体大小和宽度，这时需要用到:root:

:root {font-size: calc(1vw + 1vh + .5vmin);
}

现在，您可以使用 root em

body {font: 1rem/1.6 sans-serif;
}

转载于:https://www.cnblogs.com/chengjunL/p/6377865.html

css你所不知道技巧相关推荐

第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用图片鼠标放上去遮罩效果,显示文字当鼠标放上去时 /*最外层div*/ .a{width: 384px;height: 240px;backgrou ...
[css] 你所理解的css高级技巧有哪些？
[css] 你所理解的css高级技巧有哪些? 各种动画效果,能用css的都可以不去用js写的,对我来说就很高级个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
css揭秘实战技巧 - 形状 [二]
全目录本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果: css揭秘实战技巧- 背景与边框 [一] css揭秘实战技巧- 形状 [二] css ...
十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）...
大家好,我是漫步,今天来分享一些比较高级复杂的CSS技巧,都是我们平常常用的,或许对你有所帮助. 设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时 ...
css揭秘实战技巧- 背景与边框 [一]
前言这段时间,一直觉得css这块感觉每次写代码都是常用的那些基本属性,觉得始终没有对css有一个更深层次的掌握,所以,最近开始学习css相关进阶知识,首先第一关就是攻克 "css揭秘&qu ...
十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）
设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时设置方位情况相邻兄弟选择器之常用场景 outline属性的妙用技巧隐藏滚动条或更改滚动条样式纯 ...
html怎么设置浮动,CSS浮动使用技巧
这次给大家带来CSS浮动使用技巧,CSS浮动使用的注意事项有哪些,下面就是实战案例,一起来看一下. 浮动具有以下特性:盖不住的文本浮动元素后面不是块级元素,后面的元素将会和它并排(除非设置了元素的宽 ...
css 实现一个尖角_一个讲述了 CSS 相关的技巧、动画实现的开源项目(60篇相关文章)...
iCSS 不止于 CSS 文章围绕 CSS/web动画展开,谈一些有趣的话题,内容天马行空,想到什么说什么,不仅是为了拓宽解决问题的思路,更涉及一些容易忽视或是十分有趣的 CSS 细节. Artic ...
HTML + CSS 的一些技巧（萌新来看！）
马上要学习PythonWeb,所以复习了一下以前的前端内容,又有了新的感悟,于是总结了一下写静态页面的技巧! 1. Html 代码在写Html代码的时候一定要分块写,把内容分成一块一块的例如这样: ...

css你所不知道技巧

利用属性选择器来选择空链接

创造格子等宽的表格

使用 `max-height` 来建立纯 CSS 的滑块

逗号分隔列表

给 “默认” 链接定义样式

使用选择器`:root`来控制字体弹性

css你所不知道技巧相关推荐

最新文章

热门文章

css你所不知道技巧

利用属性选择器来选择空链接

创造格子等宽的表格

使用 max-height 来建立纯 CSS 的滑块

逗号分隔列表

给 “默认” 链接定义样式

使用选择器:root来控制字体弹性

css你所不知道技巧相关推荐

最新文章

热门文章

使用 `max-height` 来建立纯 CSS 的滑块

使用选择器`:root`来控制字体弹性