分类目录归档:CSS教程

CSS教程

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超出部分禁止显示的示例分享

css中-moz,-ms,-webkit前缀分别代表什么功能呢?


摘要:
下文讲述css几种前缀的功能说明,如下所示;

-moz,-ms,-webkit三种前缀分别代表三种不同内核的浏览器
   -moz:firefox浏览器私有属性
   -ms:ie浏览器私有属性(360浏览器是ie内核)
   -webkit:safari、chrome私有属性
   -o:opera私有属性

例:

 <style>
  .divTest{
      transform: translate(100px,50px);
    -webkit-transform: translate(100px,50px);
    -ms-transform: translate(100px,50px);
    -o-transform: transform(100px,50px);
    -moz-transform: transform(100px,50px);
   }
 </style>