基础班day08笔记

发表于
字数统计: 2.2k | 阅读时长 ≈ 7

学习目标

  • 了解margin合并与塌陷现象（相邻块元素垂直外边距的合并，嵌套块元素垂直外边距的塌陷）
  • 能够说出解决margin塌陷的几种方式
  • 理解浮动的作用及特点（解决上下盒子 可以水平布局的问题，脱标）
  • 能够说出几种清除浮动的方式（额外标签法、overflow、伪元素清除浮动）
  • 能够使用浮动完成导航案例
  • 能够说清除浮动的目的（消除浮动对之后元素的影响）

理解上课的知识点

margin的特殊现象

marign的合并现象

正常情况下：比如当两个盒子水平布局时，左右的margin会叠加；

但是当两个盒子垂直布局时，会出现合并现象（两者之间的距离取最大值）

正常现象：

比如：当两个盒子水平布局时，左右的margin会叠加，盒子之间的距离为margin的和。

合并现象：

当两个盒子垂直布局时，上下的margin会合并，盒子之间的距离为margin的最大值

相邻元素合并

合并现象解决方案： 避免就好了

上下盒子的margin距离，只给其中一个设置即可

margin的塌陷现象（重要）

互相嵌套的块级元素，垂直外边距会塌陷

塌陷现象：

互相嵌套的块级元素，如果给子元素设置margin-top，此时父元素会一起往下移动！！！

垂直元素合并

塌陷现象解决方案：

  • 给父盒子加一个边框

    相当于给老父亲添加一块钢板

  • 给父盒子加 padding-top

    相当于给老父亲添加一层泡沫

  • 给父盒子设置属性 overflow: hidden （该属性触发了父盒子的BFC：块级格式化上下文）

    触发父盒子的BFC可以解决塌陷问题

  • 给父盒子设置浮动

  • 给父盒子设置为行内块

伪元素

顾名思义：假的元素

对比：

  • 元素：指的是页面中HTML标签

  • 伪元素：假的HTML标签

    伪元素是由CSS代码模拟的一个HTML标签 不是真的HTML标签

学习伪元素的时候，可以就当做学习两个新标签来看。

种类：

常见的有2种

  • ::after(在...之后) ：在标签里面的最后，添加一个伪元素
  • ::before(在...之前) ：在标签里面的最前，添加一个伪元素
ヾ(๑╹◡╹)ﾉ”div里面放一个span标签，然后用伪元素模拟效果

after

注意点：

  • 使用伪元素有一个必加属性 content:'';

    content属性值里写标签里面的问题

  • 伪元素默认是行内元素

浮动

浮动初体验

解决盒子水平布局的问题

需求：在页面上有两个div，在一行中显示，一个靠左，一个靠右

fu1

解决方法：

  • 先转换成行内块元素，再使用marign移动div的位置

    但是缺点是：当改变浏览器大小的时候，效果就崩了。

  • 其实有一个css属性就是为了完成这个效果的→浮动

浮动的代码：

  • float:left; →左浮动
  • float:right; →右浮动

此时我们就可以使用浮动完成需求了

浮动的特点（了解）

重点在于浮动的使用

标准流：就是浏览器默认摆放盒子的顺序（从上往下、从左往右）

浮动的特点：

  • 浮动的元素会脱离标准流（脱标）

    可以把标准想象成地面

    • 相当于飘起来了

      相当于飘到了空中

    • 在标准流中不占位置

      在地面中不占位置→地面中之后的元素会往上跑

    hehe1

  • 浮动的元素会覆盖在标准流的元素之上

    • 比标准流高出半个级别

      之后学习的定位比标准流高出一个级别

      fu3

  • 浮动的规则：浮动找浮动

    浮动元素排列的时候，会找上一个浮动元素的后面

    fufu1

  • 浮动的重点：浮动的元素只会影响下面的元素

    浮动的元素受到上一个盒子边界的限制（块级元素独占一行）

    .png)

  • 浮动的元素有特殊的显示效果

    • 可以设置宽高

    • 一行可以显示多个

      注意：浮动元素不能使用text-align或者margin：0 auto居中！

记忆 : 

