Welcome to my b|
收藏闪存小组博问

Khru

园龄：2年11个月粉丝：22关注：1

📂Front-end
🔖CSS笔记
2024-10-24 20:28阅读: 9评论: 0推荐: 0

CSS-布局与动效

CSS应用

CSS传统布局

  • 标准流(普通流, 文档流): 按书写顺序排列
  • 浮动
  • 定位
  • Flexbox和Grid (自适应布局)

浮动

选择器 {float: left/right;}: 创建浮动框, 将其移动到一边, 直到边缘碰到块或另一个浮动框的边缘. 只会在父元素的内部移动

特性

  1. 脱标: 脱离标准流, 不再占用原来的位置, 后面的盒子会向上跑
    给浮动元素添加一个标准流的父元素以避免影响
  2. 改变display: 任何元素都可以浮动. 浮动元素会生成一个块盒, 而不论它本身是何种元素
    生成的块盒和行内块相似: 同在一行显示, 可以设置宽高

应用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        height: 100vh;
        min-width: 600px;
      }
 
      .top-nav {
        height: 50px;
        background-color: #eee;
      }
      .main-container {
        width: 100%;
        height: calc(100% - 50px);
        background-color: #ccc;
      }
      .logo {
        float: left;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
      }
      .main-nav {
        float: right;
      }
      .main-nav ul {
        list-style: none;
      }
      .main-nav ul li {
        display: inline-block;
        padding: 0 20px;
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <!-- 头部 -->
    <header class="top-nav">
      <div class="logo">logo</div>
      <nav class="main-nav">
        <ul>
          <li>首页</li>
          <li>关于</li>
          <li>产品</li>
          <li>案例</li>
        </ul>
      </nav>
    </header>
    <!-- 主体 -->
    <main class="main-container"></main>
  </body>
</html>

清除浮动

父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子

  • ::after伪元素: 在选定元素的实际内容之后插入内容
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .article {
        /* article的高度不确定, 由最高的子元素撑开 */
      }
      .left {
        float: left;
        width: 200px;
        background-color: skyblue;
      }
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: pink;
      }
      footer {
        background-color: lightgreen;
      }
      /* ::after 的作用就是在元素的内部最末尾添加一个元素 */
      .clearfix::after {
        display: block;
        content: '';
        clear: both;
      }
      /*
      .clearfix {
      overflow: hidden; /* auto */
      }
      */
    </style>
  </head>
  <body>
    <article class="article clearfix">
      <div class="left">
        Lorem
        possimus
        Distinctio
      </div>
      <div class="right"></div>
      <!-- <div class="clearfix"></div> -->
    </article>
    <footer>©2023 华农</footer>
  </body>
</html>

定位

定位 = 定位模式 + 边偏移

定位模式包括:

  • 相对定位: position: relative
  • 绝对定位: posistion: absolute
  • 固定定位: position: fixed

边偏移包括

边偏移属性 示例 描述
top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离。
left left: 80px 左侧偏移量，定义元素相对于其父元素左边线的距离。
right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。

  1. 相对定位
    参考自己在标准流中的相对位置偏移
div {
	width: 200px;
	hight: 200px;
	position: relative;
	top: 100px;
	left: 100px;
}
  1. 绝对定位
    参考最近的带有定位的父级元素偏移, 不占据文档流
  • 若父级没有定位, 则以浏览器左上角(初始包含块)为基点
  • 若父级有定位, 则以父元素的(包含块)左上角为基点
  1. 固定定位
    参考浏览器可视窗口偏移, 不占据文档流, 不随滚动而移动

z-index: auto | <integer> | inherit;

在使用定位布局时，可能会出现盒子重叠的情况

加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序

  • auto：这是默认值，表示元素不创建一个新的堆叠上下文，其堆叠级别由其在文档中的位置决定。

  • <integer>：这是一个整数值，可以是正数、负数或零。正数越大，元素在堆叠上下文中的位置越靠上；负数越小，元素的位置越靠下。

  • inherit：表示继承父元素的 z-index 值。

堆叠上下文:

父元素创建堆叠上下文时, 其子元素只在该上下文中进行堆叠;

父元素不创建堆叠上下文,其子元素将相对于父元素的兄弟元素进行堆叠.

Flex布局

CSS一维(水平/垂直)布局方案, 借助平面直角坐标系

  • 水平轴: 主轴
  • 垂直轴: 交叉轴

flex容器

display: flex

