基础班day10笔记

发表于
字数统计: 2.8k | 阅读时长 ≈ 10

学习目标

  • 理解定位的使用场景（一般用于解决盒子之间的层叠问题）
  • 能够说出相对定位的特点
  • 能够说出绝对定位的特点
  • 能够说出固定定位的特点
  • 能够理解子绝父相（子盒子绝对定位，父盒子相对定位，布局中会经常使用到）
  • 能够实现z-index控制元素的层级（数值越大，层级越高）
  • 能够说出vertical-align属性的使用（一般用于设置文本与行内块元素（图片）的垂直对齐方式）
  • 能够说出三种隐藏元素的区别（内容超出隐藏、元素隐藏（看不见）、元素隐藏（不存在））

。。。。。。

理解上课的知识点……

定位

可以解决盒子与盒子之间的层叠问题

需求：现在在页面上有两个盒子，其中第二个盒子将第一个盒子压住了一半，怎么完成？？？

1

解决方案：

  • 使用margin的单方向应用

    但是实际开发中并不会使用marign完成层叠的效果

  • 使用 定位 来完成效果

    1
    2
    3
    4
    5
    6
    7
    .blue {
      /*定位：position*/
      position: absolute;
      /*定位需要配合方位属性一起使用的！！*/
      top: 150px;
      left: 150px;
    }

定位初体验

position：absolute； 设置定位

方位属性：

水平和垂直方向各选一个使用即可，选取的原则是就近原则 （离哪边近用哪个）

  • 水平方向：
    • left：相对于左边框的距离
    • right：相对于右边框的距离
  • 垂直方向：
    • top：相对于上边框的距离
    • bottom：相对于下边框的距离

静态定位（static）

标准流中的元素默认都是静态定位

代码： position: static; （默认值）静态定位

静态定位是有一定争议的（有些人认为静态定位不算定位）

面试时候回答：三种定位方式，优先回答其他三个（相对、绝对、固定），如果四种再写静态定位

注意点： 静态定位不能通过方位属性进行移动

相对定位（relative）

盒子相对于自己之前的位置定位移动（红绿蓝）

代码：position: relative； 相对定位

特点：

  • 要配合方位属性使用，不然无法移动

  • 相对于自己原来的位置进行偏移

  • 设置了相对定位的元素在页面上占据了位置-》没有脱标

应用场景：

  • 配合绝对定位组CP（子绝父相），用的最多
  • 用于小范围的移动（比如让某个标签稍微往下移动几个像素）

绝对定位（absolute）

绝对定位相对于非静态定位的父元素进行定位移动

代码：position: absolute; 绝对定位

特点：

  • 需要配合方位属性移动使用

  • 绝对定位相对谁移动？

    默认相对于浏览器进行移动，但是如果有父元素，则相对于有定位的父元素进行移动

    • 没有父元素 → 默认相对于浏览器进行移动
    • 有父元素（判断父元素有没有定位）
      • 没有定位 → 默认相对于浏览器进行移动
      • 有定位 → 相对于有定位的父元素进行移动

  • 绝对定位的元素在页面中 不占位置 → 脱标

应用场景：

  • 子绝父相

子绝父相

让子元素相对于父元素进行移动 → 使用子绝父相，即子元素绝对定位，父元素相对定位

子绝父相在定位中使用的最常见，并且子绝父相不会影响页面的布局

ヾ(๑╹◡╹)ﾉ”比较子绝父相的好处

不会影响之后的布局

特殊情况： 当使用子绝父相的时候，父元素已经有绝对定位了，此时忽略父元素，直接使用子绝即可

子绝父绝的特殊情况

ヾ(๑╹◡╹)ﾉ”子绝父相定位居中案例
1
父盒子：600*400  子盒子：200*100

需求1： 通过定位让子盒子在父盒子水平居中

思路：

  1. 先让子盒子往右移动父盒子的一半

    子绝父相，left：50%;

  2. 再让子盒子往左移动自己的一半

    • 普通做法：margin-left:负子盒子宽度的一半 → 属性值是负数

      缺点：子盒子宽度变化之后，需要重新改代码

    • 优化做法：CSS3的新属性：transform：translateX（-50%）

      transform：translateX（-50%） → 表示沿着x轴的负方向移动自己的一半

需求2： 通过的定位让子盒子在父盒子中水平垂直都居中

同理嘛~

但是需要注意，transform属性也会层叠。

ヾ(๑╹◡╹)ﾉ”课堂练习：网站头部hot图标

hot

ヾ(๑╹◡╹)ﾉ”课堂练习：小米商品页半透明效果

toumin

固定定位 （fixed）

盒子相对于浏览器进行定位移动

代码：position: fixed; 固定定位

特点：

  • 配合方位属性一起使用

  • 永远相进行移动

  • 固定定位的元素也不在页面中占据位置 → 脱标
ヾ(๑╹◡╹)ﾉ”课堂练习：新浪网页

注意的是：脱标后的元素宽度默认由内容撑开

就算是div，脱标之后宽度也不再默认是父元素宽度

四种定位总结

