css属性学习

阳光穿透心脏的1/2处 2022-01-26 23:37 374阅读 0赞

### **Css 层叠样式表 (Cascading Style Sheets)，定义了如何显示HTML元素** ###

\*padding不可设置为负值

**1.animation 动画**  
    摘自：https://www.jianshu.com/p/ed11f8c26992  
·**animation-name** @keyframes的名字

·**animation-duration** 动画持续时间，默认0表示无动画，单位可以设s或ms

·**animation-timing-function** 动画播放方式，默认值ease，可以设linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。

·**animation-delay**  
        延迟开始动画的时间，默认值是0，表示不延迟，立即播放动画。单位是s或ms,允许设负时间，意思是让动画动作从该时间点开始启动，之前的动画不显示。例如-2s动画开始，但前两秒动画被跳过。

·**animation-iteration-count**  
        动画循环播放的次数，默认值是1，即放完一遍后不循环播放。初数字外也可以设关键字infinite表示无线循环播放。

·**animation-direction**  
        动画播放的方向，可设normal，alternate，alternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画，即动画会在奇数次正常播放，偶数次反响播放。alternate-reverse正好反过来，奇数次反向播动画，偶数次正向播动画。

**·animation-play-state**  
         动画的状态，可设running，paused。默认值running表示正在播放动画，paused表示暂停动画，通常在js端使用该属性。

·**animation-fill-mode**  
          动画的时间外属性，可设none,forwards,backwards,both。默认值none表示动画播完后，恢复到初始状态。forwards当动画播完后，保持@keyfremes里最后一帧的属性。backwards表示开始播动画时，应用@keyframes第一帧的属性，both 表示两者都应用

·**@keyframes**  
          动画帧是区别animation和transition的关键，在transition中无法更细致的控制时间段内执行的动作，在animation中用@keyframes可以细致的指定。@keyframes开头，后接animation-name.实体内可以创建百分比来划分时间段，关键字from等于0%，to等于100%。

**浏览器前缀**  
@-moz-keyframes Firefox  
@-webkit-keyframes Chrome和Safari  
@-o-keyframes Opera  
@-ms-keyframes IE9

--------------------

**2.transition**  
        详细介绍：https://www.jianshu.com/p/56f8ddafc63f  
        本质是在线性时间内将属性从开始值过渡到结束值，指定在某时间段内将属性值平滑过渡，增强用户体验。

**·tansition-property**  
        指定需要过渡的css属性。只有能数量化的css属性才能过渡。  
        例如颜色系：color,background-color,border-color,outline-color  
        数字系：width,height,top,right,bottom,left...  
        all:所有属性都将获得过渡效果  
**·tansition-duration**  
                过渡需要的时间，单位可指定s,也可指定ms,默认值是0，表示立刻变化，如果设置了多个过渡属性，但每个属性过渡时间一样，没必要为它设置多个值，只需设一个即可，该值会应用到所有过渡属性上  
 **·tansition-timing-function**  
                过渡函数，有linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。其实它们都是贝赛尔曲线。  
 **·tansition-delay**  
                延迟开始过渡的时间，默认值是0，表示不延迟，立即开始过渡动作，单位是s或ms

--------------------

**3.transform** 变形函数，分别是translate位移，scale缩放，rotate旋转，skew倾斜，matrix矩阵  
        2D转换  
                translate(x,y) 横向移动长度x,竖向移动长度y，平移不变形，角度不变  
      translateX(x)  
                translateY(y)  
                rotate(angle)  旋转角度，参数为正值，顺时针旋转，参数为负值则逆时针旋转，不变形，角度变      
      scale(x,y)    宽度变为原来尺寸的x倍，高度变为原来的y倍，放大或缩小，角度不变  
                scaleX(x)  
                scaleY(X)  
                skew(x,y)         围绕x轴翻转x,围绕y轴翻转y,往X轴方向倾斜，往Y轴方向倾斜，正值表示向正方向倾斜，负值表示往负方向倾斜，变形，角度也变  
                skewx(X)  
                skewy(X)  
                matrix()    把所有的2D转换方法组合在一起，需要6个参数，允许旋转，缩放，移动以及倾斜  
        3D转换  
                translate3d(x,y,z) x轴移动x，y轴移动y，z轴移动z  
                translateX(x)  
                translateY(y)  
                translateZ(z)  
                rotate3d(x,y,z,angle)  
                rotateX(x)  
                rotateY(y)  
                rotateZ(z)  
                scale3d(x,y,z)  
                scaleX(x)  
                scaleY(y)  
                scaleZ(z)  
                matrix3d()

