【说站】CSS常用技巧的整理
CSS 技巧 常用 整理
2023-06-13 09:13:21 时间
CSS常用技巧的整理
1、垂直对齐,利用CSS3的Transform。
如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:
.verticalcenter{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
使用这个技巧,从单行文本、段落到box,都会垂直对齐。目前浏览器对Transform的支持是需要关注的,Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均支持该属性
2、伸展一个元素到窗口高度在具体场景中。
你可能想要将一个元素伸展到窗口高度,基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度,我们需要伸展顶层元素:html和body:html,
body {
height: 100%;
}
然后将100%应用到任何元素的高
div {
height: 100%;
}
3、基于文件格式使用不同的样式。
为了更容易知道链接的目标,有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标,对不同的资源使用不同的图标或图片:
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
以上就是CSS常用技巧的整理,希望对大家有所帮助。
相关文章
- pycharm的背景颜色设置_css中设置背景颜色
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- 分享14 个非常实用的CSS技巧
- CSS Gradient
- CSS新特性的知识
- css使用自定义字体教程
- CSS高级技巧
- CSS 和 JS 合并压缩工具 Minify 及其 WordPress 插件
- HTML&CSS精选笔记_表格与表单详解编程语言
- 学习Html、css和Javascript中的常用标签英文缩写笔记(可供同学们参考)详解编程语言
- The Shapes of CSS(css的形状)详解编程语言
- CSS与MySQL合力提升网页性能(css与mysql结合)
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- CSS经典技巧十则第1/2页
- css技巧十条
- 单纯使用CSS实现动态提示信息
- css实现兼容各个浏览器的技巧的代码
- CSS注释、命名、继承性、样式排序等CSS技巧的小结
- CSS规则层叠的应用css必须要注意的几点
- 使css兼容IE8的小技巧
- juqery学习之六CSS--css、位置、宽高