定位方式 属性值 相对于谁移动 占不占位置
静态定位 static 不能通过方位属性移动 占位置
相对定位 relative 相对于自己原来的位置 占位置
绝对地位 absolute 默认浏览器/相对于有定位的父元素移动 不占位置（脱标）
固定定位 fixed 永远相对于浏览器 不占位置（脱标）

元素的层级关系

开发者有时候需要设置元素的层级关系，层叠是谁在上面

标准流、浮动、定位的层级关系

两个盒子之间的比较

1
2
三种层叠关系：
标准流 < 浮动 < 定位（相对、绝对、固定）

定位的层级关系

总结：

  • 三者的层叠关系相同，HTML中写在下面元素的覆盖上面的

  • 可以通过 z-index 属性手动设置定位元素的层级关系

    取值：没有单位的数字

    效果：数值越大，层级越高

垂直对齐方式（vertical-align）

在开发中可能会遇到行内块元素垂直对齐的问题，此时可以使用 vertical-align 属性让图片

问题： 当图片和文字在一行中显示时，其实底部是不对齐的！

图片和文字底部对齐怎么做？

q1

解决方法：

此时可以给图片设置 vertical-align:bottom; 即可

vertical-align 就是用来设置行内/行内块元素垂直对齐的问题的

取值：

  • baseline：基线对齐
  • top：顶部对齐
  • middle：中线对齐
  • bottom：底部对齐

项目中可以使用 vertical-align 解决的bug：

  • 场景1 : 文本框（text）和表单按钮（button）无法对齐问题；
  • 场景2 : input 和 img无法对齐的问题；
  • 场景3 : div里放一个文本框 ，此时文本框无法靠顶；
  • 场景4：div有img标签撑开，此时img标签下方有间隙（给img标签设置vertical-align即可）；
  • 场景5 : 使用line-height让img标签垂直居中，需要给img标签单独设置vertical-align：middle

注意点：

在学习完浮动之后，就不推荐优先使用行内块元素让div一行中显示，因为会出现垂直对齐的问题，以后优先使用浮动完成效果

溢出内容效果（overflow）

设置盒子内容超出部分的显示效果

取值：

  • visible：超出部分可见（默认值）
  • hidden：超出部分隐藏
  • scroll：显示滚动条
  • auto：根据内容的多少，自动显示或者隐藏滚动条

CSS三种隐藏方式

CSS中有三种与隐藏相关的属性，需要知道他们之间的区别

内容超出隐藏 overflow:hidden；

盒子内容超出部分隐藏

注意： 隐藏的元素的超出内容，元素本身可见

元素隐藏 visibility：hidden；

让元素隐藏，但在页面中仍然占位置 → 相当于穿上了隐形斗篷

注意：让元素隐藏，并且占位置

元素隐藏 display：none；

让元素隐藏，并且在页面中不占位置 → 相当于把元素删除了

注意：让元素隐藏，并且不占位置

CSS三种隐藏方式总结

属性 作用 特点
overflow：hidden; 超出内容隐藏 超出盒子部分的内容隐藏
visibility：hidden; 元素本身隐藏 在页面中占位置
display：none; 元素本身隐藏 在页面中不占位置

html 标签的嵌套规范（了解）

块级元素一般用于布局：比如div在页面的布局用的最多；

行内元素一般用于放文字：比如span、a标签里面一般放文字

标签之间是不能随意嵌套的，书写的时候应该有对应的规范：

注意点：

  • 行内元素一般放文字或者行内元素，但是a标签之间不能互相嵌套（会被浏览器解析成两个a标签）；

  • 块级元素相当于一个容器，里面可以放文字、行内元素、块级元素，但是p标签不能嵌套块级元素（p标签会被拆分成两个p标签）

    p标签作为一个段落标签，只有文字才会组成段落，所以p标签里面一般只放文字，不要放块级元素！！！

拓展（了解）

字符间距（letter-spacing）

默认情况下，页面中的文字都是紧挨着的，但是有少数情况下，我们也可以让文字之间的距离变大一点

文字有英文和中文

效果演示：

letterspancing

作用：设置文本中字符（中文汉字/英文字母）之间的距离

代码： letter-spacing: 20px;

取值： 可以是不同单位的数值，允许使用负值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div p {
      letter-spacing: 20px;
    }
  </style>
</head>
<body>
  <div>
    <p>hello world! 来啦老弟！</p>
    <!-- letter spacing：设置的是字符间距，英文即字母之间的间距，中文即文字之间的间距 -->
  </div>
</body>
</html>

单词间距（word-spacing）

对于英文来说，有的时候还需要设置单词之间的距离，这个怎么操作呢？

其实，英文单词之间的距离，指的得就是空格的宽度

效果：

wordspacing

代码： word-spacing: 20px;

取值： 可以是不同单位的数值，允许使用负值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div p{
      word-spacing: 20px;
    }
  </style>
</head>
<body>
  <div>
    <p>hello world! 来啦 老弟！</p>
    <!-- word spacing：设置的是单词间距，一般只会用在英文中，对于中文来说，可以看做是段落中空格的间距 -->
  </div>
</body>
</html>