HTML5、CSS3学习笔记（八）定位、CSS高级技巧、修饰属性

Akironer
90 阅读4分钟

移动端工程师学习javascrip的笔记和归纳，内容非常基础。

定位

作用：灵活的改变盒子在网页中的位置

实现：

1、定位模式：position

2、边偏移：设置盒子的位置

  • left
  • right
  • top
  • bottom

相对定位 position：relative

特点：

  • 改变位置的参照物：自己原来的位置
  • 不脱标，占有原来的位置
  • 标签显示模式不变。原来是块显示模式，还是块显示模式

绝对定位 position：absolute

使用场景：子级绝对定位，父级相对定位（子决父相）

特点：

  • 脱标，不占位
  • 参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参数浏览器可视区域
  • 标签显示模型改变：宽高生效（具备了行内块的特点）。

固定定位 position：fixed

特点：

  • 脱标，不占位
  • 参照物：浏览器窗口
  • 标签显示模型改变：宽高生效（具备了行内块的特点）。

定位居中

实现步骤：

1、 绝对定位

2、水平、垂直边偏移为50%

3、 子级向左、向上移动自身尺寸的50%

  • 左、上的外边距为 -尺寸的一半
  • transform：translate(-50%,-50%)

堆叠层级 z-index

默认效果：按照标签书写顺序，后来者居上

作用：设定定位元素的层级结构，改版定位元素的显示层级

取值是整数，默认是0，取值越大顺序越靠上

CSS高级技巧

CSS Sprites

CSS Sprites，也叫CSS精灵，是一种网页图片应用处理方式。

把页面中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。

优点：减少服务器请求次数，提高网页加载速度。

步骤：

  • 1、创建盒子，盒子尺寸与小图尺寸相同
  • 2、设置盒子背景图为精灵图
  • 3、添加background-position属性，改变图片位置
  • 3.1、取得 小图片左上角坐标
  • 3.2、取负数坐标为background-position属性值（向上移动图片位置）

字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点：

  • 灵活性：灵活的修改样式，如：尺寸、颜色
  • 轻量级：体积小、渲染快
  • 兼容性：几乎兼容所有主流浏览器
  • 使用方便：先下载再使用

使用：

  1. 引入字体样式表 iconfont.css
@font-face{
  font-family："iconfont"
  src：url('iconfont.woff2?t=165303337325') format('woff2'),
      url('iconfont.woff?t=165303337325') format('woff'),
      url('iconfont.ttf?t=165303337325') format('truetype');
}

<link rel="stylesheet" href="../iconfont/iconfont.css">
  1. 标签使用字体图标类名
  • iconfont：字体图标基本样式（字体名、字体大小等）
  • icon-xxx：图标对应的类名
.iconfont {
  font-size: 20;
  color: white;
}

<span class = "iconfont icon-xxx"><span>

修饰属性

垂直对齐方式 vertical-align

属性名：vertical-align

属性值

属性值效果
baseline基线对齐（默认）
top顶部对齐 （最高内容的顶部）
middle居中对齐
bottom底部对齐（最高内容的底部）

image.png

1、浏览器会把行内块、行内标签当作文字处理，默认按基线对齐。

2、如果行内img图片底部有留白，使用display:block转为行内块

过渡属性 transition

作用：为一个元素在不同状态间切换时，添加过渡效果

属性名：transition

属性值：过渡的属性 花费时间

提示：

  • 过渡的属性可以是具体的CSS属性
  • 也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）

1、工作中经常配合hover使用

2、transition设置给元素本事

img {
  width: 200px;
  height: 200px;
  transition: all 1s;
}

img:hover {
  width: 400px;
  height: 500px;
}

透明度 opacity

作用：设置整个元素的透明度

属性名：opacity

属性值：0 - 1

  • 0：完全透明（元素不可见）
  • 1：不透明
  • 0 - 1间小数：半透明

光标类型 cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

属性值

标题
default默认，通常是箭头
pointer小手效果，提示用户可以点击
text工字效果，提示用户可以选择文字
move柿子光标，提示用户可以移动

显示与隐藏 display: none

  1. display: none 隐藏子元素
  2. 父元素：honver时，display: block显示子元素
    .banner .pre,
    .banner .next {
      /* 隐藏 */
      display: none;
      width: 20px;
      height: 30px;
    }

    /* 鼠标划过banner 显示pre next */
    .banner:hover .pre,
    .banner:hover .next {
      display: block;
    }

参考资料

avatar
文章
阅读
粉丝