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.  width: 200px;   
  6.   
  7.  height: 200px;   
  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. width: 200px;   
  6.   
  7. height: 200px;   
  8.   
  9. position: absolute;   
  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

上一篇：怎样做手机微信微信公众号中秋节艺术创意h5手机 返回下一篇：没有了