CSS学习笔记(五)

文章目录

  • CSS学习笔记(五)
    • 定位
      • 相对定位
      • 绝对定位
      • 定位居中
      • 固定定位
      • 堆叠层级
    • CSS精灵
    • 字体图标
      • 下载字体
      • 使用字体
      • 上传矢量图
    • 垂直对齐方式
    • 过渡
    • 透明度
    • 光标类型

CSS学习笔记(五)

定位

作用:灵活的改变盒子在网页中的位置,可以让两个标签压在一起显示,比如一个图片在另一个图片上面
实现:

  • 定位模式:position
  • 边便宜:设置盒子的位置
    • left
    • right
    • top
    • bottom

相对定位

position: relative;

div
{
  position: relative;
  top: 100px;
}
  1. 改变位置的参照物是原来的自己,上面代码的情况就是相对于原来的自己向下移动了100px,left则为向右
  2. 不脱标,占位,即原来空出来的位置留白
  3. 标签显示模式不变

绝对定位

position: absolute;
使用场景:子级绝对定位,父级相对定位(子绝父相)。子级加上了绝对定位,如果父级有相对定位,则子级会在父级中来进行定位,如果父级没有相对定位,则会相对于整个浏览器窗口定位。这是因为你给他设置上绝对定位之后,他会相对于最近的“已定位”祖先元素(position 不为 static)来定位。

.news
{
  position: relative;
}

.news div
{
  position: absolute;
  top: 0;
  right: 0;
  /* 位于右上角 */
}
  1. 拖标,不占位置
  2. 参照物:最近已定位的祖先元素
  3. 显示模式特点改变:宽高生效(具有行内块的特点)

定位居中

实现步骤:

  1. 绝对定位(一般是相对于整个窗口,所以可以不需要相对定位)
  2. 水平、垂直边偏移为50%
  3. 子级向左、上移动自身尺寸的一半(上一步会将盒子的左上角移动到页面的最中间)
img
{
  position: absolute;
  left: 50%;
  top: 50%;
  /* 
  也可以这么写:
  margin-left: -265px;
  margin-top: -127px; 
  */
  transform: translate(-50%, -50%)
}

固定定位

position: fixed;
使用场景:元素位置在网页滚动时不会改变

img
{
  position: fixed;
  top: 0;
  right: 0;
  /* 浏览器右上角 */
}
  1. 拖标,不占位
  2. 参照物:浏览器窗口
  3. 显示模式特点改变:行内块特点

堆叠层级

z-index取值为整数,取值越大显示越靠上
作用:设置定位元素的层级顺序,改变定位元素的显示顺序。因为默认效果是按照标签书写顺序,后来者居上

div
{
  z-index: 1;
}

CSS精灵

也叫CSS Sprites,是一种网页图片应用处理方式,把网页中的一些背景图整合到一张图片文件中,再background-position精确的定位出背景图片的位置
优点:减少服务器被请求的次数,减轻服务器的压力,提高页面加载速度
实现步骤:

  1. 创建盒子,盒子尺寸与小图尺寸相同
  2. 设置盒子背景图为精灵图
  3. 添加background-position属性,改变背景图位置
    1. 测量小图左上角坐标
    2. 取负数坐标

可以理解为讲所有的小图拼装成一张的大图,然后需要哪个图就做一个和该小图相同尺寸的盒子,然后将大图中该小图移到那个位置

div
{
  width: 36px;
  height: 42px;
  background: url() 0 -192px;
}

字体图标

作用:在网页中添加简单、颜色单一的小图标。展示的是图标,本质是字体。
优点:

  • 灵活性:灵活的修改样式,如:尺寸颜色等
  • 轻量级:体积小、渲染快、降低服务器请求次数
  • 兼容性:几乎兼容所有主流浏览器
  • 使用方便:先下载再使用

下载字体

  • icondont图标库:https://www.icont.cn
  • 下载字体
    登录 -> 素材库 -> 官方图标库 -> 选图标,加入购物车 -> 购物车,添加至项目,确定 -> 下载至本地

其中:

  • html是示例文件,我们可以从该文件找到名称
  • iconfont.css是样式表,要link引入
  • 最后三个是字体文件

使用字体

  1. 引入字体样式表(iconfont.css)
@font-face
{
  font-family: "iconfont";
  src: url('iconfont.woff2?t=1675303337325') format('woff2')
       url('iconfont.woff?t=1675303337325') format('woff')
}
  1. 标签使用字体图标类名
    1. iconfont: 字体图标基本样式(字体名,字体大小等等)
    2. icon-xxx: 图标对应类名
<head>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
head>
<style>
  .iconfont
  {
    font-size: 200px;
    color: orange;
  }
style>
<span class="iconfont icon-xxx">span>

注意如果要修改图标大小不能修改其父级,要修改.iconfont这个类。即选择器的优先级要大于.iconfont这个类

上传矢量图

将项目特有的图标上传到iconfont图标库,生成字体。格式.svg,一般选择去除颜色提交。上传之后的使用过程与前面一样。


垂直对齐方式

  • 属性名:vertical-align
  • 属性值:
    • baseline: 基线对齐(默认)
    • top: 顶部对齐
    • middle: 居中对齐
    • bottom: 底部对齐
CSS学习笔记(五)_第1张图片

来源:黑马程序员

给最高内容加该属性
通常用于处理图片与文字没有对齐或者图片底端有空白的问题,这是因为图片img为行内块模式,被当成文字处理,它会用底部来对齐基线。解决前一种问题就是用vertical-align,解决后一种还可以用display将其转换为block显示模式


过渡

可以为一个元素在不同状态之间切换的时候添加过度效果

  • 属性名: transition(复合属性)
  • 属性值: 过渡的属性 花费时间(s)
  • 过渡的属性可以是具体的CSS属性
  • 也可以为all(两个状态值不同的所有属性都产生过渡效果)
  • transition设置给元素本身,不是加给hover的。加给hover会导致鼠标移开的时候没有动画效果
img
{
  width: 200px;
  height: 150px;
  transition: all 1s;
}
img:hover
{
  width: 500px;
  height: 400px;
}

透明度

作用:设置整个元素的透明度(包含背景和内容,rgba()只能设置背景透明度)

  • 属性名: opacity
  • 属性值: 0-1

光标类型

作用:设置鼠标悬停在元素上时的指针样式

  • 属性名: cursor
  • 属性值:
    • defult:默认值,通常是箭头
    • pointer:小手效果,提示用户可以点击
    • text:工字型,提示用户可以选择文字
    • move:十字光标,提示用户可以移动

你可能感兴趣的:(网页制作,CSS,css,前端,css3)