您现在的位置是：课程教程文章

CSS常用技巧的整理

2023-12-13 23:46课程教程文章人已围观

课程介绍: 1、 CSS常用技巧的整理课程推荐; 2、 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-repeatcenterright;
}
/*emails*/
a[href^="mailto:"]{
padding-right:20px;
background:url(email.png)no-repeatcenterright;
}

/*pdfs*/
a[href$=".pdf"]{
padding-right:20px;
background:url(pdf.png)no-repeatcenterright;
}

以上就是CSS常用技巧的整理，希望对大家有所帮助。更多css学习指路：css教程

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

课程教程：CSS常用技巧的整理