学习回顾No.6

最新推荐文章于 2024-07-12 14:17:28 发布

小Z想打代码

最新推荐文章于 2024-07-12 14:17:28 发布

阅读量1.1k

点赞数 36

文章标签：学习 web html css javascript

本文链接：https://blog.csdn.net/weixin_54365125/article/details/135524834

版权

移动WEB开发

视口（viewport）

布局视口
视觉视口
理想视口

meta视口标签

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

width => 设viewport宽度
initial-scale => 初始缩放比
maximum-scale => 最大
minimum-scale => 最小
user-scalable => 用户是否可缩放，yes或no（1或0）

物理像素&物理像素比

Retina(视网膜屏幕) 使移动端和PC端像素不一一对应
多倍图 => 先放大再缩小

背景图片缩放

background-size:width,height;(写%,相对父盒子)/cover/contain

单独制作移动端页面（主流）响应式页面（其次）

移动端CSS初始化推荐使用normalize.css

http://necolas.github.io/normalize.css/

设置box-sizing

border-box => padding和border不会撑大盒子了
content-box => 传统模型

清除高亮

-webkit-tap-highlight-color:transparent;

ios去掉外观

-webkit-appearance:none;

禁用长按页面时的弹出菜单

img,a{-webkit-touch-callout:none;}

单独制作移动端页面（主流）

流式布局（百分比布局）
flex弹性布局（强烈推荐）
less+rem+媒体查询布局
混合布局

响应式页面兼容移动端（其次）

媒体查询
bootstarp

流式布局（百分比布局）

非固定像素布局
max-width(max-height)
min-width(min-height)

二倍精灵图做法

在firework中缩放到一半
测坐标
background-size:原来一半宽度

传统布局

兼容性好
布局繁琐
局限性，不能在移动端很好布局

flex弹性布局

操作方便，布局极为简单，移动端应用很广泛
PC端浏览器支持情况较差
IE11或更低版本，不支持或部分支持
为父盒子设为flex布局后，子元素的float、clear和vertical-align失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

父项属性

flex-direction => 主轴方向
justify-content => 主轴上子元素排列方式（一定确定主轴）
flex-wrap => 子元素是否换行
align-content => 侧轴上的子元素排列方式（多行）
align-items => 侧轴上的子元素排列方式（单行）
flex-flow => 复合属性，同时设置flex-direction和flex-wrap
flex-direction:row(左->右)/row-reverse(右->左)/column(上->下)/column-reverse(下->上)
justify-content:flex-start/flex-end/center/space-around/space-between
flex-wrap:nowrap(默认)/wrap
align-items:flex-start/flex-end/center/stretch(拉伸)
align-content:flex-start/flex-end/center/space-around/space-between/stretch
flex-flow:row wrap;(同时设置flex-direction flex-wrap)

2D转换之移动translate（不会影响其他元素的位置）行内块无效

transform:translate(X,Y) / translateX(n) / translateY(n) 可用百分比（相对自身）

2D转换之旋转rotate

transform:rotate(度数) 45deg 正为顺时针，负为逆时针

2D转换中心点transform-origin

transform-origin:X Y; （百分比、像素、方位名词）

2D转换之缩放scale（不影响其他盒子）

transform:scale(x,y); (纯数字，无单位)

2D转换综合写法

transform:translate() rotate() scale()等

用keyframes定义动画

@keyframes 动画名称{from/0%{width:100px;} to/100%{width:200px;}}

使用

animation-name => 动画名称
animation-duration:ns => 持续时间
animation-delay => 何时开始
animation-iteration-count:infinite => 播放次数
animation-fill-mode:forwards 保持 backwards 回到起始
animation-play-state:running/paused
animation-timing-function:规定速度曲线
animation-direction:normal/alternate 逆播放

动画简写

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或结束状态
animation-timing-function:steps(5); => 分几步来完成动画
white-space:nowrap => 强制一行显示

3D转换

近大远小
物体后面遮挡不可见

三维坐标系

X右为正，左为负
Y下为正，上为负
Z往外为正，往里为负
3D位移：translate3d(x,y,z)
3D旋转：rotate3d(x,y,z) rotateX(45deg)/rotateY(45deg)/rotateZ(45deg)/rotate3d(1,1,0,45deg)
透视：perspective
3D呈现：transform-style
透视写在被观察元素的父盒子上面的（加单位px）
Z值越大物体越大
transform-style:flat 子元素不开启3d立体空间（默认）/ preserve-3d 开启3d立体空间
代码写在父级，但影响的是子盒子

浏览器私有前缀

-moz- => firefox浏览器
-ms- => ie浏览器
-webkit- => safari、chrome浏览器
-o- => opera私有

子项属性

flex子项目占的份数
align-self控制子项自己在侧轴的排列方式
order属性定义子项排列顺序（前后顺序）
.item{flex:<number>;/*default:0*/}
align-self:flex-end;
order:-1 => 数值越小排列越靠前，默认为0

背景颜色渐变（必须添加前缀）

background:-webkit-linear-gradient（起始方向,颜色1,颜色2,...）

rem(root em)

媒体查询（Media Query）是CSS3的新语法

@media可以针对不同的屏幕尺寸设置不同的样式
@media mediatype and/not/only (media feature){css-code;}
引入资源 <link rel="stylesheeet" media="mediatype and/not/only (media feature)" href="mystylesheet.css">
Less(Leaner Style Sheets)是一门CSS扩展语言，也成为CSS预处理器
常见的css预处理器：Sass、Less、Stylus
Less变量 => @变量名:值;
less嵌套 => 子元素样式直接写到父元素里
伪类、交集选择器、伪元素选择器内层选择器前面需要加&
Less运算 => 以第一个值的单位为准