前端面试之 - CSS3的新东西【未更新完】

最新推荐文章于 2024-08-26 17:02:51 发布

lvhanghmm

最新推荐文章于 2024-08-26 17:02:51 发布

阅读量326

点赞数

文章标签： css html css3 html5 javascript

本文链接：https://blog.csdn.net/Lv__Hang/article/details/119557709

版权

sCSS3 被拆分为"模块"。旧规范已拆分成小块，还增加了新的。

一些最重要 CSS3 模块如下：

选择器

CSS3框大小

也就是display: flex;和他的朋友们！最好的两个朋友应该是justify-content和align-items

使用 CSS3 box-sizing 属性

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .noBoxSizing {
            height: 200px;
            width: 200px;
            padding: 10px 10px;
            background-color: pink;
        }
        .boxSizing {
           box-sizing: border-box;
            height: 200px;
            width: 200px;
            padding: 10px 10px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div class="noBoxSizing">
XZ
</div>
asa
<div class="boxSizing">
asxS
</div>
</body>
</html>

背景和边框
文字特效

2D/3D转换

2D

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

transform: `【相应的属性!】`

rotate(30deg):rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #myTest {
            width: 200px;
            height: 200px;
            background-color: #0eb4dd;
            margin-top: 100px;
            /*让元素顺时针旋转30度【负的度数就是逆时针旋转】*/
            transform: rotate(30deg);
        }
    </style>
</head>
<body>
<div id="myTest">
</div>
<script>

</script>
</body>
</html>

scale(2, 3); : scale(2,3)转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #myTest {
            width: 200px;
            height: 200px;
            background-color: #0eb4dd;
            margin-top: 100px;
            transform: scale(2,3);
        }
    </style>
</head>
<body>
<div id="myTest">
    lvhanghmm
    lvhanghmm
    lvhanghmm
    lvhanghmm
    lvhanghmm
    lvhanghmm
</div>
<script>

</script>
</body>
</html>

原图：

效果图：

3D

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

使用这两个元素的时候只能单独使用欧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #myTest {
            width: 200px;
            height: 200px;
            background-color: #0eb4dd;
            margin-top: 100px;
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<div id="myTest">
    lvhanghmm
    lvhanghmm
    lvhanghmm
    lvhanghmm
    lvhanghmm
    lvhanghmm
</div>
<script>

</script>
</body>
</html>

动画

过渡动画

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition：变化的属性 花费时间 运动曲线 何时开始； */
            /*如果想要写多个属性，利用逗号进行分割*/
            /* transition: width 1s,height 1s; */
            /* 如果想要多个属性都变化，属性写a11就可以了| */
            /*谁做过渡，给谁加*/
            transition: all 1s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

动画

CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 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>
        /*我们想页面一打开，一个盒子就从左边走到右边*/
        /*1.定义动画了*/
        @keyframes move  {
            /*开始状态*/
                0%{
                    transform: translate(0px);

            }
            /*结束状态*/
            100% {
                transform: translate(1000px);
            }
        }

       div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*2.调用动画*/
        /*动画名称*/
        animation-name: move;
        /*持续时间*/
        animation-duration: 3s;



       }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

动画序列：

<!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>
        /* from 和to等价于e%和180% */
        /* @keyframes donghuaxulie {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        } */

        /* 1.可以做多个状态的变化 keyframe 关键帧 */
        /*2.里面的百分比要是整数|*/
        /* 3.里面的百分比就是总的时间(我们这个案例3s)的划分  25% * 3=  0.75s*/

        @keyframes donghuaxulie2{
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);
            }
            50% {
                transform: translate(1000px, 1000px);
            }
            75% {
                transform: translate(0,1000px);
            }
            100% {
                transform: translate(0, 0);
            }
        }


        /*动画序列*/
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: donghuaxulie2;
            animation-delay: 3s;
            animation-duration: 5s;
            
            animation-iteration-count: infinite;
            animation-direction: alternate;
            /* animation-name: donghuaxulie;
            animation-duration: 3s; */
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

多列布局

column-count ：属性指定了需要分割的列数。

以下实例将

元素中的文本分为 3 列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3</title>
    <style>
        .newspaper {
            column-count: 3;
        }
    </style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。</p>

<div class="newspaper">
    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>
</body>
</html>

column-gap: 属性指定了列与列间的间隙。

以下实例指定了列与列间的间隙为 40 像素：

.newspaper {
            column-count: 3;
            column-gap: 60px;
        }

column-rule-style 属性指定了列与列间的边框样式：column-rule-width 属性指定了两列的边框厚度: column-rule-color 属性指定了两列的边框颜色：

<style>
        .newspaper {
            column-count: 3;
            column-gap: 60px;
            column-rule-style: solid;
            column-rule-width: 10px;
            /*下面这个属性用不了！*/
            column-style-color: lightblue;
        }
    </style>

column-rule 属性是 column-rule-* 所有属性的简写。

以下实例设置了列直接的边框的厚度，样式及颜色：

.newspaper {
            column-count: 3;
            column-gap: 60px;
            column-rule: 1px solid #f01f7a;
        }

用户界面

CSS3中，resize属性指定一个元素是否应该由用户去调整大小。

这个 div 元素由用户调整大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3</title>
    <style>
        .newspaper {
            border: 1px solid pink;
            padding: 10px 40px;
            resize: both;
            overflow: auto;
        }
    </style>
</head>
<body>

<div class="newspaper">
    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”
</div>
</body>
</html>

CSS3图片

响应式图片

响应式图片会自动适配各种尺寸的屏幕。

实例中，你可以通过重置浏览器大小查看效果:
如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<img src="https://www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="">
</body>
</html>

CSS3 弹性盒子(Flex Box)

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

请移步！

lvhanghmm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端面试之 - CSS3的新东西【未更新完】

目录sCSS3 被拆分为"模块"。旧规范已拆分成小块，还增加了新的。CSS3框大小使用 CSS3 box-sizing 属性2D/3D转换2Dtransform: 【相应的属性!】3D动画过渡动画动画CSS3 @keyframes 规则多列布局column-count ：属性指定了需要分割的列数。column-gap: 属性指定了列与列间的间隙。column-rule-style 属性指定了列与...
复制链接

扫一扫