CSS 3新特性学习----用户界面

最新推荐文章于 2022-06-19 20:37:38 发布

自由之翼Online

最新推荐文章于 2022-06-19 20:37:38 发布

阅读量454

点赞数

分类专栏： css3 文章标签： CSS3 用户界面

本文链接：https://blog.csdn.net/awpzxtty/article/details/22162031

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用CSS3的新特性,我们可以自由地控制页面当中某个元素的大小,可以设置外边框以突出重点，轻松地实现例如报纸版面的排列效果(多列),也可以重新定义盒子模型的呈现样式。

想要在页面上实现类似于报纸排版的样式，使用column-count这一css3的新特性就可以轻松的完成了，当然，由于各浏览器存在兼容性的问题，这一属性在不同浏览器下也会有不同的声明方式:

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

利用column-gap这一属性，它规定了列之间的间隔，最好将这个属性放在column-count之上，而且也需要各浏览器厂商的前缀。

利用column-rule这一属性，可以用来设置列之间的分隔线样式，最好将这个属性放在column-count之上，而且也需要各浏览器厂商的前缀。

利用column-width这一属性，可以用来规定列的宽度，但是在使用此属性之前，一定要根据当前div容器的宽度来合理分配，最好将这个属性放在column-count之上，而且也需要各浏览器厂商的前缀。

下面是实现类似于报纸排版方式的一个例子:

[html]view plaincopyprint? 
   
 <!doctype html>  
 <html lang="zh-hans">  
 <head>  
 <meta name="viewport" content="width=device-width,initial-scale=1.0">  
 <meta charset="utf-8">  
 <link href="jquery.mobile-1.4.2.min.css" rel="stylesheet">  
 <title>CSS 3用户界面---demo01</title>  
 </head>  
 <body>  
 <div data-role="page" data-theme="b">  
     <div data-role="header">  
         <h1>CSS 3用户界面</h1>  
     </div>  
     <div data-role="content" style="column-count:3;-moz-column-count:3;-webkit-column-count:3;">  
          明日香是EVA的女主角之一，第二适格者，EVA二号机的专属驾驶员。她是具有3/4德国血统和1/4日本血统的天才少女，国籍是美国。  
          自第八话登场后在与使徒的战斗中都非常活跃，驾驶技术相当优秀。第九话开始住进了美里的公寓，与真嗣、美里组成了三口之家。明日香是个看起来活泼开朗的女孩，在别人面前显得非常高傲和强势，因此，软弱的真嗣经常招来她的不满。但她也有着不堪回首的往事，她的母亲因为一次试验失败而导致精神分裂，并最终在明日香眼前自杀。无法正视这一精神创伤的明日香因此将自己脆弱而没有安全感的内心隐藏在好强的外表下，导致其人格具有极高的侵略性，只有透过对外表现她个人的优秀，才能确保心理上的平衡。  
          故事中期在同步率被真嗣超越，又数次败给使徒的打击之下精神濒临崩溃。但之后在剧场版《The End Of Evangelion》中，由于在EVA二号机中见到母亲的灵魂，她再次振作起来，和量产机  
  展开了惨烈的搏斗。  
     </div>  
     <div data-role="footer" data-position="fixed">  
         <h3>CSS 3用户界面</h3>  
     </div>  
 </div>  
 <script src="jquery/jquery.js"></script>  
 <script src="jquery.mobile-1.4.2.min.js"></script>  
 </body>  
 </html>  

有时用户可能需要自己来调整元素的尺寸，这时就可以使用resize属性来完成这一需求。

它可以取以下值:none|无法调整,both|高度和宽度都可以调整,horizontal|只能对宽度进行调整,vertical|只能对高度进行调整

但是到目前为止，只有页面中的textarea这一元素可以使用这一属性。

接下来是box-sizing属性，在css2中，一旦为盒模型设置了padding属性，那盒子的整个宽高也会随之被改变，但有时我们并不希望盒子的尺寸在加入此属性后就会产生改变，

这时我们就可以使用box-sizing这一属性来定义是否需要做出改变了，同样的这个属性也存在着浏览器兼容性的问题。

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。
Firefox 支持替代的 -moz-box-sizing 属性。
Safari 支持替代的 -webkit-box-sizing 属性。

box-sizing属性可以取以下三个值:

content-box：CSS 2默认的宽度高度行为，宽和高分别应用到元素的内容框，在宽和高之外绘制元素的内边距和边框(内边距指的就是盒子与包围盒子的边线之间的那段距离)。

border-box：为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽
度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到
内容的宽度和高度。

inherit ：规定应从父元素继承 box-sizing 属性的值。

接下来是outline，外边框属性,这个属性可以给元素的周围绘制轮廓外边框，而且这个外边框不会通过设置一个数值使边框
边缘的外围偏移，可起到突出元素的作用。

现在所有主流浏览器都支持 outline 属性，除了 Internet Explorer。

语法：outline：[outline-color] || [outline-style] || [outline-width] ||
[outline-offset] | inherit
<outline-color>：指定轮廓边框颜色。
<outline-style>：指定轮廓边框轮廓。
<outline-width>：指定轮廓边框宽度。
<outline-offset>：指定轮廓边框偏移位置的数值。

以上提到的属性都是css3用户界面中常用的属性。

自由之翼Online

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 3新特性学习----用户界面

利用CSS3的新特性,我们可以自由地控制页面当中某个元素的大小,可以设置外边框以突出重点，轻松地实现例如报纸版面的排列效果(多列),也可以重新定义盒子模型的呈现样式。想要在页面上实现类似于报纸排版的样式，使用column-count这一css3的新特性就可以轻松的完成了，当然，由于各浏览器存在兼容性的问题，这一属性在不同浏览器下也会有不同的声明方式: Inter
复制链接

扫一扫

专栏目录