面了这么多天，该做总结了-CSS篇(四)

滚去睡觉
920 阅读4分钟

浅聊一下

书接上文，我们聊过了如何做水平垂直居中、视差滚动效果实现和显示一个小于10px的文字的方式，本篇将继续总结面试遇到的其他css问题...

css面试系列

面了这么多天，该做总结了-CSS篇(一) - 掘金 (juejin.cn)

面了这么多天，该做总结了-CSS篇(二) - 掘金 (juejin.cn)

面了这么多天，该做总结了-CSS篇(三) - 掘金 (juejin.cn)

面试了这么多天，觉得一个人的力量还是太过薄弱，如果你和我一样有向前冲的勇气，欢迎掘友们私聊我交流面经（wechat: LongLBond）

说说flex Box

阅读完前三篇内容，我想吗应该明白这个问题该从哪儿答起...

  1. 是什么？

是一种布局方式，可以简便完整响应式的实现页面布局，容器中默认存在两条轴，主轴，交叉轴，默认x轴为主轴，可以用flex-direction来改变主轴方向

  1. 特征

先设置一个列表，让ul为弹性容器，display:flex

<!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>
        ul{
            display: flex;
            
        }
        li{
            font-size: 20px;
            color: #FFFFFF;
            list-style: none;
            width: 200px;
            height: 100px;
          
        }
        li:nth-child(1) {
            background-color: rgb(61, 61, 168);;
        }
        li:nth-child(2) {
            background-color: rgb(232, 59, 108);;
        }
        li:nth-child(3) {
            background-color: rgb(104, 230, 123);;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

效果如图

image.png

  • 可以控制子元素在主轴上的对齐方式

通过设置 justify-content属性可以控制子元素在主轴上的对齐方式

  1. flex-start：子元素向主轴起始位置对齐。
  2. flex-end：子元素向主轴末尾位置对齐。
  3. center：子元素在主轴上居中对齐。
  4. space-between：子元素均匀分布在主轴上，首个元素位于起始位置，末尾元素位于末尾位置。
  5. space-around：子元素均匀分布在主轴上，两侧留有相同的空白间隔。

效果依次为

image.png

image.png

image.png

image.png

image.png

  • 可以控制子元素在交叉轴上的对齐方式（注意此时要给父容器一个高度，在这里我加上了一个背景色）
  1. flex-start：子元素向交叉轴起始位置对齐。
  2. flex-end：子元素向交叉轴末尾位置对齐。
  3. center：子元素在交叉轴上居中对齐。
  4. baseline：子元素按照它们的基线对齐。
  5. stretch：子元素被拉伸以填充整个交叉轴。

image.png 效果依次为

image.png image.png

image.png image.png image.png

-可以控制子元素缩放比例 排列方式

  1. flex-grow：指定子元素在剩余空间分配时的放大比例，默认为 0，表示不放大。
  2. flex-shrink：指定子元素在空间不足时的缩小比例，默认为 1。
  3. flex-basis：指定子元素在主轴上的初始大小。

当给一个li设置flex-grow为1时，除了其他的li占据的宽度都是他的

image.png

当给一个li设置flex-shrink为2时，在页面宽度不够导致缩小时，li的缩小倍数是其他li的两倍

image.png 当给一个li设置flex-basis为50%时，这个li初始值占据50%

image.png

  1. 应用场景
  • 多栏布局
  • 居中

css画一个三角形

要用css画一个三角形，主要是通过他的边框属性来完成

<!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>
        .triangle {
            width: 0;
            height: 0;
            border-width: 200px;
            /* 控制三角形大小 */
            border-style: solid;
            border-color: blue black red aqua;
            /* 控制三角形颜色 */
        }
    </style>
</head>

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

</html>

此时页面效果如下

image.png

我们只需要改变边框的颜色就可以制造出不同朝向的三角形

 .triangle {
            width: 0;
            height: 0;
            border-width: 200px;
            /* 控制三角形大小 */
            border-style: solid;
            border-color:white white red white;
            /* 控制三角形颜色 */
        }

image.png

css3新增了哪些属性

  1. 选择器：属性选择器、伪类选择器
  2. box-shadow
  3. background-clip 裁剪
  4. transition 过渡动画
  5. transform
  6. animation 纯动画
  7. 渐变色 linear-gradient

css3中常见的动画有哪些？怎么实现？

  1. transition 当其他属性值发生变更时，控制该值变更所花费的时间和变更曲线
  2. transform 用于做容器的旋转、缩放、倾斜、平移等动画
  3. animation 控制容器动画的关键帧

来一个实现例子

结尾

更多精彩，请看下集...

avatar
文章
阅读
粉丝