欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
跟程序员小强一起学前端
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
这一篇呢,我们来说说CSS3一些高级有趣的属性,帮助我们更好的,更高效的去开发我们的页面,不仅在效率上提高很多,而且页面效果上更炫酷,下面一起来看看吧。
CSS3多列属性有很多,我们一一来介绍一下,包括以下几个属性:
1、CSS3创建多列
column-count属性指定了需要分割的列数,就是说你想要让你的文本显示多少列,我们不需要写很多个div,然后去限制字数,分别在每个div里调用多少字,还需要让div浮动,麻烦滴很啊,这是用CSS3多列我们自己就可以达到这样的需求。如图所示:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
效果如下:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
这样一来,我们就可以将文本分成3列显示,超出的文本自动隐藏,我们在写响应式页面的时候就可以用到它哦!
2、CSS3 多列中列与列间的间隙
调整多列中列与列间的间隙的时候我们就可以用column-gap,它就指定了列与列间的间隙,我们再也不需要专门给div设定浮动,还要设置它们之间的margin,有了它就可以像Swiper那样一个属性,轻轻松松设置间距,效果如上图那样,分成三列,并设置间距。代码如下:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
3、CSS3 列边框
还有更好玩的多列属性。上面我们设置完了列与列的间距,这呢我们用column-rule-style属性来设置列与列之间的边框样式,我们不再用图片或者更多的CSS去写,它就可以了,例如:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
这样我们就可以将文本分成3列,间距40px,列边框的样式为虚线,此外,我们还设定边框的宽度(column-rule-width),颜色(column-rule-color),并且像CSS中那样去用(column-rule)简写我们的多列边框,例如:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
达到的效果如下:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
顺便给大家说一下CSS有哪些边框样式,直接上图啦:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
4、指定元素跨越多少列
就是给被指定的某个元素应该跨多少列,这时候我们就要用到(column-span)这个属性了,这个属性有两个值,一个是1,一个是all,这就是说如果有个文本我们把它分成3列,我们就可以指定它的标题占1列或者所有的列。如下图:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
5、指定列的宽度
我们不仅可以把文本分成几列,还可以专门指定被分成列的宽度,这时候我们可以用column-width属性,来指定列的宽度。例如:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
限制在一个块元素显示的文本的行数,我们就可以用-webkit-line-clamp,由于它是一个不规范的属性,他没有出现在CSS规范草案中,不过并不代表我们不能用,为了使用它达到我们想要的效果,我们得结合一些属性,例如:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
这样一来,我们就可以让我们的文本显示6行,其余的用省略号代替。
此外,我们也可以显示一行文本,多余的用省略号代替,例如:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
writing-mode 属性定义了文本在水平或垂直方向上如何排版,这样我们就可以省去大量的CSS代码,一个属性就可以搞定,writing-mode有5个值,分别是:
我们可以让元素以任何形式放置在我们的表格当中,例如下图:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
这也是我们常用的知识,弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。容器内包含了一个或多个弹性子元素。
正常情况下,我们只需设置display:flex即可,弹性子元素元素就会在一行内显示(弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行),从左到右。
当然我们也可以修改排列方式,例如我们将body设置direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变,页面布局也跟着改变,所有的子元素会靠近左侧排列,并且以倒序排列。
1、flex-direction
flex-direction 属性指定了弹性子元素在父容器中的位置。其属性值:
例如我们用row-reverse将子元素倒序排列:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
2、justify-content 属性
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。这样我们就可以更好地排列我们的文本了,它呢有5个值,例如:
效果如下:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
平时space-between用的最多,它会让弹性子元素均匀的分布在弹性盒子呢,而且是响应式的排列。
CSS3多媒体查询可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。目前很多针对苹果手机,Android 手机,平板等设备都会使用到多媒体查询。像别的媒体,例如打印机、屏幕阅读器等的兼容性还不是很好。
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
比如说我们常用的响应式页面,我们想在媒体宽度最大500px显示图片,其余媒体不显示,我们就可以这样写:
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
「Web前端开发进阶篇」CSS3 一些你不知道的高级属性
在使用本篇讲解的CSS3属性时,一定要注意其浏览器的兼容性,因为很多的CSS3属性都不支持主流的低版本的浏览器,基本IE10以上、FireFox3.5以上、Chrome21.0以上、Safari4.0以上才能很好地兼容,希望小伙伴们注意。
本期的CSS3到这里就全部讲解完了,也希望小伙伴们学的快乐,马上也到了寒假过年的好日子,希望大家不要忘记学习哈!
接下来的我们会很长一段时间去学习JavaScript,如果你想学,关注我,我将带领大家一起去学习。

如需转载,请注明文章出处和来源网址:http://www.xuroms.com.cn/css3-style/c58247.shtml

欢乐二人雀神游戏 河北快三走势图电脑版 重庆幸运农场开奖官网 腾讯分分彩正规合法吗 福建31选7走势图彩吧 股市600001 美股融资融券股票 后三组选包胆规则 王中王免费精选资料 广西11选5官方下载 云南十一选五开奖一定牛结果 浙江体彩6十1走势图连线 河北十一选五开奖图 福彩快乐12开奖结果 秒秒彩的原理 上海十一选五今日一定牛 重庆幸运农场选号诀窍