CSS学习笔记

劳资蜀道山 發表於 2023-3-27 19:16:00

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变换
<table>
<tbody>
<tr>
<td width="138">
translate
</td>
<td width="573">
先走父盒子一半，再回退自己的一半，然后就在父盒子内居中了；
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不会影响其他元素的位置；
</td>
</tr>
<tr>
<td width="138">
rotate
</td>
<td width="573">
tranform:rotate(45deg);
deg旋转的度数，正值表示顺时针旋转，负值逆时针；
旋转中心默认为元素中心点；
 
自定义旋转中心点：transform-origin:x y;参数之间用空格隔开；
xy默认值是元素中心点50% 50%；可以接受的参数类型：%，px，方位词；
还可以设置像素值px或者方位名词：top,bottom,left,right center;
</td>
</tr>
<tr>
<td width="138">
scale
</td>
<td width="573">
transform:scale(x,y);
x,y之间用逗号分隔；
transform:scale(2,1);宽度为原来2倍，高度不变；
transform:scale(2);宽高同时放大为原来的2倍；
transform:scale(0.5);宽高同时缩小为原来的一半；
scale也可以设置转换中心，默认中心点缩放；
scale操作不影响其他盒子；
</td>
</tr>
</tbody>
</table>
animation动画
<table>
<tbody>
<tr>
<td width="104">
基础
</td>
<td width="607">
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;
</td>
</tr>
<tr>
<td width="104">
属性
</td>
<td width="607">
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:动画名称持续时间运动曲线开始时间播放次数是否反向结束状态；
</td>
</tr>
</tbody>
</table>
translate-3D
Z轴垂直于屏幕，屏幕向外为正，向内为负值；Z越大，离眼睛越近，物体越大；
<table>
<tbody>
<tr>
<td width="139">
translate3d
</td>
<td width="572">
transform:translateX(100px)，transform:translateY(100px)；
transform:translateZ(100px)，一般以px为单位进行移动；
translateZ(100px)表示向屏幕外移动100px，与眼睛的距离拉近100px；
transform:translate3d(x,y,z)
 
</td>
</tr>
<tr>
<td width="139">
rotate3d
</td>
<td width="572">
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
transform:rotate3d(x,y,z);
左手准则：大拇指指向坐标轴正方向，四指弯曲方向就是旋转正方向；
</td>
</tr>
<tr>
<td width="139">
perspective透视
</td>
<td width="572">
在2D平面产生近大远小的视觉立体，但是只是二维效果；
透视称为视距：视距就是人的眼睛到屏幕的距离；
距离视觉点越近成像越大，越远成像越小；近大远小；
透视的单位是像素px；
透视要写到被观察物体的父盒子上面；
perspective:200px;
 
</td>
</tr>
<tr>
<td width="139">
transform-style
</td>
<td width="572">
控制子元素是否开启三维立体环境；
不开启子元素的3d（默认）：transform-style:flat;
子元素启用3d效果：transform-style:preserve-3d;
属性写给父元素，影响的是子盒子；
</td>
</tr>
</tbody>
</table>
 
元素的显示模式和转换方法总结
<table>
<tbody>
<tr>
<td width="101">
分类
</td>
<td width="127">
举例
</td>
<td width="305">
特点
</td>
<td width="178">
转换
</td>
</tr>
<tr>
<td width="101">
块级元素
</td>
<td width="127">
h1-h6,p,div,ul,ol,li
</td>
<td width="305">
自己独占一行；
高度宽度、内外边距可以控制；
默认宽度是容器（父级）的100%；
里面可以放行内元素或块级元素；
</td>
<td width="178">
转换为块级元素：
display:block;
</td>
</tr>
<tr>
<td width="101">
行内元素
</td>
<td width="127">
a,strong,b,em,i,del,s, ins,u,span
</td>
<td width="305">
也称为内联元素，一行可以放多个；
宽度高度设置无效；
默认宽度是其本身内容的宽度；
行内元素只能容纳文本或者其他行内元素；
 
</td>
<td width="178">
转换为行内元素：
display:inline;
</td>
</tr>
<tr>
<td width="101">
行内块元素
</td>
<td width="127">
img,input,td
</td>
<td width="305">
同时具有行内元素和块级元素的特点；
和相邻的行内元素（或行内块元素）在一行显示，他们之间会有空白间隙，一行可以显示多个（行内元素的特点）；
行内元素卆他本身内容的宽度（行内元素的特点）；
宽度高度、内外边距都可以控制（块级元素的特点）；
</td>
<td width="178">
转换为行内块元素：
display:inline-block;
</td>
</tr>
</tbody>
</table>
 
 
 
 
 
#end 
来源：https://www.cnblogs.com/zhangdezhang/p/17229713.html

頁: [1]

琼殿技术论坛's Archiver

CSS学习笔记