--------------------

**4.position** 元素定位  
**position: absolute;**  
        绝对定位，脱离标准文档流，标准文档流的性质（暂时理解为不按原来的样式排列）绝对定位之后都不遵循了，元素位置通过'left','top',;'bottom','right'属性进行规定  
**position: fixed;**  
        绝对定位，相对于浏览器窗口进行定位，脱离标准文档流 ,页面如何滚动，这个盒子的位置不变。元素通过'left','top',;'bottom','right'属性进行规定  
**position: relative;**  
        相对定位，相对于其正常位置进行定位，'left:-20px'就是在正常位置基础上往左偏移20像素  
**position: static;**  
        默认值，没有定位，元素出现在正常的流中  
**position: inherit;**  
        从父元素继承position属性

**\*标准文档流** 元素排版过程中，自动从左往右，从上到下流式排列。并在每行中从左到有的顺序排放元素。  
 标准文档流等级：  
    **块级元素** （p,div,h,ul,ol,dl,li,dt,dd）  
        霸占一行，不与其它元素并列  
        能接受宽、高  
        如果不设置宽，则默认继承父元素的宽度  
    **行内元素** (span, strong, em, br,img,input,label,select,textarea)  
        与其它元素并排  
        不能设置宽高。默认的宽度就是文字的宽度  
    行内元素与块级元素可以相互转换  
    display:inline 行内元素 display: block; 块级元素  
     
    文本级：p、span、a、b、i、u、em  
    容器级：div、h系列、ul、dl、ol、li、dt、dd

--------------------

**5.top与margin-top区别**  
        margin-top会给相对定位的父元素增加边框距离，top是移动块元素

--------------------

**6.浮动**  
        float脱离文档流  
        float实现浮动 clear清除浮动

--------------------

**7.伪元素** 向某些选择器设置特殊效果  
::before 可以在元素的内容前面插入新内容  
::after  可以在元素的内容之后插入新内容  
 :first-line 用于向文本的首航设置特殊样式  
 : first-letter 用于向文本的首字母设置特殊样式

--------------------

**8.伪类** 向选择器增加特殊效果  
        伪类名称对大小写不敏感  
**a:link** \{color: \#FF0000\} 未访问的链接  
**a:visited** \{color: \#00FF00\} 已访问的链接  
**a:hover** \{color: \#FF00FF\} 鼠标移动到连接上 a:hover必须位于a:link和a:visited之后，才是有效的  
**a:active** \{color: \#0000FF\} 选定的链接 必须位于a:hover之后  
**:focus** 获取焦点 输入框  
**:first-child** 向元素的第一个元素添加样式  
**: lang** 向带有指定lang的元素指定样式

--------------------

**9.opacity 透明度**  
        opacity 1照常显示

--------------------

**10.@media规则**  
   媒介类型名称对大小写不敏感  
   all     用于所有的媒介设备。  
   aural        用于语音和音频合成器。  
   braille      用于盲人用点字法触觉回馈设备。  
   embossed     用于分页的盲人用点字法打印机。  
   handheld     用于小的手持的设备。  
   print        用于打印机。  
   projection   用于方案展示，比如幻灯片。  
   screen       用于电脑显示器。  
   tty  用于使用固定密度字母栅格的媒介，比如电传打字机和终端。  
   tv   用于电视机类型的设备。