1
2
3
1. 浮动元素会脱标 ==> 飘起来了（不占位置） ==> 比标准流高半个级别
2. 浮动元素会受到上一个盒子边界的影响
3. 浮动元素可以设置宽高，一行可以显示多个

浮动的案例

浮动完成页面的布局

布局

SEO导航

之前直接使用 a 标签 display：inline-block制作导航是有问题的

问题：

  • 导航与导航之间应该是列表关系，按照标签语义化的要求，必须要用到 ul 标签
  • a 标签不用其他的标签包裹起来，搜索引擎在查看页面时，认为该页面在作弊，会把排名靠后

所以导航必须要用 ul 和 li 将 a 标签包裹起来

seo导航

书写导航的步骤：

  1. 清除默认的margin和padding→初始化样式

  2. 找到ul，去除小圆点→ list-style:none;

  3. 给li标签设置 float：left 让li标签在一行中显示

  4. 给a标签设置宽高

    点击导航的四角应该也能跳转的，所以a标签应该有宽高

    问题来了：a标签是行内元素，默认不能设置宽高的，怎么办呢？

    方法：

    三种方法都可以

    • 给a标签设置 display: inline-block;

    • 给a标签设置 display: block;

      li标签是由a标签撑开的，所以a标签在自己的父元素li中就是独占一行的

    • 给a标签设置 float：left;

      因为浮动元素也是可以设置宽高的

清除浮动（清除浮动的影响）

浮动带来的问题：浮动元素撑不开父级容器

seo导航的问题

回顾之前写的SEO导航，存在一定的问题：

如果此时想在SEO导航下面写上一个红色的div，会发现

seoq

原因：

审查元素之后你会发现：因为li标签都是浮动了，在标准流中不占位置，所以不能把ul撑开，此时ul的高度为0。

这就是浮动带来的问题：ul没高度，影响了之后盒子的布局

那么如果解决浮动的问题呢？

我们可以通过清除浮动的方法来让ul有高度

清除浮动

清除浮动其实就是：清除浮动带来的影响（问题）

如：ul没有高度，我们需要清除这个影响→让ul有高度

浮动带来的影响（问题）：

当父元素没有设置高度，此时由子元素撑开。但是如果 子元素浮动了（相当于飘起来了→在标准流中不占位置），此时不能把父元素撑开（父元素高度为0）

清除浮动的方法（会用即可）

额外标签法

不推荐，会产生一个多余的盒子

步骤：

  1. 在父元素里面的最后的添加一个块级元素
  2. 给添加的块级元素设置清除浮动的核心代码 clear:both;

缺点： 需要在页面中添加额外的标签，让页面的HTML结构变得更加复杂

使用 overflow 清除浮动

在某些特定场景下使用不了

步骤：

  • 直接给父元素设置 overflow:hidden;

单伪元素清除法

其实原理和额外标签法一样，使用伪元素替代了HTML标签

代码：

一般伪元素清除法会使用 .clearfix 这个类名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.clearfix::after {
    /*伪元素必加的属性*/
    content: '';
    /*转换为块级元素*/
    display: block;
    /*清除浮动的核心代码*/
    clear: both;

    /*其实有上面三个属性已经可以生效了，但是可能在开发的时候，会有额外的几个属性！！*/
    /*目的：在页面中看不到伪元素*/
    height: 0;
    line-height: 0;
    visibility: hidden;
}

伪元素由CSS渲染，不会增加额外的html标签（解决了额外标签法的缺点）

设置高度

简单粗暴，但是不推荐，不利于后期维护

步骤：

  • 直接给父元素设置高度

浮动最开始的作用

浮动最开始的作用是为了将网页做成报纸那样的图文环绕效果

图文环绕：

tuwen

ヾ(๑╹◡╹)ﾉ”网页头部案例~

拓展

行内元素margin和padding的失效

行内元素的上下margin和padding会失效

ヾ(๑╹◡╹)ﾉ”上面两个span，下面有个p标签~

现象：

margin

  • 行内元素的margin

    • 左右的margin能生效

    • 上下的margin会失效！！

      没有作用

  • 行内元素的padding

    • 左右的padding能生效
    • 上下的padding会失效

注意：

  • 块级元素和行内块元素的margin和padding随便使用！没问题
  • 行内元素的上下margin和上下padding会失效！！开发中不要使用！！