CSS学习笔记

劳资蜀道山

CSS学习笔记

 

 

vertical-align

vertical-align 属性设置元素的垂直对齐方式。

css中的vertical-align 属性只能用于 行内元素 和 置换元素（例如 图像和表单输入框） ，此属性不继承。

vertical-align的取值:baseline|sub|super|top|text-top|middel|bottom|text-bottom|<length>|<percentage>;

 

网页坐标系：左上角为原点；X水平，向右为正向左为负；Y垂直，向下为正，向上为负；

转换/变换/transform是CSS3中具有颠覆性的特征之一，可以实现平移、旋转、缩放等效果；

转换/变换/transform可以理解为变形；

盒子移动的3种方式：定位position、外边距margin、平移translate；

transform-2D变换

translate	先走父盒子一半，再回退自己的一半，然后就在父盒子内居中了； position:absolute;top:50%;left:50%;向右、向下走父盒子（width/height）的一半； transform:translate(-50%,-50%);向左、向上走自己盒子（width/height）的一半； translate对于行内元素无效； translate可以接受px参数，也可以接受%参数,其中%是相对于自身尺寸的百分比； 如果只想移动其中一个坐标轴，可以用translateX,translateY; translate(x,0),translate(0,y); translate不会影响其他元素的位置；
rotate	tranform:rotate(45deg); deg旋转的度数，正值表示顺时针旋转，负值逆时针； 旋转中心默认为元素中心点；   自定义旋转中心点：transform-origin:x y;参数之间用空格隔开； xy默认值是元素中心点50% 50%；可以接受的参数类型：%，px，方位词； 还可以设置像素值px或者方位名词：top,bottom,left,right center;
scale	transform:scale(x,y); x,y之间用逗号分隔； transform:scale(2,1);宽度为原来2倍，高度不变； transform:scale(2);宽高同时放大为原来的2倍； transform:scale(0.5);宽高同时缩小为原来的一半； scale也可以设置转换中心，默认中心点缩放； scale操作不影响其他盒子；

animation动画

基础

0%是动画的开始，100%是动画的结束；这就是动画序列； 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐更改为新样式效果； 关键词from-to相当于0%-100%； 1、定义动画@keyframes wheel {             from {transform: translateX(0) rotate(0); }             to {transform: translateX(600px) rotate(3600deg);} } 2、使用动画animation-name: wheel;  animation-duration: 20s;

属性

anination-name调用的动画名称； animation-duration动画时序时长，单位秒s； @keyframes定义动画；关键词from-to相当于0%-100%； animation所有动画属性简写，除了animation-paly-state； animation-delay 动画开始时间，单位秒s； animation-iteration-count动画播放次数，默认1，无穷用infinite； animation-direction是否在下一个周期逆向播放，默认normal不逆向，alternate逆向； animation-timing-function动画速度曲线，默认ease； animation-fill-mode动画结束后，要不要回到开始位置，backwards回来，forwards不回来； animation-play-state动画是否正在播放；running在播放，pause暂停了； 速度曲线： linear匀速；ease结束前变慢；ease-in低速开始；ease-out低速结束；  ease-in-out低速开始，低速结束；steps()指定时间函数中间隔数量（步长）； 动画简写：animation:动画名称 持续时间 运动曲线 开始时间 播放次数 是否反向 结束状态；

translate-3D

Z轴垂直于屏幕，屏幕向外为正，向内为负值；Z越大，离眼睛越近，物体越大；

translate3d	transform:translateX(100px)，transform:translateY(100px)； transform:translateZ(100px)，一般以px为单位进行移动； translateZ(100px)表示向屏幕外移动100px，与眼睛的距离拉近100px； transform:translate3d(x,y,z)
rotate3d	transform:rotateX(45deg); transform:rotateY(45deg); transform:rotateZ(45deg); transform:rotate3d(x,y,z); 左手准则：大拇指指向坐标轴正方向，四指弯曲方向就是旋转正方向；
perspective透视	在2D平面产生近大远小的视觉立体，但是只是二维效果； 透视称为视距：视距就是人的眼睛到屏幕的距离； 距离视觉点越近成像越大，越远成像越小；近大远小； 透视的单位是像素px； 透视要写到被观察物体的父盒子上面； perspective:200px;
transform-style	控制子元素是否开启三维立体环境； 不开启子元素的3d（默认）：transform-style:flat; 子元素启用3d效果：transform-style:preserve-3d; 属性写给父元素，影响的是子盒子；

 

元素的显示模式和转换方法总结

分类	举例	特点	转换
块级元素	h1-h6,p,div,ul,ol,li	自己独占一行； 高度宽度、内外边距可以控制； 默认宽度是容器（父级）的100%； 里面可以放行内元素或块级元素；	转换为块级元素： display:block;
行内元素	a,strong,b,em,i,del,s, ins,u,span	也称为内联元素，一行可以放多个； 宽度高度设置无效； 默认宽度是其本身内容的宽度； 行内元素只能容纳文本或者其他行内元素；	转换为行内元素： display:inline;
行内块元素	img,input,td	同时具有行内元素和块级元素的特点； 和相邻的行内元素（或行内块元素）在一行显示，他们之间会有空白间隙，一行可以显示多个（行内元素的特点）； 行内元素卆他本身内容的宽度（行内元素的特点）； 宽度高度、内外边距都可以 控制（块级元素的特点）；	转换为行内块元素： display:inline-block;

 

 

 

 

 

#end

来源：https://www.cnblogs.com/zhangdezhang/p/17229713.html