HTML5+CSS3知识点-周6.md_h5和css3讲义 .md-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41008567/article/details/108906023

一、变形 transform

1、2D变形

*所有变形都不会影响元素本身的占位

1.位移，保留占位（类似相对定位）
- translate(x,y) 水平和垂直同时位移
- translateX() 水平位移,正往右，负往左
- translateY() 垂直位移, 正往下，负往上
2.旋转
- rotate(deg) 正顺时针，负逆时针
3.缩放
- scale(n) scale(n-x,n-y) 水平和垂直同时缩放
- scaleX(n) 水平缩放
- scaleY(n) 垂直缩放
  - n 表示缩放的倍数，> 1 放大 0.X 缩小
4.倾斜（扭曲）
- skew(x-deg,y-deg) 水平和垂直同时倾斜，只写一个值表示水平倾斜，垂直不倾斜
- skewX(deg) 横向拉伸，正数往左边倒，负数往右边倒
- skewY(deg) 纵向拉伸，正数右侧往下，负数左侧往下

2、3D变形

1.位移
- translateZ() Z轴位移，正方向位移靠近（放大）负方向位移远离（缩小）
- translate3d(x,y,z) 三个轴同时位移
2.旋转
- rotateX() 绕X轴旋转，正顺时针（上往里倒，下往外翻），负逆时针（下面往里，上面往外）
- rotateY() 绕Y轴旋转，正顺时针（右边往里，左边往外），负逆时针（左边往外，右边往里）
- rotateZ() 绕Z轴旋转,正顺时针，负逆时针
- rotate3d(x-n,y-n,z-n,deg)
  - n ：代表三个轴的矢量，0 不转， 1 正方向旋转，-1 负方向旋转
  - deg : 旋转的度数
3.缩放
- scaleZ(n) Z轴缩放
- scale3d(x,y,z) 三个轴同时缩放

二、3d环境设置

1、视距设置 perspective:600-2000px;

模拟视图和人眼的距离，让3d变形的元素呈现远小近大的效果，需要设置给父元素或者祖先元素

2、变形风格

   transform-style: flat;  父元素3d变形时，子元素3d效果失效

   transform-style: preserve-3d;  保留子元素的3d效果

3、变形原点

   transform-origin: left/center/right/100px/50%   top/center/bottom/100px/50%;

三、弹性盒布局（flex-box）

css3提供得一种新得布局方式
菜鸟教程链接
 视频学习链接

弹性盒布局得目的是提供一种更加有效得方式来规定弹性盒子内部子元素的排列方式，对齐方式，空白空间的分配。

当把元素设置为弹性容器之后，里面的子元素 float/display/vertical-align属性会失效

弹性容器改变的是直接子元素的排列方式/对齐方式，不会对子元素内部的元素产生影响

容器属性	项目属性
设为弹性盒容器> display:flex/inline-flex;	规定项目的排序> order:number;
设主轴方向> flex-direction:row/ow-reverse/column/column-reverse;	规定项目放大比例> flex-grow:number;
设项目在主轴上对齐方式> justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly	规定项目压缩比例> flex-shrink:number
设置项目在交叉轴上的对齐方式> align-items: stretch/flex-start/flex-end/center/baseline	规定指定项目的在交叉轴上的对齐方式> align-self: 取值同容器的align-items属性
项目换行> flex-wrap:no-wrap/wrap/wrap-reverse	项目默认大小> flex-basis:auto/length-px-%rem
多行在交叉轴上对齐方式> align-content:stretch/flex-start/flex-end/center/space-around/space-between;	grow/shrink/basis复合属性> flex:auto-（1 1 auto）/none- （0 0 auto）/1 （1 1 0）

1、容器属性

1.设置弹性盒容器

   display:flex/inline-flex;

   - flex : 把元素设置为弹性容器，元素本身的属性为块级

   - inline-flex: 把元素设置为弹性容器，元素本身的属性为行内

2.设置主轴方向

   主轴方向决定项目的排列方式

   flex-direction:row|row-reverse|column|column-reverse;

    - row :默认， 从左到右

    - row-reverse: 从右到左

    - column: 从上到下

    - column-reverse: 从下到上

3.设置项目在主轴上的对齐方式

   具体效果和主轴的方向有关，这里以主轴方向默认从左到右为例

   justify-content:flex-start|flex-end

   - flex-start ：默认， 主轴的开始位置对齐（左对齐）

   - flex-end : 主轴的结束我位置对齐  （右对齐）

   - center : 主轴中间对齐

   - space-between: 在每两个项目之间留出相同的空白，主轴的开始和结束没有空白

   - space-around: 在每个项目两边留出相同的空白，两个项目之间就是双倍空白

   - space-evenly: 主轴开始和结束以及每一个项目之间都是相同的空白

