CSS总结（下）-阿里云开发者社区

CSS总结（下）

2022-11-22 111

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS总结（下）

10、CSS3的过渡效果(transition)

transition(过渡)	属性、秒数、函数、延迟
属性	`transition-property`
秒数	`transition-duration`
函数	`transition-timing-function`
延迟	`transition-delay`
设置旋转点(x,y)	`transform-origin`

文章详情：https://blog.csdn.net/weixin_45065754/article/details/123969613

11、CSS3的动画效果(animation)

文章详情：https://blog.csdn.net/weixin_45065754/article/details/123970833

12、CSS3的flex布局（弹性布局、弹性盒子布局）

12.1、flex布局基础知识

flex布局	基础知识
`display:flex`	元素变成一个flex容器
容器内部的元素	叫做flex元素或者flex项目(flex-item)，默认不换行，高度占100%
优点	比浮动布局更简洁，更易于维护

12.2、flex-direction属性（设置元素是横向还是纵向的）

`flex-direction`属性	设置元素(flex-item)水平垂直方向
`row(默认值)`	主轴为水平方向，起点在左端
`row-reverse`	主轴为水平方向，起点在右端
`column`	主轴为垂直方向，起点在上沿
`column-reverse`	主轴为垂直方向，起点在下沿

12.3、justify-content属性（设置元素水平对齐）

`justify-content`属性	设置元素(flex-item)左右对齐
`flex-start(默认值)`	左对齐
`flex-end`	右对齐
`center`	居中
`space-between`	两端对齐，间隔相等
`space-around`	两端对齐，间隔相等，最两边有间隔

12.4、align-items属性（设置元素垂直对齐）

`align-item`属性	设置元素高度是否占满
`stretch(延伸)（默认值）`	如果元素没有设置高度，将占满整个容器
`flex-start`	交叉轴（y轴）的起点对齐
`flex-end`	交叉轴（y轴）的终点对齐
`center`	交叉轴（y轴）的中点对齐

12.5、flex-grow属性（放大元素比例，默认为0）

/* 5、flex-grow属性:定义元素放大比例，默认值为0，空间充足时，为1时等比例补全 */
  flex-grow: 0;
/* 5.1、元素占比为3 */
  flex-grow: 3;

12.6、flex-shrink属性（缩小元素比例）

/* 6、flex-shrink属性：缩小元素比例 */
  /* 如果项目宽度大于容器，不会溢出，会等比例缩放 */
  flex-shrink: 2;

12.7、aligin-self属性（跟align-item属性一样，设置【单个元素】垂直对齐）

/* 7、多个样式：flex:flex-grow、flex-shrink、flex-basis(auto) */
  flex: 2;
/* 8、align-self属性跟algin-item属性是一样的 */
  align-self: center;

12.8、通过flex布局实现元素水平垂直居中：

<!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>
    * {
      padding: 0px;
      margin: 0px;
    }
    body,
    html {
      height: 100%;
    }
    .container {
      background-color: antiquewhite;
      height: 100%;
      display: flex;
      /* 水平居中 */
      justify-content: center;
      /* 垂直居中 */
      align-items: center;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      /* 单个垂直居中 */
      align-self: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>
</html>

文章详情：https://blog.csdn.net/weixin_45065754/article/details/123977818

13、CSS3的grid布局（网格布局）

13.1、flex布局与grid布局的区别

`display`布局类型	区别
flex（弹性布局）	一维布局（行或列）
grid（网格布局）	二维布局（行或列）
优点	grid实现网页布局，会更加方便快捷，但现在浏览器兼容还不够完善

13.2、grid容器属性

13.3、justify-items、align-items与justify-content、align-content`的区别：

一个是grid项目在单元格中的对齐方式，一个是单元格在整个grid容器中的对齐方式（content包含items）

13.4、grid元素属性

13.5、实例（利用grid实现网页布局）

13.5-1、效果：

13.5-2、源代码：

<!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>
    * {
      padding: 0px;
      margin: 0px;
    }
    body,
    html {
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 80% 20%;
      grid-template-rows: 15% 25% 25% 25% 10%;
    }
    .item {
      border: 1px solid black;
    }
    .header,
    .footer {
      grid-column: 1/3;
    }
    .aside {
      grid-row: 2/5;
      grid-column: 2/3;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item header">header</div>
    <div class="item docs">docs</div>
    <div class="item blogs">blogs</div>
    <div class="item vedios">vedios</div>
    <div class="item aside">aside</div>
    <div class="item footer">footer</div>
  </div>
</body>
</html>