CSS-布局与动效

CSS应用

CSS传统布局

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

浮动

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

特性

脱标: 脱离标准流, 不再占用原来的位置, 后面的盒子会向上跑
给浮动元素添加一个标准流的父元素以避免影响
改变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`	右侧偏移量，定义元素相对于其父元素右边线的距离

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

相对定位
参考自己在标准流中的相对位置偏移

div {
	width: 200px;
	hight: 200px;
	position: relative;
	top: 100px;
	left: 100px;
}

绝对定位
参考最近的带有定位的父级元素偏移, 不占据文档流

若父级没有定位, 则以浏览器左上角(初始包含块)为基点
若父级有定位, 则以父元素的(包含块)左上角为基点

固定定位
参考浏览器可视窗口偏移, 不占据文档流, 不随滚动而移动

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>

注意:

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

不设置宽度: width默认值是auto(由内容撑开)
占据主轴空间的初始值的计算优先度: 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动画包括两个部分：

描述动画的样式规则: animation(动画播放器)
用于指定动画开始、结束以及中间点样式的关键帧: @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>

posted @ 2024-10-24 20:28 Khru 阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部

khrushchefox