CSS基础

Posted 2022-09-17 sauronblog

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是指元素的旋转