移动Web

最新推荐文章于 2024-06-28 14:33:15 发布

ᥴcc+

最新推荐文章于 2024-06-28 14:33:15 发布

阅读量103

点赞数

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/weixin_66744745/article/details/125249176

版权

移动与Web

一.2D转换

1.位移translate

定位区别：

定位会脱标，可能影响其他盒子的位置
定位会使行内元素转换为行内块元素

使用：

transform:translateX(),translateY() translate()
transform:translate(50px,50px)
transform:translate(100%,50%);相对于盒子自身宽高
正值相对于x,y轴正方向进行移动

居中案例:

    div{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
    div{
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-盒子本身宽度的一半;
        margin-top:-盒子本身高度的一半;
    }
    div{
        //前提是盒子要设置宽度（手动），否则无效
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        right:0;
        margin:auto;
    }

2.旋转rotate

1.语法:

transform:rotate(45deg);正值顺时针

2.概念:

伪元素:

字体图标或者手动制作小图标使用 行内元素
只能用在双标签上
伪元素后面不能紧跟伪类正确写法：div:hover::after

百分比：

定位：相对于父级元素
背景大小：相对于当前元素
位移：相对于自身宽高‘
宽高：相对于父级元素

3.转换中心

语法：

transform-origin:200px 200px;
transform-origin:0 100%;
transform-origin:left bottom;
transform-origin:0; 第二格参数默认为50%

4.缩放scale

语法：

transform:scale(2，0.5)；//长宽方向使用一个缩放比

注意：

后面所有属性都不会影响其他盒子的位置（tranform特点）
缩放，使下面的文字，css属性，子元素都会跟着缩放

5.tranform简写

语法：

transform:translate() rotate() scale()
一般情况下，移动写在旋转的前面，反之可能会改变初始轴的方向

二.动画

1.语法:

定义动画：

    @keyframes dong_hua{
        from{

        }
        to{

        }
    }

定义动画序列：

    @keyframes dong_hua{
        0%{

        }
        50%{

        }
        100%{

        }
    }

2.调用动画

animation:animation-name animation-duration;

注意：

变化一定是基于上一个状态的，注意层叠出现

属性：

animation-name:dong_hua 动画名称
animation-duration:1s; 执行时间
animation-timing-function:linear;速度变化,其中有个拆分步骤steps(n)
animation-delay:1s ; 动画延迟
animation-iteration-count:infinite; 循环次数
animation-diretion:alternate; 循环方向
animation-fill-mode:forwards/backwards/both;动画等待结束状态
animation-paly-state:paused/running;动画播放状态

三.3D转换

1.景深

perspective:500px;近大远小
一般加在body上
值越小，变化越剧烈

2.位移translate3d

使用：

与2d基本相同

注意：

z轴移动

3.旋转rotate3d

使用：

与2d基本相同
左手定律

注意：

z轴方向屏幕垂直向外

自定义轴向:

transform:rotate3d(1,1,0,45deg)

4.缩放scale3d

使用：

基本与2d相同

注意：

z轴无效果

5.transform简写

与2d基本相同

6.开启3D转换

给3d转换的元素的亲生父亲开启空间：

tansform-style:preserve-3d

四.流式布局

百分比布局+二倍图

1.viewport

设置

2.background-size

语法:

background-size:100%;当前盒子宽度
background-size:contain/cover;

3.css3盒子

box-sizing:border-box

应用场景：

左固定，右侧拉伸
左右固定，中间拉伸

4.margin的使用

只要没有给盒子宽度，设置外边距不会撑宽盒子，只会往内挤

5.设置定位

设置定位的盒子，宽度百分比100%会失效（转换为行内块元素）
使用定位，不设置偏移量将会按照原来位置进行脱标

五.flex布局

伸缩布局，弹性布局，伸缩盒布局，弹性盒布局
等比
display:flex;
vertical-align,clear,float失效

1.容器属性

flex-direction:row/column

主轴方向设置

justify-content:flex-start/flex-end/center/space-round/space-between

控制子元素在主轴上排布方式

flex-wrap:wrap/nowrap

是否换行；默认不换行，当子元素设置宽度，会进行合理压缩

(flex-flow:flex-direction/flex-wrap)

align-items:flex-start/flex-end/center/stretch

控制子元素侧轴对齐方式（其中子元素只有一行）

align-content:flex-start/flex-end/center/space-round/space-between/stretch

控制子元素侧轴对齐方式（其中子元素为多行)

2.项目属性

语法:

flex:设置百分比或者份数
align-self:控制单独子元素侧轴上对齐方式

作用:

默认值是auto
当父元素设置align-items或者align-content,会继承父元素值，当父元素没有设置，值为stretch
order设置子元素的排列，值越小，越靠前

六.rem布局

1.属性:

等比变化
1em=父亲字体大小
1rem=html字体大小
媒体查询
档位划分
rem+媒体查询
rem布局+flex布局+媒体查询（flexible.js）其中css用less

2.lesss相关语法：

定义变量

@color:green;

嵌套关系

.father{

    .son{
        
    }
    &:hover{
        
    }

}

3.运算

单位：

两个不同单位，选择前面的单位
使用同一个单位，单位就是这个单位

七.响应式布局

1.版心

0-768px xs
768-992px sm
992-1200px md
1200–无穷大 lg

2.Bootstrap布局

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Template</title>

    <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
    <link href="./bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
    <!--解决ie9以下浏览器对 css3 Media Query  的不识别 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!-- 条件注释:小于IE9的版本 -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  </body>
</html>

布局容器和预制类名

<div class="container">//有15px内边距
	<div class="btn btn-default"></div>
<a class="text-muted"></a>
<span class="glyphicon glyphicon-home"></span>
</div>

3.栅格系统

总共12份

	<div class="col-md-3"></div>//有内边距15px
	<div class="row"></div>//去掉父元素container的15px内边距
    <div class="col-md-pull-offset-2"></div>//偏移
	<div class="col-md-push-offset-2"></div>

row没有设置宽度

.row{
    margin-left:-15px;
    margin-right:-15px;
}

4.响应式工具

只在某模式下进行显示

<div class="visible-md">
    
</div>

只在某个模式下进行隐藏

<div class="hidden-lg">
    
</div>

5.设置图片大小

随着屏幕的变化而变化，当屏幕大于图片时，按照图片的大小进行显示；当屏幕小于图片时，按照屏幕大小进行显示 min-width:100%;
向上分配：选低档位
向下分配：媒体查询

ᥴcc+

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
移动Web

定位区别：定位会脱标，可能影响其他盒子的位置定位会使行内元素转换为行内块元素使用：居中案例:2.旋转rotate1.语法:2.概念:伪元素:百分比：语法：语法：注意：语法：定义动画：定义动画序列：2.调用动画animation:animation-name animation-duration;注意：属性：使用：注意：使用：与2d基本相同左手定律注意：自定义轴向:使用：注意：给3d转换的元素的亲生父亲开启空间：语法:应用场景：flex-direction:row/columnjus
复制链接

扫一扫