1些常被你忽视的CSS小专业知识【必看】

日期:2021-01-20 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

1.CSS的color特性并不是只能用于文字显示信息

针对CSS的color特性,坚信全部Web开发设计人员都应用过。假如你其实不是1个非常有经

验的程序流程员,我坚信你不一定了解color特性除能用在文字显示信息,还能够用作其它地区。它

能够把网页页面上的全部的物品都变色调。例如:

没法显示信息的照片的alt文本、 list元素的边框、无序list元素前面的小点、井然有序list元素前面的数据和hr元素等

XML/HTML Code拷贝內容到剪贴板
  1. <html>  
  2.   
  3. <head>  
  4.   
  5. <meta http-equiv="content-type" content="text/html;charset=utf⑻">  
  6.   
  7. <style type="text/css">  
  8.   
  9. #div1   
  10.   
  11. {   
  12.   
  13.  width: 375px;   
  14.   
  15.  height: 265px;   
  16.   
  17.  border: 1px solid blue;   
  18.   
  19. }   
  20.   
  21. </style>  
  22.   
  23.  </head>  
  24.   
  25.  <body>  
  26.   
  27.  <div id="div1">  
  28.   
  29. <img src="test.jpg" alt="照片载入不成功" style="color:blue">  
  30.   
  31. <ol style="color:red;">  
  32.   
  33. <li style="border: 1px solid">1</li>  
  34.   
  35. <li>2</li>  
  36.   
  37. <li>3</li>  
  38.   
  39. </ol>  
  40.   
  41. <hr style="color:red" />  
  42.   
  43.  </div>  
  44.   
  45.  </body>  
  46.   
  47.  </html>  

有图为证:

 

2.CSS里的visibility特性有个collapse特性值:collapse

 

 针对CSS里的visibility特性,坚信你用过不下几百次。大多数情况下,你会把它的值设定

成visible(这是全部网页页面元素的缺省值),或是hidden。后者非常于display: none,但仍

然占有网页页面室内空间。实际上visibility能够有第3种值,便是collapse。

 

 

 

3.CSS的background简写方法里新增了新的特性值

 在CSS2.1里,background特性的简写方法包括5种特性值 – background-color, background-

image,background-repeat, background-attachment, and background-position。从CSS3刚开始,又提升了3个新的特性值,加起来1共8个。下面是按序各自意味着的意思:

background: [background-color] [background-image] [background-repeat] [background-attachment] 

[background-position] / [ background-size] [background-origin] [background-clip];留意里边的反斜杠,它

更font和border-radius里简写方法应用的反斜杠的用法类似。反斜杠能够在适用这类写法的访问器里在

position后边接着写background-size。除此以外,你开能够提升此外两个叙述它的特性值: background-

origin 和 background-clip.它的英语的语法用起来像下面这个模样:

CSS Code拷贝內容到剪贴板
  1. .example {   
  2.   
  3. background: aquamarine url(img.png)   
  4.   
  5. no-repeat  
  6.   
  7. scroll  
  8.   
  9. center center / 50%   
  10.   
  11. content-box content-box;   
  12.   
  13. }  

4.CSS的clip特性只在肯定精准定位的元素上才会起效

在style中添加

CSS Code拷贝內容到剪贴板
  1. img   
  2.   
  3.  {   
  4.   
  5.  width200px;   
  6.   
  7.  height200px;   
  8.   
  9.  clip: rect(0px 50px 200px 0px)   
  10.   
  11.  }  

在HTML中

1: <img src="bei.jpg" alt="照片载入不成功" >

     

 发现并沒有剪裁

     

对img开展肯定精准定位

CSS Code拷贝內容到剪贴板
  1.  img   
  2.   
  3.   {   
  4.   
  5. width200px;   
  6.   
  7. height200px;   
  8.   
  9. positionabsolute;   
  10.   
  11. clip: rect(0px 50px 200px 0px)   
  12.   
  13.   }    
  14.   

  clip合理:

 

 5.元素竖向的百分比设置是相对器皿的宽度,而并不是高宽比

当 按百分比设置1个元素的宽度时,它是相对父器皿的宽度测算的,可是,针对1些表明竖向间距的特性,比如padding-top,padding- bottom,margin-top,margin-bottom等,当按百分比设置它们时,根据的也是父器皿的宽度,而并不是高宽比。给照片提升1个 padding-top:

 1: padding-top: 10%;

依据实际效果和估计的间距便可证实是依据宽度来算的

 

 6.border-width特性可使用预订义变量定义值

 除可使用规范宽度值(比如5px或1em)外,border-width特性能够接纳预订义的变量定义值:medium, thin, 和 thick客观事实上,假如你不给border-width特性取值,那它的缺省值是“medium”。

 

 7、你了解table里的empty-cells特性吗?

css里的empty-cells特性是全部访问器都适用的,乃至包含IE8,它的用法是下面这个模样:

 1: table { empty-cells: hide;}

 

估算你从词义上早已猜出它的功效了。它是为HTML table服务的。它会告知访问器,当1个table模块格里沒有物品时,就掩藏它。

   

可是,empty-cells仅用于“分离出来边框”方式,即:border-collapse:separate;

8、font-style的oblique特性值

对与css的font-style特性,我估算大伙儿每次见到的全是应用“normal”或 “italic”两个特性值。但客观事实上,你还能够让它取值为“oblique”。

9、word-wrap和overflow-wrap是等效的

word-wrap其实不是1个很常见的CSS特性,但在特殊的自然环境中的确十分有效的。大家常常应用的1个事例是让网页页面中显示信息1个长url时换行,而并不是撑破网页页面。在本来的div中加上1个子div,设定word-wrap特性

CSS Code拷贝內容到剪贴板
  1. <div style="width:250px;height:250px;border:1px solid red;word-wrap:break-word">   
  2.   
  3. My father was a self-taught mandolin player.   
  4.   
  5.  He was one of the best string instrument players in our town.   
  6.   
  7.  He could not read music, but if he heard a tune a few times,   
  8.   
  9.  he could play it. When he was younger,   
  10.   
  11.  </div>  

实际效果

沒有对长单词开展剪裁,而是将长单词做为总体另起1行显示信息。将word-wrap更换为overflow-wrap,实际效果1样。

可是,必须留意的是word-break特性,其会对长单词开展剪裁

CSS Code拷贝內容到剪贴板
  1. <div style="width:250px;height:250px;border:1px solid red;word-break:break-all">   
  2.   
  3. My father was a self-taught mandolin player.   
  4.   
  5.  He was one of the best string instrument players in our town.   
  6.   
  7.  He could not read music, but if he heard a tune a few times,   
  8.   
  9.  he could play it. When he was younger,   
  10.   
  11.  </div>  

实际效果

     

 

附:word-wrap赋值:

word-break赋值:

以上这篇1些常被你忽视的CSS小专业知识【必看】便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/shouce/archive/2016/05/06/5464085.html