flex容器控制

  • 轴(主轴/交互轴)

  • 项目的排序方式, flex项目沿主轴排列

  • 项目的排序顺序

  • 项目的位置

  • flex-direction, 确定主轴方向

    • row(默认值): 水平方向, 从左到右
    • column: 垂直方向, 从上到下
    • row-reverse: 水平方向, 从右到左
    • column: 垂直方向, 从下到上

  • flex-wrap, 控制是否换行

    • nowrap(默认值): 不换行
    • wrap: 换行

  • justify-content, 控制主轴上flex项目的对齐方式

    • flex-start(默认值): 左对齐
    • flex-end: 右对齐
    • center: 居中排列
    • space-between: 两端对齐，项目之间的间隔都相等
    • space-around: 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
    • space-evenly: 均分对齐

  • align-items, 控制交叉轴上flex项目的排列方式

    • center: 交叉轴上居中

flex项目

flex容器中的第一层子元素就是flex项目(item)

  • flex-grow:
    • 定义项目的放大比例，即如果存在剩余空间，项目应该放大的比例。
    • 默认值为0，即即使有剩余空间，项目也不会放大。
    • 示例：flex-grow: 1;
  • flex-shrink:
    • 定义项目的缩小比例，即如果空间不足，项目应该缩小的比例。
    • 默认值为1，即如果空间不足，项目将等比例缩小。
    • 示例：flex-shrink: 0;（表示项目不会缩小）
  • flex-basis:
    • 定义项目在分配多余空间之前，占据的主轴空间（main size）。
    • 默认值为auto，即项目的本来大小。
    • 可以设置为长度值，如100px或者百分比。
    • 示例：flex-basis: 150px;
  • flex:
    • 是flex-grow, flex-shrink, 和 flex-basis的简写形式。
    • 默认值是0 1 auto，后两个属性可选。
    • 示例：flex: 1 1 auto; 或者 flex: 1;（相当于flex: 1 1 0%;）
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-around;
        height: 200px;
      }
 
      .flex-item {
        width: 100px;
        height: 100px;
        background-color: tomato;
        margin: 5px;
      }
 
      .flex-item:first-child {
        order: 2; /* 改变排列顺序 */
      }
 
      .flex-item:nth-child(2) {
        flex-grow: 1; /* 放大比例 */
      }
 
      .flex-item:nth-child(3) {
        flex-shrink: 0; /* 不缩小 */
        flex-basis: 150px; /* 设置基础尺寸 */
      }
 
      .flex-item:nth-child(4) {
        align-self: flex-end; /* 单独对齐方式 */
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">1</div>
      <div class="flex-item">2</div>
      <div class="flex-item">3</div>
      <div class="flex-item">4</div>
    </div>
  </body>
</html>

注意:

  1. 不设置高度: height默认值是auto(占满整个交叉轴)

    不设置宽度: width默认值是auto(由内容撑开)

  2. 占据主轴空间的初始值的计算优先度: flex-basis > width > 内容撑开

动画与效果

过渡

transition: 属性 时长 缓动函数

  • 属性: 可以是具体的某个属性, 或者是全部(all)

  • 时长: 变化持续时间

  • 缓动函数:

    • ease: 相对于匀速，中间快，两头慢
    • ease-in: 相对于匀速，开始的时候慢，之后快
    • ease-out: 相对于匀速，开始时快，结束时候间慢
    • ease-in-out: 开始慢, 中间加速, 结束慢
    • linear: 一直匀速
<!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>Document</title>
    <style>
      #box {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        transition: width 1s ease-in-out;
      }
      #box:hover {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

变换

基础二维变换主要包括

  • 平移
  • 缩放
  • 旋转

平移

transform: translate()

  • translateX沿x轴(水平)方向移动
  • translateY沿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>Document</title>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        transform: translate(100px, 100px);
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

缩放

transform: scale

<!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>Document</title>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        transition: all 1s ease;
      }
      #box:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

旋转

transform: rotate

<!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>Document</title>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        transition: all 0.5s ease;
      }
      #box:hover {
        transform: rotate(180deg);
      }
    </style>
  </head>
  <body>
    <div id="box">内容</div>
  </body>
</html>

动画

CSS动画包括两个部分：

  1. 描述动画的样式规则: animation(动画播放器)
  2. 用于指定动画开始、结束以及中间点样式的关键帧: @keyframes(动画内容)

animation

  • name: 动画名称
  • duration: 动画持续时间
  • easing-function: 缓动函数
  • delay: 延迟
  • count: 次数(infinite)
  • direction: 播放方式，如 normal、reverse、alternate、alternate-reverse 等
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        animation: move 3s ease 0s infinite alternate;
      }
      @keyframes move {
        0% {
          transform: translateX(0px);
        }
        100% {
          transform: translateX(100px);
        }
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

本文作者：Khru

本文链接：https://www.cnblogs.com/khrushchefox/p/18500406

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Khru  阅读(9)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
评论
收藏
关注
推荐
深色
回顶
收起