前端基础(十六)_BFC、box-shadow（盒子阴影）、text-shadow（文字阴影）

news2025/7/19 9:24:45

什么是BFC？

1、块级格式化上下文，web页面可视化css视觉渲染的一部分，是页面中一个独立的渲染区域；
2、用于决定块盒子的布局和浮动相互影响范围的一个区域，可以改变父级元素的渲染规则；
3、无论里面怎么折腾在bfc里面不会影响外面的布局，独立的区域。

怎么生成BFC？

根元素
float：left | right
position:absolute | fixed
overflow:hidden | auto |scroll
display:inline-block

BFC特性

1、内部元素会在垂直方向上一个接一个去放置；
2、垂直方向上的距离由margin决定，属于同一个BFC的两个相邻元素的margin会发生重叠；
3、每一个元素的做外间距与包含块（父级）的左边界相接触，浮动也是如此；
4、BFC的区域不会与浮动元素区域重叠；
5、计算BFC的高度时，浮动子元素也会参与计算；
6、Bfc是页面上的一个隔离的独立的容器，容器中子元素不会影响到外面元素，反之亦然；

BFC解决的问题

1、外边距的折叠问题–避免margin值叠加问题
2、适应两栏或三栏布局 BFC的区域不会与浮动元素区域重叠；
自适应两栏布局–左侧宽度固定，右侧不设宽，侧右侧宽度自适应，随浏览器窗口的变化而发生变化
自适应三栏布局–左右侧宽度固定，中间不设宽，侧中间宽度自适应，随浏览器窗口的变化而发生变化
3、防止文字环绕 BFC的区域不会与浮动元素区域重叠；
4、清除浮动计算BFC的高度时，浮动子元素也会参与计算；

box-shadow（盒子阴影）

box-shadow:x轴偏移量、y轴偏移量阴影的羽化值阴影的大小阴影颜色内阴影（inset）|外阴影（默认值）
x 轴偏移量 --水平方向的偏移，正值向右偏，负值向左偏
y轴偏移量 --垂直方向的偏移，正值向下偏，负值向上偏
阴影的羽化值 --越大越模糊范围越大
阴影大小
内阴影（inset）
外阴影（默认）
注意：可以向一个元素中添加多个阴影，多组阴影之间用逗号隔开
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }


    .center {
      width: 500px;
      height: 100px;
      background-color: pink;
      color: #fff;
      /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
      box-shadow: 20px 10px 5px 10px red;
    }
  </style>
</head>

<body>
  <div class="center">center</div>
</body>

</html>

text-shadow（文字阴影）

text-shadow:x轴偏移量、y轴偏移量阴影的羽化值阴影颜色
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LiuQing</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }


    .center {
      width: 500px;
      height: 100px;
      background-color: pink;
      color: #fff;
      /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
      box-shadow: 20px 10px 5px 10px red;

      font-size: 30px;
      font-weight: bold;
      /* x轴偏移量、y轴偏移量 阴影的羽化值 阴影颜色 */
      text-shadow: 3px 3px 2px blue;
    }
  </style>
</head>

<body>
  <div class="center">我是文字</div>
</body>

</html>