CSS基础

Posted sauronblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS基础相关的知识,希望对你有一定的参考价值。

1.元素的显示和隐藏

display:none/block

visibility:hidden/visible

两者的区别:

display:none的元素,不占原来标准流的位置了,在页面是也看不到了,但是源码中还有对应的标签。

visibility:hidden的元素,占据原来的标准流位置,在页面中看不到,源码中有对应的标签。

 

2.元素中内容的溢出隐藏

overflow:hidden;会将超出或是溢出元素的内容给隐藏起来

 

3.溢出省略

三个属性:overflow,white-space,text-overflow缺一不可

.box 
      width: 200px;
      height: 100px;
      background-color: pink;
      overflow: hidden;
      white-space: nowrap;    /*将文字内容设置为不换行*/
      text-overflow: ellipsis;  /*ellipsis省略的意思   text-overflow文本溢出*/
    

 

4.光标的样式

cursor: default 默认 | pointer 小手 | move 移动 | text 文本 | help 帮助

最最常用的是 pointer,move;

 

去掉文本框或是文本域的环绕线

outline:none

 

5.图片和文字的对齐方式

vertical-align: baseline | top | middle | bottom

一般用middle让图片和文字在垂直方向都居中。

还可以使用top,middle,bottom将图片与盒子底部的默认间距给清除。

将图片与盒子底部的默认间距清除掉的方式:

vertical-align:top|middle|bottom 还可以将图片设置为块级元素 display:block

 

6.精灵图

1.**为什么要使用精灵图**

  • 为了降低向服务器发送请求的次数

  • 提高页面的加载速度

2.什么是精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。

3.精灵图使用本质

利用背景图片的位置属性进行设置

 

7.字体图标

1.精灵图的缺点

1.额外的增加总文件的大小,因为精灵图本质上还是图片

2.会额外的增加http请求次数

3.缩放会失真

 

2.字体图标的优点:

1.可以做出跟图片一样可以做的事情,改变透明度、旋转度,等..

2.但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等...

3.本身体积更小,但携带的信息并没有削减。

4.几乎支持所有的浏览器

5.移动端设备必备良药...

 

8.滑动门(了解)

无论内容如何变化 ,两边的样式还是原来的样式

 

9.宽高的设置

一个元素的宽高可以使用px单位 ,还可以使用百分比的形式,还可以使用em

如果使用百分比的话,是按父元素的宽高进行百分比的设置。

 

10.过渡

transition:过渡

要过渡的属性,过渡的持续时间,运动轨迹,延迟时间

 

11.变换或是变形transform

transform: translate|scale|rotate

translate是指的元素的位置的移动,比如水平或是垂直的位置

scale是指的元素的大小的变化,比如宽高,里面的参数是倍数,如果只写一个值,表示宽高都按这个倍数进行缩放。

rotate是指元素的旋转

 

以上是关于CSS基础的主要内容,如果未能解决你的问题,请参考以下文章

HTML/CSS回顾之CSS基础

Css3之基础-2 Css 基础选择器

css实现基础图表

CSS基础

五、css基础(二)

css基础教程:对css代码精简