首页 > 其他分享 >CSS应用

CSS应用

时间：2024-10-24 20:20:51浏览次数：6  
标签：flex color 元素 100px height width 应用 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 ipsum dolor sit amet consectetur adipisicing elit. Accusantium,
        possimus? Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Distinctio consectetur obcaecati provident placeat facilis, totam quasi
        quia eligendi odit, nemo vitae labore magni consequuntur tenetur autem.
        Inventore dolores voluptas unde assumenda quibusdam sit labore, earum
      </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>

标签：flex,color,元素,100px,height,width,应用,CSS
From： https://www.cnblogs.com/khrushchefox/p/18500406

相关文章

  • AI模型架构如（CNN）、（RNN）（LSTM、GRU）、（如BERT、GPT等）在不同领域中的具体应用
    AI模型架构如卷积神经网络（CNN）、循环神经网络（RNN）及其变体（如LSTM、GRU）、以及基于Transformer架构的模型（如BERT、GPT等）在现实生活中有广泛的应用。以下是这些模型在不同领域中的具体应用和形态表现：一、卷积神经网络（CNN）1.图像分类应用案例：手机中的人脸识别、社交媒体中的自......
  • 【EKF、UKF、PF、EPF、UPF】改进的粒子滤波算法及其应用研究（Matlab代码实现）
      ......
  • 文通车牌识别相机在工地称重应用中的卓越表现
    在现代工地管理中，高效、准确的称重系统是确保工程顺利进行的关键之一。而文通车牌识别相机的出现，为工地称重应用带来了全新的解决方案。一、工地称重面临的挑战传统的工地称重方式往往存在着一些问题。人工记录车牌和重量信息容易出现错误，不仅效率低下，还可能导致数据不准......
  • 图像处理的实现与应用（Haskell 版）
    图像处理在现代技术中扮演着重要的角色，广泛应用于计算机视觉、图像分析和机器学习等领域。本文将介绍一种简单的图像处理方法，主要包括灰度转换、去除边框、提取有效区域和图像分割，并提供相应的Haskell代码示例。灰度转换灰度转换是将彩色图像转换为灰度图像的技术，目的是减少图......
  • 智慧城市综合管理应用服务平台
    随着信息技术的飞速发展，智慧城市已经成为推动城市现代化、提升城市管理效率和居民生活质量的重要途径。智慧城市综合管理应用服务平台作为智慧城市建设的核心组成部分，其建设内容涵盖了多个层面，本文将对其进行深度分析。一、平台建设的目标与定位智慧城市综合管理......
  • 图像处理的实现与应用（Ruby 版）
    图像处理在现代技术中扮演着重要的角色，广泛应用于计算机视觉、医学影像和机器学习等领域。本文将介绍一种简单的图像处理方法，主要包括灰度转换、去除边框、提取有效区域和图像分割，并提供相应的Ruby代码示例。灰度转换灰度转换是将彩色图像转换为灰度图像的技术，目的是减少图像......
  • 图像处理的实现与应用（Swift 版）
    图像处理在现代技术中扮演着重要的角色，广泛应用于计算机视觉、图像分析和机器学习等领域。本文将介绍一种简单的图像处理方法，主要包括灰度转换、去除边框、提取有效区域和图像分割，并提供相应的Swift代码示例。灰度转换灰度转换是将彩色图像转换为灰度图像的技术，目的是减少图像......
  • 过路车辆识别视频分析服务器智慧园区/智慧城市算法简介及应用
    视频分析服务器是一款集成了软硬件的一体化解决方案，它适用于城市管理部门、环境卫生、教育领域、水利工程、工业园区以及住宅小区等多个行业和场景。这款智能化的一体机设备为用户提供了高清视频监控的接入能力、智能视频分析、告警功能以及数据资源的共享服务。一、概要1、功能......
  • 实验3 C语言函数应用编程
    实验一#include<stdio.h>charscore_to_grade(intscore);intmain(){intscore;chargrade;while(scanf("%d",&score)!=EOF){grade=score_to_grade(score);printf("分数:%d,等级:%c\n\n",score,grade);......
  • 基于 Python 的机器学习模型部署到 Flask Web 应用：从训练到部署的完整指南
    目录引言技术栈步骤一：数据预处理步骤二：训练机器学习模型步骤三：创建FlaskWeb应用步骤四：测试Web应用步骤五：模型的保存与加载保存模型加载模型并在Flask中使用步骤六：Web应用的安全性考量示例：简单的输入验证示例：自定义错误处理示例：使用Flask-JWT-Extended进......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99