CSS 进阶

周巴帝

已于 2022-02-17 20:21:27 修改

阅读量780

点赞数 1

分类专栏： web 文章标签： css css3 html

于 2022-02-17 20:19:17 首次发布

本文链接：https://blog.csdn.net/Hello_super/article/details/122991128

版权

web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS 变形 transform

1、translateX/Y

**变形（transform）： ** 就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局。使用transform标签来设置元素的变形效果。

平移： 平移元素，百分比是相对于自身来计算的。

translateX()，沿着x轴方向平移；
translateY()，沿着y轴方向平移；
translateZ()，沿着z轴方向平移；

transform: translateX() translateY(); /*变形的多个值之间使用空格隔开*/

注意，在同一个元素的css样式中，只能出现一个transform，否则会出现transform覆盖的问题，所以在写transform变形时，要将所有的变形写到一个transform中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变形</title>
    <style>
        body{
            background-color: #F5F5F5;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin: 0 auto;
            margin-top: 100px;
            transform: translateX(50%);
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 0 auto;
        }
        .box3{

            display: inline;
            background-color: pink;
            /* 将元素在屏幕中间居中 */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
        .wrapper{
            width: 500px;
            height: 300px;
            margin: 50px auto;
        }
        .box4,.box5{
            width: 220px;
            height: 300px;
            background-color: #fff;
            float: left;
            /* 设置渐变 */
            transition: transform .2s;
        }
        .box4{
            margin-right: 60px;
        }
        .box4:hover,.box5:hover{
            /* 将元素上移4个像素 */
            transform: translateY(-4px);
            box-shadow: 0 0 20px rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <!-- <div class="box1"></div> -->
    <!-- <div class="box2"></div> -->
    <!-- <div class="box3">aaa</div> -->
    <div class="wrapper">
        <div class="box4"></div>
        <div class="box5"></div>
    </div>
    
</body>
</html>

2、translateZ

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近。z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看见效果，必须要设置网页的视距，通常我们是给html元素设置视距，且值一般是600~1200px之间，如下：

body{
    /*设置当前网页的视距为800px，人眼距离网页的距离*/
    perspective: 800px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transformZ</title>
    <style>
        body{
            perspective: 800px;
            border: 1px solid red;
            background-color: #f5f5f5;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            margin: 100px auto;
            /* 设置过渡效果 */
            transition:all 2s;
        }
        body:hover .box1{
            transform: translateZ(200px);
            
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

3、缩放

对元素进行缩放的函数：

scaleX()，水平方向的缩放；
scaleY()，垂直方向的缩放；
scale()，双方向的缩放；

/*元素在x轴与y轴上都同时变大。*/
transform: scale(2);

这里并没有介绍到关于Z轴的缩放，关于Z轴的缩放时，在3d环境下才能比较直观的看出来，使用的较少，这里不做详细的介绍，最后关于scale缩放练习代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缩放</title>
    <style>
        .introduce{
            width: 50%;
            margin: 0 auto;
            text-align: center;
            font-size: 20px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            margin: 50px auto;
            margin-bottom: 100px;
            /* 设置过渡效果 */
            transition: transform 2s;
        }
        .box1:hover{
            transform: scale(2);
        }
        .box2{
            width: 120px;
            height: 79px;
            margin: 0 auto;
            /* 当图片放大时，切除超过父元素的宽度 */
            overflow: hidden;
            box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        }
        /* 设置图片大小 */
        .box2 img{
            width: 120px;
            vertical-align: middle;
            transition: transform .5s;
        }
        /* 设置鼠标移入图片时，图片进行缩放的效果。 */
        .box2:hover img{
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="introduce">
        将鼠标放到以下元素上时，元素会进行缩放！
    </div>
    <div class="box1">
    </div>
    <div class="box2">
        <img src="../exercise/10_电影卡片/1.jpg" alt="">
    </div>
</body>
</html>

4、变形时的参考点

使用transform-origin可以指定变形时的原点，通常是两个值，可选值如下：

center，默认值，原点在元素的中间；
像素，如：transform: 0px 0px;参考值在元素左上角；

5、旋转

通过旋转可以使元素沿着x、y或z轴旋转指定的角度，设置的方式如下：

rotateX()，沿着X轴转动；
rotateY()，沿着Y轴转动；
rotateZ()，沿着Z轴转动；

其中的里面值的单位有：度（deg）、圈（turn），通常情况下我们还可以配合translateX/Y/Z来使用：

transform: translateX(100px) rotateY(180deg);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style>
        body{
            border: 1px solid red;
            perspective: 800px;
        }
        .box1{
            width: 320px;
            height: 320px;
            background-image: url('../exercise/img/13_旋转/an.gif');
            margin: 0 auto;
            vertical-align: middle;
            transition: all 2s;
            /* 影藏背景图片的背面 */
            backface-visibility: hidden;
        }
        body:hover .box1{
            /* transform: translateX(100px) rotateX(30deg); */
            transform: translateX(100px) rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

旋转的练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鸭子表</title>
    <style>
        .block-wrapper{
            width: 500px;
            height: 500px;
            margin: 20px auto;
            border-radius: 50%;
            background-image: url('../img/14/1024px-Analogue_clock_face.svg.png');
            background-size: cover;
            position: relative;
        }
        /* 时分秒在时钟中应该全部是居中的 */
        .block-wrapper > div{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        /* 设置时针 */
        .hour-wrapper{
            width: 50%;
            height: 50%;
            /* background-color: #bfa; */
            animation: run 3600s infinite linear;
        }
        .hour-wrapper .hour{
            width: 6px;
            height: 50%;
            background-color: black;
            margin: 0 auto;
        }
        /* 分针 */
        .minute-wrapper{
            width: 70%;
            height: 70%;
            animation: run 600s infinite linear;
        }
        .minute-wrapper .minute{
            width: 6px;
            height: 50%;
            background-color: black;
            margin: 0 auto;
        }
        /* 秒针 */
        .second-wrapper{
            width: 85%;
            height: 85%;
            animation: run 60s infinite steps(60, end);
        }
        .second-wrapper .secode{
            width: 6px;
            height: 50%;
            background-color: black;
            margin: 0 auto;
        }
        /* 指针旋转的关键帧 */
        @keyframes run {
            from{
                transform: rotateZ(0);
            }
            to{
                transform: rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="block-wrapper">
        <!-- 时针 -->
        <div class="hour-wrapper">
            <div class="hour"></div>
        </div>
        <!-- 分针 -->
        <div class="minute-wrapper">
            <div class="minute"></div>
        </div>
        <!-- 秒针 -->
        <div class="second-wrapper">
            <div class="secode"></div>
        </div>
    </div>
</body>
</html>

CSS less语言

1、css定义变量

原生的css也支持变量的定义，格式如下：

html{
    /*css 原生定义变量的格式：*/
    /*--变量名: 变量值;*/
    --color: #bfa;
    --lenght: 100px;
}

定义好变量之后，我们就可以元素的样式找那个使用这个变量，如下：

.box1{
    width: var(--length);
    height: var(--length);
    background-color: var(--color);
}

如上的代码，定义了一个宽、高个100px，背景颜色为#bfa的元素，以上代码等价于以下代码：

.box1{
    width: 100px;
    height: 100px;
    background-color: #bfa;
}

以上代码简单的展示了原生css定义变量的方法，但是这种方法存在最大的缺点就是兼容性不好，因而使用的很少，同样css中也支持函数自动计算的函数，如：calc()用于计算的函数，同样由于兼容性差的原因，使用的也比较少。

width: 80px; /*80px 等价于 calc(160px/2)*/
width: calc(160px/2);

2、less的简介

less是一门css的预处理语言，是一个css的增强版，通过less可以编写更少的代码实现更强大的样式。但是我们在使用less编写的代码时，浏览器并不能直接识别，这时我们就需要安装一个类似将less代码装换为浏览器可以认识的代码的插件，在VS_CODE中，我们可以添加easy less插件来进行翻译，注，在编写less脚本文件的时候，文件的后缀名是.less。

如，我们在less文件中编写如下代码，将代码保存后，会在同一个目录文件下自动生成与less文件同名的一个css文件，而这个css文件就是less转换器转换生成的。

less中的代码：

body{
    width: 100px;
    height: 100px;
    // 将body中的div的字体颜色设置为红色。
    // 注意，这里的这种写法在css文件是是不对的，但是在less文件中则可以正常被翻译。
    div{
        color: red;
    }
}

css中的代码：

body {
  width: 100px;
  height: 100px;
}
body div {
  color: red;
}

3、less语法

less中的单行注释是双斜杠，且less中注释的内容不会生成到css文件中，而/**/是css中的注释，也是less中的多行注释，它会被解析到生成的css中间中。

变量： 在变量中可以存储任意值，并且我们可以在需要是，任意的修改变量的值。变量的语法如下：

@变量名: 变量值; // 如：@a: 100px;

在使用变量时，如果是直接使用，则以 @变量名 的形式使用即可，如果作为类名，或者一部分值使用时，必须以 @{变量名} 的形式来使用，变量发生重名时，会优先使用比较近的变量，也可以在变量声明前就是用变量（不推荐，因为不好维护）。也可以将一个属性作为另个属性的值，只要在这个属性的前面加上一个$符号即可，如将width作为height的值，则为：height: $width;。

练习代码如下：

// 双斜杠是less中的注释，注释中的内容不会被解析到css文件中，而/**/是css中的注释，会被解析到css文件中。
.box1{
    background-color: #bfa;
    
    // box1 的子元素box2
    .box2{
        background-color: #ff0;

        // box2的子元素box4
        .box4{
            background-color: red;
        }
    }
    // box1的子元素box3，同时box3也是box2的兄弟元素
    .box3{
        background-color: orange;
    }
}

// 定义变量
@a: 100px;
@b: #bfa;
@c: box6; // 以类名作为变量值

// 在类中使用变量
.box5{
    width: @a;
    color: @b;
}
// 将变脸作为类名
.@{c}{
    width: @a;
    // 这里将变量作为一部分值，也需要使用@{变量名}这种方式。
    background-image: url('@{c}/1.png'); 
}

@d: 200px;
@d: 300px;

div{
    // 变量发生重名时，会优先使用比较近的变量
    @d: 115px;
    width: @d;
    // 在变量声明前就是用变量
    height: @e;
}
@e: 300px;

.box7{
    width: 100px;
    // 将一个属性值作为另一个属性的值。
    height: $width;
}

生成的css文件如下：

.box1 {
  background-color: #bfa;
}
.box1 .box2 {
  background-color: #ff0;
}
.box1 .box2 .box4 {
  background-color: red;
}
.box1 .box3 {
  background-color: orange;
}
.box5 {
  width: 100px;
  color: #bfa;
}
.box6 {
  width: 100px;
  background-image: url('box6/1.png');
}
div {
  width: 115px;
  height: 300px;
}
.box7 {
  width: 100px;
  height: 100px;
}

4、less父元素与扩展

&表示父元素选择器，元素使用:extend()进行扩展。

// 父元素
.box1{
    // 后代元素
    .box2{
        color: red;
    }
    // 子元素
    >.box3{
        color: yellow;
        &:hover{
            // &父元素选择器，即box3
            color: blue;
        }
    }
    // 父元素选择器
    // &表示父元素选择器，即box1
    &:hover{
        color: orange;
    }
    // &也可以写在后面，如：
    // 表示div下面的box1加载hover
    div &:hover{
        color: yellowgreen;
    }
}

// 扩展，可以理解为编程语言中的继承
// extend()，相当于对当前选择器扩展指定选择器的样式（选择器分组）。
.p1{
    width: 100px;
    height: 100px;
}
// p2继承p1，如果继承后元素什么都不写，则类似于css中的分组选择器
.p2:extend(.box1 > .box3){
    // 这里编写的内容在p2作为p1的扩充
    color: bisque;
}
.p3{
    // 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制，这种方式又叫做：混合（mixin）。
    .p1();
}

// 使用类选择器时可以在选择器后边添加一个括号，这时实际上就创建了一个mixins。
.p4(){
    width: 100px;
    height: 100px;
    background-color: #bfa;
}
// 对以上定义的mixins进行引用
.p5{
    // 这里在引用时，后面的括号可以省略，效果与带括号的是一样的。且这里的p4并不会在css文件中出现。
    .p4();
}

output:

.box1 .box2 {
  color: red;
}
.box1 > .box3,
.p2 {
  color: yellow;
}
.box1 > .box3:hover {
  color: blue;
}
.box1:hover {
  color: orange;
}
div .box1:hover {
  color: yellowgreen;
}
.p1 {
  width: 100px;
  height: 100px;
}
.p2 {
  color: bisque;
}
.p3 {
  width: 100px;
  height: 100px;
}
.p5 {
  width: 100px;
  height: 100px;
  background-color: #bfa;
}

5、混合函数

**混合函数（mixin）：**中可以直接设置变量，如：

// 定义混合函数
.test(@w, @h, @gb-color){
    width: @w;
    height: @h;
    background-color: @gb-color;
}
// 引用混合函数
div{
    .test(100px, 100px, #bfa);
}

output:

div {
  width: 100px;
  height: 100px;
  background-color: #bfa;
}

在以上调用混合函数中，是按顺序传递参数的，这是传递的参数之间是有顺序要求的；也可以使用参数名进行调用，这是传递的参数之间没有顺序要求，如下：

div{
    .test(@w: 100px, @h: 100px, @bg-color: #bfa);
}

当然也可以在定义混合函数时，给参数定义一个初始值，这样我们在调用的时候就可以不用赋值也行，如下：

// 定义混合函数时给参数赋初始值
.test(@w: 100px, @h: 200px, @bg-color){
    width: @w;
    height: @h;
    background-color: @bg-color;
}
// 引用混合函数
div{
    // 只给混合函数中没有赋初始值的参数传递值
    .test(@bg-color: #bfa)
}

6、less的补充

在less中所有的数值都可以直接进行运算。加（+）、减（-）、乘（*）、除（/）。如：

.box1{
    width: 100px + 100px;
    height: 100px * 2;
}

可以使用**@import “less文件”;**将其他less文件引入到当前文件，从而实现模块化操作。如：

// 引入其他less文件
@import "syntax.less";

以及配置浏览器解析到less文件中的代码行数，链接。

CSS 弹性 flex

1、弹性盒

弹性盒、伸缩盒（flex）： 是CSS找那个的又一种布局手段，它主要用来代替浮动来完成页面的布局，flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变。

弹性容器： 要使用弹性盒，必须先将一个元素设置为弹性容器，我们可以通过display来设置弹性容器。

display: flex;设置为块级弹性容器；
display: inline-flex;设置为行内弹性容器，

块级与行内弹性容器的区别于块元素和行内元素的区别差不多，都是块会独占一行，而行内则不会。

弹性元素： 弹性容器的子元素称为弹性元素（弹性项），弹性元素可以同时是弹性容器。

主轴： 弹性元素的排列方向称为主轴，受到flex-direction属性的影响。

侧轴： 与主轴垂直的方向称为侧轴。

flex-direction： 弹性盒的属性，指定弹性容器中弹性元素的排列方向，可选值如下：

row，默认值，弹性元素在容器中水平排列（从左向右），此时的主轴为：自左向右；
row-reverse，弹性元素在容器中水平排列（从右向左），此时的主轴为：自右向左；
column，弹性元素在容器中纵向排列（从上向下），此时的主轴为：自上向下；
column-reverse，弹性元素在容器中纵向排列（从下向上），此时的主轴为：自下向上；

flex-grow： 弹性元素的属性，指定弹性元素的伸展系数，当父元素有多余的空间时，通过这个属性的设置，弹性元素会按照比例进行分配，可选值如下：

0是默认值，即不增长；
1指定增长系数为1，还可以指定2,3,4等，值越大，增长越多；

flex-shrink： 弹性元素的属性，指定弹性元素的收缩系数，当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩，缩减系数的计算方式比较复杂，缩减的多少是根据**”缩减系数“和”元素的大小“**共同来计算的。可选值如下：

0，不收缩；
1，默认值，等比例收缩；
2,3,4等，值越大，收缩的越多；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 300px;
            border: 10px solid red;
            /* 将ul设置为弹性盒 */
            display: flex;
            /* 设置弹性元素的排列方向 */
            flex-direction: row;
        }
        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 弹性元素的属性 */
            /* flex-grow: 1; */
            flex-shrink: 1;
        }
        li:first-child{
            /* flex-grow: 1; */
        }
        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
        }
        li:nth-child(3){
            background-color: aqua;
            /* flex-grow: 3; */
        }
    </style>
</head>
<body>
    <ul class="clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

2、弹性容器

flex-wrap： 设置弹性元素是否在弹性容器中自动换行，可选值如下：

nowrap，默认值，不会自动换行；
wrap，弹性元素会沿着侧轴方向自动换行；
wrap-reverse，弹性元素沿着侧轴反方向换行；

flex-flow： 是flex-direction与flex-wrap的简写属性，即可以同时设置这两个属性，如：

flex-flow: row wrap; /*弹性元素水平排列，其会自动换行。*/

justify-content： 弹性元素如何分配主轴上的空白空间（主轴上的元素如何排列），可选值如下：

flex-start，默认值，元素沿着主轴起边排列；
flex-end，元素沿着主轴终边排列（即靠在终边）；
center，元素居中排列；
space-around，空白分布到元素的两侧（空白分布的不均匀）；
space-between，空白均匀分布到元素间；
space-evenly，空白均匀分布到元素的两侧；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border: 10px solid red;
            /* 将ul设置为弹性盒 */
            display: flex;
            /* 设置弹性元素的排列方向 */
            flex-direction: row;
            justify-content: space-evenly;
        }
        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 弹性元素的属性 */
            /* flex-grow: 1; */
            flex-shrink: 1;
        }
        li:first-child{
            /* flex-grow: 1; */
        }
        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
        }
        li:nth-child(3){
            background-color: aqua;
            /* flex-grow: 3; */
        }
    </style>
</head>
<body>
    <ul class="clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

3、弹性容器的补充

align-items： 弹性元素在辅轴上的对齐方式，以及元素之间的关系。可选值如下：

stretch，默认值，将元素的长度设置为相同的值；
flex-start，元素不会拉伸，沿着辅轴起边对齐；
flex-end，沿着辅轴的终边对齐；
center，居中对齐；
baseline，基线对齐，使用的较少；

align-content： 辅轴空白空间的分布，可选值与justify-content差不多，使用也差不多。

align-self： 用来覆盖当前弹性元素上的align-itmes；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性容器样式的补充</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 600px;
            height: 800px;
            border: 10px solid red;
            /* 将ul设置为弹性盒 */
            display: flex;
            /* 设置弹性元素的排列方向 */
            flex-flow: row wrap;
            /* 设置副轴元素之间的对齐方式 */
            align-items: flex-start;
            align-content: space-between;
        }
        li{
            width: 200px;
            
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            flex-shrink: 0;
        }
        li:first-child{
            /* align-self用来覆盖当前元素上的align-itmes */
            align-self: stretch;
        }
        li:nth-child(2){
            background-color: pink;
        }
        li:nth-child(3){
            background-color: aqua;
        }
        li:nth-child(4){
            background-color: chocolate;
        }
        li:nth-child(5){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul class="clearfix">
        <li>1</li>
        <li>2
            <div>
                2
            </div>
        </li>
        <li>
            3
            <div>3</div>
            <div>3</div>
        </li>
        <li>4</li>
        <li>
            5
            <div>6</div>
        </li>
    </ul>
</body>
</html>

4、弹性元素

**flex-grow： ** 弹性元素的增长系数。

flex-shrink： 弹性元素的缩减系数。

flex-basis： 弹性元素的基础长度，指定的是元素在主轴上的基础长度；如果主轴是横向的，则该值指定的是元素的宽度；如果主轴是纵向的，则该值指定的是元素的高度，可选值如下：

auto，默认值，表示参考元素自身的高度或宽度；
如果传递一个具体值，则以该具体值为准；

以上的这三个属性被称为弹性元素的三个基础属性，可以使用一个flex来进行设置，格式为：flex: 增长缩减基础;可选值：

initial，相当于：flex: 0 1 auto;
auto，相当于：flex: 1 1 auto;
none，相当于：flex: 0 0 auto；此时相当于元素没有弹性。

order： 可以用来决定弹性元素的排列顺序，值越小，排在越前面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性元素</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 800px;
            border: 10px solid red;
            /* 将ul设置为弹性盒 */
            display: flex;
            /* 设置弹性元素的排列方向 */
            flex-direction: row;
            
        }
        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* flex-grow: 1; */
            flex: initial;

        }
        li:first-child{
            order: 3;
        }
        li:nth-child(2){
            /* 通过order来改变元素之间的排列顺序 */
            order: 2;
            background-color: pink;
        }
        li:nth-child(3){
            order: 1;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <ul class="clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

像素

像素： 屏幕是有一个一个发光的小点构成，这一个个的小点就是像素；分辨率：1920x1080说的就是屏幕中小点的数量，在前端开发中像素要分成两种情况讨论，css像素和物理像素。

css像素： 编写网页是，我们所用的像素像素都是CSS像素。

物理像素： 上面所说的一个个小点点就是物理像素。

浏览器在现实网页时，需要将css像素转换为物理像素然后在呈现出来，一个css像素最终由几个物理像素来显示，这个是由浏览器来决定的，默认情况下在pc端，一个css像素 = 一个物理像素。

视口（viewport）： 视口就是屏幕中用来显示网页的区域，可以通过查看视口的大小来观察css像素和物理像素的比值，默认情况下：

视口宽度：1920px（css像素），

1920px（物理像素）；此时css像素和物理像素的比是1:1；
放大两倍时的情况，视口宽度：960px（css像素），

1920px（物理像素），此时css像素和物理像素的比是1:2；
即我们可以通过改变视口的大小，来改变css像素和物理像素之间的比值；

1、手机像素

在不同的屏幕中，单位像素的大小是不同的，像素越小屏幕月清晰，如：24寸，1920x1080；iPhone6 4.7寸，750x1334px；由上可见，智能手机的像素点远远小于计算机的像素点。

问题：一个宽度为900px的网页如何在iPhone6中显示呢？默认情况下，移动端的网页都会将视口设置为980像素（css像素），以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，移动端的浏览器会自动对网页进行缩放。

所以基本大部分的pc端网址都可以在移动端中正常浏览，但是往往读不回有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页。

2、完美视口

移动端默认情况的视口大小是980px（css像素），默认情况下，移动端的像素比就是：视口大小/移动设备宽度（980/750），如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好的，导致网页中的内容非常的小。

编写移动端页面时，必须要确保有一个比较合理的像素比，如1个css像素对应2个物理像素或3个物理像素等，我们可以通过mate标签来设置视口大小。

每一款移动设置设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小我们称其为 完美视口 。

将网页设置为完美视口：

<!-- viewport 表示视口，在移动端我们只需要设置宽度即可，device-width即表示完美视口，initial-scale即表示缩放值为1，与的作用device-width差不多，这里只是为了确保能够生效。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

结论： 在编写移动端页面时，就把上边的代码先写上。

3、vw单位

由于不同的设备的完美视口是不一样的，如：iPhone6的完美视口是375，iPhone6plus的完美视口是414；由于不同设备的视口和像素比不同，所以同样的375px个像素在不同的设备下意义不一样，比如在iPhone6中375px是全屏，而在iPhone6plus中则会缺一块，所以在移动端开发时，就不能再使用px来进行布局了。

vw 表示的是视口的宽度（viewport width），100vw = 一个视口的宽度，1vw = 1%视口的宽度。vw这个单位永远是相对于视口宽度进行计算的。

<!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>vm单位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 6.4vw;
            height: 4.667vw;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <!-- 
        设计图的宽度：
            750px 1125px这些都是375的倍数

        设计图：
            750px

        使用vw作为单位：
            100vw

        创建一个48px x 35px大小的元素
        100vw = 750px（设计图的像素），则0.1333333333333333vw = 1px
        6.4vw = 48px（设计图像素）
        4.667vw = 35px（设计图大小）
     -->
    <div class="box1">
    </div>
</body>
</html>

4、vw适配

<!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>vw的适配</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            /* 
            网页中字体大小是12px，不能设置一个比12px更小的字体了，如果我们设置了一个比12px还小的字体，则字体会自动设置为12px。
            
            0.13333vw = 1px
            5.3333vw = 40px
            */
            font-size: 5.333333333333332vw;
        }
        .box1{
            /* 
                rem = 1 html的字体大小；
                
                经过以上的换算之后，得到以下关系：
                1 rem = 40px（设计图大小）
            */
            /* 48/40 */
            width: 1.2rem;
            /* 35/40 */
            height: 0.875rem;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

CSS 媒体查询

响应式布局： 网页可以根据不同的设备或窗口大小呈现不同的效果，使用响应式布局，可以使一个网页适用于所有的设备，响应式布局的关键就是**“媒体查询”**，通过媒体查询，可以为不同的设备或设备的不同状态来分别设置样式。

响应式设计网页的两个原则：

移动端优先；
渐进增强；

1、媒体查询简介

使用媒体查询的语法如下：

@media 查询类型{}

媒体类型可选值如下：

all，所有设备；
print，打印设备；
screen，带屏幕的设备；
speech，屏幕阅读器；

可以使用逗号连接多个媒体类型，这样他们之间的关系是一个或的关系，使用and表示且的关系，使用not表示非的关系。如果在媒体类型前面添加一个only，表示仅仅，only的使用主要是为了兼容一些老版本浏览器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
    <style>
        /* 使用媒体查询 */
        @media print, speech {
            body{
                background-color: #bfa;
            }
        }
		/*
        @media only screen{
            body{
                background-color: #fff;
            }
        }
        */
    </style>
</head>
<body>
    
</body>
</html>

2、媒体查询补充

媒体特性：

width，视口的宽度；
height，视口的高度；
min-width，视口的最小宽度（视口大于指定宽度时生效）；
max-width，视口的最大宽度（视口小于指定宽度时生效）；

样式切换的临界点，我们称其为**“断点“** ，也就是网页的样式会在这个点时发生变化，一般比较常见的断电如下：

小于768，超小屏幕，max-width=768px；
大于768，小屏幕，min-width=768px；
大于992，中型屏幕，max-width=992px；
大于1200，大屏幕，min-width=1200px；

<!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>
        /* 媒体必须是带屏幕且宽度介于500px与700px之间时，背景颜色发生变化。 */
        @media screen and (min-width: 500px) and (max-width: 700px){
            body{
                background-color: #bfa;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

周巴帝

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS 进阶

CSS 变形 transform1、translateX/Y**变形（transform）： ** 就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局。使用transform标签来设置元素的变形效果。平移：平移元素，百分比是相对于自身来计算的。translateX()，沿着x轴方向平移；translateY()，沿着y轴方向平移；translateZ()，沿着z轴方向平移；transform: translateX() translateY(); /*变形的多个值之间使用
复制链接

扫一扫