元素显示与隐藏----精灵图----字体图标

day02

1. 元素的显示和隐藏
2. 精灵图
3. 字体图标…

元素的显示与隐藏

display

• display: block 显示元素
• display: none 隐藏元素(隐藏元素之后不占位置)

visibility

• visibility: visible 显示元素
• visibility: hidden 隐藏元素(隐藏元素之后是占位置的)

overflow

 <style>
 .box {
     /* 将溢出容器的内容隐藏 */
     /* overflow: hidden; */
     /* 默认值  超出显示 */
     /* overflow: visible; */
     /* 自动,内容如果超出就显示滚动条,内容不超出就不显示滚动条 */
     overflow: auto;
     /* 不管内容是否超出,都会显示滚动条 */
     /* overflow: scroll; */
     width: 200px;
     height: 200px;
     background-color: pink;
     /* 英文字符和数字不会自动换行,可以设置以下代码让折行显示 */
     word-break: break-all;
 }
 </style>
<div class="box">
【王者视角】第二十六期：画地为牢，这一方水土由我来守护！9.6万2020-04-25【王者视角】第二十四期：软辅使用手册,守护全场的增益buff【王者视角】第二十六期：画地为牢，这一方水土由我来守护！9.6万2020-04-25王者视角】第二十四期：软辅使用手册,守护全场的增益buff
</div>

精灵图

• 为了提高网页响应速度,减少服务器的压力
• 精灵图的使用
  1. 使用选框工具选中需要使用的精灵图片,得到精灵图的宽高设置好盛放精灵图的容器
  2. 引入背景图片
  3. 修改精灵图的位置,使用background-position: x偏移值 y偏移值;最大是0基本上全是负值

​ 精灵图设置位置的时候 水平值或者垂直值是0 也不允许省略

字体图标

icomoon

阿里巴巴矢量图标库

等腰三角形

<style>
	div {
      /* 设置宽高为0  */
      width: 0px;
      height: 0px;
      /* 设置边框 */
      border: 10px solid #000;
      border-top-color: pink;
      border-left-color: green;
      border-bottom-color: red;
	}
</style>

修改鼠标样式

/* 小白箭头  默认样式   */
/* cursor: default; */
/* 修改鼠标样式为小手 */
/* cursor: pointer; */
/* 修改鼠标样式为 移动 */
/* cursor: move; */
/* 禁止状态鼠标样式 */
/* cursor: not-allowed; */
详情见 https://www.w3school.com.cn/cssref/pr_class_cursor.asp  完整的鼠标样式介绍

• 去除表单元素的轮廓线 outline: none
• 禁止多行文本域的拖拽 resize: none

行内块元素与文本对齐方式

/* 因为行内块元素与文本默认是基线对齐的 */
/* 为行内块元素设置vertical-align属性 */
img {
  /* 默认是baseline 基线对齐的 
  top 顶线对齐
  middle中线对齐
  bottom 底线对齐
  */
  vertical-align: baseline;
}	
<img
  src="https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=3608586022,1652706197&fm=85&app=92&f=JPEG?w=121&h=75&s=BF895823423176315E95C1C70100E0A1"/>
<span>一去二三里gklj</span>

行内块元素撑开父容器

 /* 图像高是75 div 被图片撑开高度是79,多出来的4px是因为行内块元素默认与文字基线对齐导致的 */
 /* 解决方式,
 	 1. 可以为行内块元素设置vertical-align属性: top/bottom/middle */
 /*  2. 如果容器中没有别的文字元素,将容器设置font-size:0 */
 /*  3. 将行内块元素转为块元素 */
<div>
      <img
  src="https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=3608586022,1652706197&fm=85&app=92&f=JPEG?w=121&h=75&s=BF895823423176315E95C1C70100E0A1" />
</div>