首页 web前端 html教程 一些常被你忽略的CSS小知识 - jerrylsxu

一些常被你忽略的CSS小知识 - jerrylsxu

May 20, 2016 pm 01:49 PM

1.CSS的color属性并非只能用于文本显示

     对于CSS的color属性,相信所有Web开发人员都使用过。如果你并不是一个特别有经

验的程序员,我相信你未必知道color属性除了能用在文本显示,还可以用作其它地方。它

可以把页面上的所有的东西都变颜色。比如:

      无法显示的图片的alt文字、 list元素的边框、无序list元素前面的小点、有序list元素前面的数字和hr元素等

 

   1: 

   2: 

   3:     <meta http-equiv="content-type" content="text/html;charset=utf-8">

   4:     <style type="text/css">

   5:         #div1

   6:         {

   7:             width: 375px;

   8:             height: 265px;

   9:             border: 1px solid blue;

  10:         }

  11:     </style>

  12: 

  13: 

  14: <div id="div1">

  15:      <img src="/static/imghw/default1.png" data-src="test.jpg" class="lazy" alt="图片加载失败"   style="max-width:90%">

  16:     <ol style="color:red;">

  17:         <li style="border: 1px solid">一</li>

  18:         <li>二</li>

  19:         <li>三</li>

  20:     </ol>

  21:     <hr style="color:red">

  22: </div>

  23: 

  24: 
登录后复制

 

有图为证:

1

 

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

 

       对于CSS里的visibility属性,相信你用过不下几百次。大多时候,你会把它的值设置

成visible(这是所有页面元素的缺省值),或者是hidden。后者相当于display: none,但仍

然占用页面空间。其实visibility可以有第三种值,就是collapse。

 

2

 

 

    3.CSS的background简写方式里新增了新的属性值

     在CSS2.1里,background属性的简写方式包含五种属性值 – background-color, background-

image,background-repeat, background-attachment, and background-position。从CSS3开始,又增加了3个新的属性值,加起来一共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.它的语法用起来像下面这个样子:

 

   1: .example {

   2: background: aquamarine url(img.png)

   3: no-repeat

   4: scroll

   5: center center / 50%

   6: content-box content-box;

   7: }
登录后复制


    4.CSS的clip属性只在绝对定位的元素上才会生效

        在style中加入

   1: img

   2:  {

   3:     width: 200px;

   4:     height: 200px;

   5:     clip: rect(0px 50px 200px 0px)

   6:  }
登录后复制


       在HTML中

1: <img src="/static/imghw/default1.png" data-src="bei.jpg" class="lazy" alt="图片加载失败"   style="max-width:90%">
登录后复制

     

     发现并没有裁剪

     3

       对img进行绝对定位

 

   1: img

   2:     {

   3:         width: 200px;

   4:         height: 200px;

   5:         position: absolute;

   6:         clip: rect(0px 50px 200px 0px)

   7:     }
登录后复制

 

      clip有效:

4

 

    5.元素竖向的百分比设定是相对于容器的宽度,而不是高度

         当 按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding- bottom,margin-top,margin-bottom等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。给图片增加一个 padding-top:

 1: padding-top: 10%;
登录后复制

    根据效果和估算的距离即可证明是根据宽度来算的

5

 

    6.border-width属性可以使用预定义常量值

       除了可以使用标准宽度值(例如5px或1em)外,border-width属性可以接受预定义的常量值:medium, thin, 和 thick事实上,如果你不给border-width属性赋值,那它的缺省值是“medium”。

6

 

    7、你知道table里的empty-cells属性吗?

         css里的empty-cells属性是所有浏览器都支持的,甚至包括IE8,它的用法是下面这个样子:

 1: table { empty-cells: hide;}
登录后复制

 

估计你从语义上已经猜出它的作用了。它是为HTML table服务的。它会告诉浏览器,当一个table单元格里没有东西时,就隐藏它。

  7 

但是,empty-cells仅用于“分离边框”模式,即:border-collapse:separate;

 

    8、font-style的oblique属性值

         对与css的font-style属性,我估计大家每次见到的都是使用“normal”或 “italic”两个属性值。但事实上,你还可以让它赋值为“oblique”。

 

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

         word-wrap并不是一个很常用的CSS属性,但在特定的环境中确实非常有用的。我们经常使用的一个例子是让页面中显示一个长url时换行,而不是撑破页面。在原本的div中添加一个子div,设置word-wrap属性

 

<strong>   1: <div style="width:250px;height:250px;border:1px solid red;word-wrap:break-word">

   2:          My father was a self-taught mandolin player.

   3:     He was one of the best string instrument players in our town.

   4:     He could not read music, but if he heard a tune a few times,

   5:     he could play it. When he was younger,

   6:  </div></strong>
登录后复制

 

效果

8

没有对长单词进行裁剪,而是将长单词作为整体另起一行显示。将word-wrap替换为overflow-wrap,效果一样。

但是,需要注意的是word-break属性,其会对长单词进行裁剪

 

<strong>   1: <div style="width:250px;height:250px;border:1px solid red;word-break:break-all">

   2:          My father was a self-taught mandolin player.

   3:     He was one of the best string instrument players in our town.

   4:     He could not read music, but if he heard a tune a few times,

   5:     he could play it. When he was younger,

   6:     </div></strong>
登录后复制


效果

      9

 

附:word-wrap取值:

10

word-break取值:

11

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML容易为初学者学习吗? HTML容易为初学者学习吗? Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始标签的示例是什么? HTML中起始标签的示例是什么? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Apr 04, 2025 pm 11:54 PM

GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? 如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? Apr 05, 2025 am 06:15 AM

实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

网页批注如何实现Y轴位置的自适应布局? 网页批注如何实现Y轴位置的自适应布局? Apr 04, 2025 pm 11:30 PM

网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能,特别是如何处理批注之间的间�...

HTML,CSS和JavaScript:Web开发人员的基本工具 HTML,CSS和JavaScript:Web开发人员的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

See all articles