4.设置项目在交叉轴上的对齐方式

   以主轴从左到右，交叉轴从上到下

   align-items: stretch|flex-start|flex-end|center|baseline;

   - stretch :默认， 拉伸，当项目没有设置固定高，会进行拉伸占满容器高度

   - flex-start : 交叉轴的开始位置对齐（顶部对齐）

   - flex-end : 交叉轴的结束位置对齐（底部对齐）

   - center : 交叉轴的中间对齐

   - baseline: 基线对齐

5.项目换行

   flex-wrap:no-wrap|wrap|wrap-reverse;

   - no-wrap: 默认，不换行，项目被压缩

   - wrap: 换行

   - wrap-reverse : 换行，颠倒行的顺序

6.多行在交叉轴上的对齐方式

   align-content:stretch|flex-start|flex-end|center|space-around|space-between;

   - stretch :默认，拉伸，当项目没有设置固定高，拉伸占满整个容器，比如有两行，每一行高度占容器的1/2，如果项目设置了固定高，项目在每一行的空间上顶部对齐

   - flex-start ： 多行在交叉轴的开始对齐（顶部）

   - flex-end ： 多行在交叉轴的结束对齐（底部）

   - center : 交叉轴中间对齐

   - space-around : 每一行前后留出相同的空白

   - space-between ： 每两行之间留出相同的空白

2、项目属性

1.规定项目的排序

   order:number;

   默认值都是0，数字越大排序越靠后,数字相同,按照代码顺序排列

2、规定项目放大比例

   flex-grow:number;

   默认项目的放大比例都是0 ，就是不放大，如果都是1就是等比放大，如果设置不同的数字，就按照数字比例等比放大

3、规定项目压缩比例（项目总宽度超出容器宽度，不换行）


   flex-shrink:number;

   默认值是1，表示所有的项目等比缩小,0表示不缩小，设置不同数字，就按照数字比例等比缩下

4、规定指定项目的在交叉轴上的对齐方式

   align-self: 取值同容器的align-items属性
   默认值为auto，表示继承父元素的align-items属性

四、css预处理

css预处理就是定义了一种新的语言。

基本思想是通过一种专门的编程语言，为css增加一些编程的特性，通过这种编程语言(预处理语言)编写css代码（这种语言不能直接运行在浏览器上），然后通过指定编译器编译成css文件，最后运用到网页中。

比较成熟的css预处理语言有less/sass(scss);

优点：使用预处理语言可以使css代码更加简洁，适应性更强，可读性和可维护性更好。

五、less

1、使用less

编译less插件 – Easy LESS
创建 less 文件 – 编辑 – 保存 – 自动生成同名的 .css文件

2、less语法

1.导入样式

导入css文件

 @import "reset.css";

 如果导入的使.css文件，就是把这句代码直接复制进编译过后的css文件中

 编译后：

 @import "reset.css";

导入less文件

 @import "reset.less"; 导入less文件，可以省略后缀名

 @import "reset"; 

 如果导入的使.less文件，把reset.less中的代码复制一份合并到目标文件中

 编译后：
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }
    img {
        vertical-align: middle;
    }

2.注释

css注释

   /*
   这是css的注释，less中可以显示，并且会被编译进css文件中
   */

less注释

 // 这是less注释，只在less文件中显示，不会编译进css文件中

3.变量


   变量类似于容器，可以用来存储一些值，后期可以通过变量名去反复调     
   用变量里面的值，有利于页面后期更换风格（维护）
   变量命名必须要加 @ 后面的变量名尽量使用有意义的单词和数字组合
   @变量名:值;

   @main-color:#00ff00;

   @sub-color:orange;

   @fs-lg:14px;

   .box{

        width:100px;

        height:100px;

        background-color:@main-color;

        color:@sub-color;

        font-size:@fs-lg;

   }

4.混入

把一个类A混入到另一个类B中，使B类继承了类A里面的代码，并且可以传参

1)、不带参数的混入

less

   .size{

        width: 100px;

        height: 100px;

    }

   .box1{

        .size;

        background-color: red;

   }

编译后css：

  .size{

        width: 100px;

        height: 100px;

   }

  .box1{

        width: 100px;

        height: 100px;

        background-color: red;

   }

2）带参数的混入

less


   /* 混入的类名后面只要带了() 这个类本身就不会被编译进css文件中*/

   .size(@w,@h){    //混入的类内部需要几个可以变的值，就定义几个参数（形参）,形参的语法和变量相同，多个用逗号隔开

        width: @w;

        height: @h;
   }

   .box1{

        .size(100px,200px);  // 调用混入的类时，需要传入具体的数值（实参），一般和形参需要一一对应

   }

   .box2{

        .size(200px,300px);

   }

编译后css：

   .box1{

        width:100px;

        height:200px;

   }

   .box2{

        width:200px;

        height:300px;

   }

3）带参数和默认值的混入

