分类目录归档:CSS教程

CSS教程

CSS3 中appearance属性起什么作用呢?


摘要:
下文css代码中appearance属性的功能说明,如下所示:

appearance属性功能:
    使用一个元素看上去像一个按钮

appearance属性说明:
     appearance: normal|icon|window|button|menu|field;
	  normal:将元素呈现为常规元素
      icon:将元素呈现为图标(小图片)
      window:将元素呈现为视口
      button:将元素呈现为按钮
      menu:将元素呈现为一套供用户选择的选项
      field:将元素呈现为输入字段

appearance属性注意事项:
    目前主流浏览器都不支持appearance 属性
    Firefox支持替代的-moz-appearance 属性
    Safari和Chrome支持替代的 -webkit-appearance 属性

例:
appearance属性示例分析

 
<meta charset="utf-8" />
<style> 
div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}
</style>
 
 <P>
 maomao365.com <br />
 appearance属性测试
 </p>
 <hr />
<div>appearance属性测试</div>
css3之属性appearance示例分享

css3之属性appearance示例分享

css 中单位之px、em、rem分别代表什么呢?


摘要:
下文讲述css代码带代码中常常看见的px,em,rem分别代表的含义,如下所示:

px:指精确单位

em:相对单位(相对父级元素)
   如父级元素的默认字体的像素单位 16px
则 1em = 16px;

rem:相对单位(相对根元素--
   如:html标签定义字体大小为16px)
则: 
   1rem =16px; 

CSS如何实现div溢出宽度或高度后内容自动隐藏呢?


摘要:
下文讲述css的相关技巧分享,如下所示;

由于一些容器大小的限制,我们需设置当内容超过div的高度和高度时,会撑破div,使网页变得不符合当初的设计,
那么我们如何使用div限制内容超过宽度和高度时,自动隐藏呢?
下文将讲述具体的实现方法,如下所示:

实现思路:
    1.使用css属性overflow:hidden;即可隐藏超出部分
    2.使用css属性
      overflow:hidden;/*隐藏超出部分*/
      text-overflow:ellipsis;/*超出部分使用省略号*/
      white-space:nowrap;/*禁止换行*/

例:

<meta charset='utf-8' />
<p>
maomao365.com<br />
div禁止显示超出部分
</p>
<hr />
<style> 
.divTest{
   overflow:hidden;
   width:100px;
   height:20px;
   line-height:20px;
   border:1px dotted black;
}
</style> 
<div class="divTest">
 猫猫教程-测试超出部分自动隐藏
</div>
css超出部分禁止显示的示例分享

css超出部分禁止显示的示例分享