CSS新特性

特别声明:开通VIP通道,年费价格为 ¥199.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

前段时间有个关于CSS的话题“既然写CSS很容易,那为什么大家还是把CSS写的那么烂呢”?其实这样的话题一直都存在。不过这里我要说的不是能不能写好CSS,我想和大家一起分享几个CSS的新特性。这个也是上周在天津在线回声公司分享的一个话题。整理一下有关于PPT中的内容,希望对大家有所帮助。

CSS新特性

点击这里,可以下载PPT,不过自备天梯。

聊CSS新特性现状

印象中,每次聊到CSS的新特性,大家都比较会排斥,觉得这些新属性对于大家平时的工作没有任何的帮助,因为都不知道这些属性什么时候才能被浏览器支持。其实我想说的是,这是一个误区,也是自己给自己找借口的一种声音。

早在2010年的时候,说到CSS3,国内类似的声音非常的多,了解和学习CSS3有卵用,一句话“然并卵”。但是不到两年时间,很多人都觉得自己没有早点学习这方面的CSS属性。为什么变化会这么快呢?技术就是如此,当有新东西出来之时,你没有一定的预知感,没有一定的好奇感,没有一定的尝试心,那么注定你将跟着人家的屁股后面追赶,而且追的好累,还不一定能追上。

其实开篇不想说这么多的废话,只想告诉大家,应该不断的去学习新的东西,哪怕现在使用不上,但总有一天你的所学会被用上。开始今天的话题之前,先告诉大家,文章中提到的用例,建议您采用最新版本的Chrome浏览器浏览。

要聊的CSS新特性

对于前端而言,最深的体会就是“贵圈真乱”。不停的在变,而且变得很快。其实对于技术而言,他将一直是会向前发展的,所以做为前端的我们需要保持一颗热爱学习的心态。下面我们要聊的CSS新特性主要有:

CSS新特性

CSS Box Alignment

CSS Box Alignment主要是用来控制元素在容器中对齐方式的模块。众说周知,控制元素在容器中的对齐方式是件特别痛苦的事情,比如水平方向的两端对齐,垂直方向的垂直居中

拿一个垂直居中的来说,自从有了Flexbox模块相对而言,实现一个垂直居中效果并不是件难事,比如下面的这个示例:

简单的两句代码就让图片在容器中水平垂直居中了:

.box {
    display:flex;
    align-items: center;
    justify-content: center;
}

实现思路就不多说了,感兴趣的可以先了解Flexbox。这里要说的是align-itemsjustify-content属性。大家常看到这两个属性配合flex一起使用,能帮助我们很好的实现各种对齐方式。或许你和我一样认为这些属性是属于Flexbox属性之一。今天我要告诉大家的是,这些属性是属于CSS Box Alignment模块的,至少现在是。在CSS Box Alignment模块中提供了六个属性,用来控制元素在水平和垂直方向的对齐方式:

上面示例看到的是这些属性运用在Flex容器,其实除了应用在大家常见的Flex容器上之外,还可以运用在块容器(Block container)多列容器(Multicol Container)网格容器(Grid Container)。比如下面的这个示例,就是结合CSS的Grid模块一起使用的:

上面示例,第一个li使用的是默认对齐方式,第二个至第四个,都通过align-self做了重置:

.wrapper li:nth-child(2) {
  align-self: center;
}
.wrapper li:nth-child(3) {
  align-self: start;
}
.wrapper li:nth-child(4) {
  align-self: end;
}

CSS Grid Layout

CSS Grid Layout指的不是以前大家熟悉的Grid系统(栅格系统),它是CSS的一个有关于布局的新模块(CSS Grid Layout M

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-future.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部