less

   .size1(@w:100px,@h:100px){ // 形参后面通过冒号添加默认值

        width: @w;

        height: @h;

   }

   .box5{

        .size1;  // 当调用类不传实参，使用默认值

   }

   .box6{

        .size1(200px,300px); //调用类传入了实参，就会覆盖默认值 

   }

   .box7{

   .size1(400px);  //实参个数比形参少，默认按照顺序匹配，没有匹配到实参的参数依然使用默认值 

   }
   .box8{

        .size1(@h:500px);  // 可以添加形参名称和值指定实参匹配那个参数

   }

编译后css

   .box5{

          width: 100px;

          height: 100px;

   }

   .box6 {

        width: 200px;

        height: 300px;

   }

   .box7 {

        width: 400px;

        height: 100px;

   }

   .box8 {

        width: 100px;

        height: 500px;

   }

4)、@arguments 参数集合

less


   .boxShadow(@h,@v,@blur,@s,@color){

        box-shadow: @h @v @blur @s @color;

   }

   .boxShadow(@h,@v,@blur,@s,@color){

        box-shadow: @arguments;  //和上面的代码等效

   }
   
   .box3{

        .boxShadow(0px,5px, 10px, 0px, #333)

   }

   .box4{
    
        .boxShadow(5px,0px, 20px, 0px, red)

   }

编译后css


   .box3 {

        box-shadow: 0px 5px 10px 0px #333;

   }

   .box4 {

        box-shadow: 5px 0px 20px 0px red;

   }

5.嵌套
less

   .header{

        height: 50px;

        background-color: #333;

        .left{

            float: left;

            ul{

                list-style: none;

                line-height: 50px;

                li{

                    float: left;

                    background-color: orange;

                    a{

                        color: #fff;

                        &:hover{  // 添加&符表示继承父级选择器 （不添加空格）

                            color:#f00;

                        }

                    }

                }

            }

        }

   }

编译后css

   .header {

        height: 50px;

        background-color: #333;

   }

   .header .left {

        float: left;

   }

   .header .left ul {

        list-style: none;

        line-height: 50px;

   }

   .header .left ul li {

        float: left;

        background-color: orange;

   }

   .header .left ul li a {

        color: #fff;

   }

   .header .left ul li a:hover{

        color: #f00;

   }

6.继承

类似于简单的混入，把一个类继承到另一个类当中，但是混入是复制，会产生代码冗余，继承则不会

less

  .size{

      width: 100px;

      height: 100px;
  }

  .box{

      &:extend(.size);

      background-color: red;

  }

编译后css：


   .size,

   .box{

        width: 100px;

        height: 100px;

   }

   .box {

        background-color: red;

   }

7.计算
less


  .box2{

        //多个数字参与运算，有一个值以上带单位

        width: 1000px/2;

        height: 20*10px;

        border-width: 20-18px;

        border-radius: 10+5px;

        margin: (10-5px)*20;  // 可以通过（）提升运算的优先级

  }

编译后css

  .box2 {

        width: 500px;

        height: 200px;

        border-width: 2px;

        border-radius: 15px;

        margin: 100px;

  }

六、calc函数

css3中提供的运算函数，不兼容低版本浏览器

支持加减乘除运算，运算符两边需要添加空格

    width:calc(100% - 200px);

七、移动端浏览器及内核

主流手机浏览器：苹果、百度、qq、uc、360…
内核：大部分的核心都是webkit内核，不需要过多考虑新技术的兼容性（html5+css3都可以用）

八、viewport（视口）设置

布局视口：认为是html宽度，移动端一般是默认设置为一些固定的值（980或者1024），比屏幕宽度要大
视觉视口：用户看到的网页区域，相当于屏幕的宽度
理想视口：布局视口对用户不友好，没有考虑到手机尺寸，所以苹果公司引入理想视口概念，那些基于理想视口而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，网站的所有内容都可以正常的呈现给用户( 把布局视口进行设置，让它和视觉视口相匹配)

   设置viewport

   <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">



   <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

width=device-width: 让布局视口和视觉视口相匹配（html宽度等于设备的宽度）
initial-scale=1.0 : 页面初始的缩放值，为数字，可以是小数,一般设置为1.0
user-scalable=no: 是否允许用户进行缩放，'no’为不允许，'yes’为允许
maximum-scale=1.0: 用户可放大的最大值
minimum-scale=1.0: 用户可缩小的最小值

九、rem 布局

通过js动态计算一个最新的rem值：

   <script>
        // 1、先获取设备的宽度（等同于html的宽度）

        var deviceWidth = document.documentElement.clientWidth; //html宽度

       // 2、计算出一个最新的rem的值

        if(deviceWidth>750){

            deviceWidth = 750;

        }

        var r  = deviceWidth*100/750;  // 750指的是设计稿宽度，根据实际拿到的设计稿尺寸去修改



        // 3、把计算出来的最新的rem值设置给html的font-size

        document.documentElement.style.fontSize = r + 'px';

   </script>