css属性

css属性

样式属性

list-style：none：列表样式没有，功能是去掉无序列表的前缀

text-decoration：none：文本装饰没有，功能是去掉超链接的下划线

color：css属性，设置文本内容的颜色，color属性主要可以应用英语单词、十六进制

文本属性

text：文本

-decoration：文本修饰线

• none：没有修饰线
• underline：下划线
• line-through：删除线

-align：文本对齐

• left：向左对齐
• center：向中对齐
• right：居中对齐

-indent：首行文本内容之前的缩进量

• text-indent：2em，首行缩进两个字符，em是字符宽度

字体属性

font：文字

-size：字体大小，单位为px

-family：字体家族，设置字体的样式，也可以设置自定义的字体样式，常用的是宋体，默认使用的是微软雅黑。

-weight：字体重量

• bold：字体加粗，与700等值

• normal：字体正常粗细，与400等值

• lighter：更细，大多数字体不支持

• bolder:更粗，大多数字体不支持

-style：字体样式

• normal：取消倾斜
• italic：设置为倾斜（常用）
• oblique：设置为倾斜（不常用）

段落和行相关属性

line-height：行高，有三种书写方式

• 30px：行高为30像素
• 1.5：行高为字号的1.5倍（推荐写法）
• 150%：其实也是行高为字号的1.5倍

表格属性

border-collapse：边框合并

• collapse：合并边框

table-layout：

• fixed：固定表格大小，表格不会随着文本的增多而扩大

显示属性转换

display：

• inline：行内，将标签类型转为行内类型
• block：块儿，将标签类型转为块儿类型
• inline-block：行内块儿，将标签类型转为行内块类型
• none：没有，隐藏该模块
• flex：弹性盒子
• inline-flex：行内弹性盒子

隐藏标签属性

display：none：隐藏标签，彻底放弃位置，就相当于该标签不存在

opacity：0：不透明度，1是完全不透明，0是完全透明

visibility：hidden：可见性，hidden隐藏，默认visible可见，位置还在

margin：-999px：margin是判断盒子外边距的，负值就会将它移出页面，就显示不出来了。

宽高为0，只能在空标签中设置

盒模型相关属性

height：内容的高度，不是盒子的高度

width：内容的宽度，不是盒子的高度

padding：内边距，文字等距离盒子边缘的距离

border：边框属性

• solid 1px green：边框：实线+边框宽度+边框颜色
• dashed 1px green ：边框：虚线+边框宽度+边框颜色
• groove 1px green ：边框：3d凹槽+边框宽度+边框颜色
• double 1px green：边框：双线+边框宽度+边框颜色

background-color：盒子背景颜色

margin：外边距

-bottom：边缘向下

-top：边缘向上

-left：边缘向左

-right：边缘向右

margin:

• 0 auto:动态居中显示

box-sizing：

• border-box：边框盒
• content-box：内容盒

border-radius：边框半径，单位为px

box-shadow：盒子阴影

• 四个属性值：x偏移量+y偏移量+模糊量+颜色
• 五个属性值：x偏移量+y偏移量+模糊量+阴影延展+颜色
• inset：inset+x偏移量+y偏移量+模糊量+阴影延展+颜色
• 多阴影：用逗号隔开以上设置，实现多阴影叠加

min

-width：最小宽度

-height：最小高度

max

-width：最大宽度

-height：最大高度

浮动相关属性

float：浮动

• left：向左浮动
• right：向右浮动

overflow：溢出异常

• hidden：溢出隐藏，隐藏溢出到盒子边缘外的内容。

clear：清除浮动影响

• both：左右两边都清除

定位属性

position：static：静态定位，默认的定位属性

position：relative；相对定位，下面是跟着的属性，快捷键por

• top：从上向下移动的位置

• left：从左向右移动的位置

• bottom：从下向上移动

• right：从右向左移动

position：absolute；绝对定位,快捷键poa，可以以相对定位父元素作为基准点

• top：以上边为横轴

• left：以左边为竖轴

• bottom：以下边为横轴

• right：以右边为竖轴

position：fixed；绝对定位，只会以页面作为基准点，与父标签无关

堆叠顺序属性

z-index：层级关系

• 数值没有单位：数值越大，层级越高越在上面显示

鼠标变型属性

cursor：光标

• pointer：光标小手状
• move：光标移动状

外围线属性

outline:none；外围线

禁止重置大小属性

resize：none；

边框线属性

border：边框线

• 线宽度+线颜色+线型
  • solid：实线
  • dashed：虚线
  • dotted：点状线
  • groove：3d线
  • double：双实线

-color：边框颜色，可以跟四个值、三个值、两个值、一个值

-width：边框宽度，可以跟四个值、三个值、两个值、一个值

-style：边框样式，可以跟四个值、三个值、两个值、一个值

单一小属性的权重比大属性的权重高，可以帮助你层叠大属性。

-top：上边框

-right：右边框

-bottom：底部边框

-left：左边框

• none：去掉一方的边框

四个边框每个又可以划分为三要素的小属性。一共可以细分为12个小属性。

• border-top-color：上边框颜色
• border-right-color：右边框颜色
• border-bottom-style：下边框的样式
• border-left-width：左边框宽度

-radius：半径，属性值单位为px

• 百分比如：20%：相当于按照每条边长度的20%
• 50%：如果盒子是正方形则表现为圆形，如果盒子是长方形则表现为椭圆形。

-top-left-radius：左上角半径

-top-right-radius：右上角半径

-bottom-left-radius：左下角半径

-bottom-right-radius：右下角半径

背景属性

background：背景

• background-color+url（）：先渲染背景color，再在上面渲染图片
• 背景复合属性：
  • background：颜色+路径()+背景重复+背景位置/背景大小+背景固定；

-color:背景颜色

-img：图片

• url：图片路径，可以是相对路径，也可以是http://绝对路径
• linear-gradient：线性渐变
  • (bottom right,blue，red）:从右下角渐变，从蓝变红
  • (right， blue 10%, yellow %20,red):10%到20%是蓝色到黄色的渐变区间
  • (45deg,blue,red):45度角从左到右，从蓝色渐变为红色
• radial-gradient：径向渐变
  • （50% 50%，red，blue）:前两个是圆心位置，后边是从红色变成蓝色

-repeat：重复

• repeat：x,y方向均平铺
• repeat-x：仅x方向平铺
• repeat-y：仅y方向平铺
• no-repeat：不平铺

-size：大小

• 宽度 高度：指定盒子的宽度和高度
• %50 auto：宽度为盒子的%50，高度等比例自动调整
• contain：包含；保持像素的长宽比，等比例进行缩放，保证图片显示完整，不保证完全填充背景；
• cover：覆盖；保持像素长宽比，等比例进行缩放，保证完全填充盒子，不保证图片完整。

-clip：裁切，只有border是solid或dotted的时候才生效

• border-box：裁切到边框区域，就是边框区域也有图片背景

• padding-box：裁切到padding区域，边框区域没有图片背景

• context-box：裁切到内容区域，padding区域和border区域没有图片背景

-origin：起源

• content-box；内容盒子，如果不指定该值，就是以左上角为起点进行平铺，使用了该属性，则证明从内容盒子开始平铺。

-attachement：背景固定

• fixed：固定的，盒子内部滚动，和外部滚动，图片背景都不会动
• scroll：滚动，盒子内部滚动，背景不动，外部滚动，背景动
• local：本地的，盒子内部滚动，和外部滚动，图片背景都会跟着动

-position：背景定位

• 100px 150px：说明背景图片出现在盒子距左100px，距上150px的位置
• center center：背景图片出现在盒子水平、垂直都居中的盒子位置
• bottom center：背景图片出现在盒子垂直向下、水平居中的盒子位置

溢出异常属性

overflow：溢出异常

• hidden：隐藏，超出盒子的内容隐藏
• scroll：滚动条显示盒子的内容
• auto：自动，如果内容超出去了，才添加滚动条，否则不添加滚动条

-y:y轴方向溢出异常

• overlay：让滚动条不占主宽度

变型属性

transform：变型

• rotate(45deg):以中心为原点，顺时针旋转45度

  • rotateX：按盒子高度一半的横轴为x中心轴进行图片的旋转
  • rotateY：按盒子宽度一半的竖轴为y中心轴进行图片的旋转
  • rotateZ：与rotate功能相同，以盒子中点为圆点进行旋转，实际是2D旋转

• translate：位移

  • 100px，200px：向右移100px，向下移200px.
  • -50%，-50%:向左和向上移动本盒子宽度的50%，注意，是本盒子
  • translateX:沿X轴空间移动，横向移动3d旋转的图片
  • translateY：沿Y轴空间移动，与定位移动不同，这个空间移动有一定的空间感效果
  • translateZ：沿Z轴空间移动，有空间立体感。

• scale：缩放,宽高同时缩放，可以是两个值（1,1.5），（x,Y）

  • 3：放大到原图片3倍
  • 0.5：缩小到原图片的0.5倍
  • scaleX：宽度缩放
  • scaleY：高度缩放

• skew：斜切

  • 10deg，20deg：延x方向斜切10度，延y方向斜切20度

-origin:原点，以哪个点为旋转点

• 0 0；以左上角为原点
• 10px 10px:以x轴方向10px，y轴方向10px地方作为原点
• 0 100%：以左下角为原点
• right bottom:以右下角为原点

perspective：立体强度，跟px属性值，给某个元素添加此属性，它的子元素的边就会有近大远小的效果，就是近边随着越来越大，远的边随着旋转越来越小，后边跟的像素越小，近大远小的幅度越大。

• perspective的属性值表示的是距离平面的位置距离，把平面看做是一面墙，10px表示在站在离墙10像素的地方来看这面墙。

-style:

• flat：平面效果，2d效果

• preserve-3d:维持3d效果，当一个盒子又是演员，又是舞台时，一定要写这条属性，保留自身内部的3d效果

过渡属性

transition:过渡

• 需要变换的属性类型+动画时长+变换速度+延迟时间；
• width + 5s + linear + 0s；
• all + 5s + linear+ 0s；所有变换了的属性都会过度

-property：属性，单独设置想要过渡的属性

-duration：持续时间，设置动画切换的时长

-timing-function：时间曲线，设置过渡动画的运动曲线

• linear：线性，匀速
• ease：两头慢，中间块
• ease-in：开始慢，越来越快
• ease-out：开始快，越来越慢
• ease-in-out：两头慢，中间快，比ease平缓

-delay：延迟时间，多长时间后启动。

动画属性

@Keyframes 动画名{}：创建一个关键帧动画

• from{}:动画的起始状态，里面可以写属性，和多帧划分中的0%一样

• to{}:动画的结束状态，里面也可以写属性，和多帧划分中的100%一样

• 多帧划分动画

  • 可以以百分比进行动画多帧的划分
    • 0%{} 10%{} 50%{} 70%{} 100%{}

animation：在盒子中使用@keyFrames定义的动画

• animation：动画名+动画时间+时间曲线+延迟时间+播放次数+交替播放+开始或结束动画状态
• animation: name+duration+timing-function+delay+iteration-count+direction+fill-mode;
• 例子：animation:myAnim 1s linear 1s infinite alternate both running;
  • name：动画名，与用@Keyframes定义的动画名相同
  • duration：动画时间，整个动画的执行时间
  • timing-function：时间曲线，就是动画速率的快慢
    • steps(10):将整个动画分为10步分页播放，常用于精灵图动态播放。
    • linear：线性，整个动画速率匀速
    • ease：两头慢中间快
    • ease-in：开始慢，越来越快
    • ease-out：开始快，越来越慢
    • ease-in-out:两头慢，中间快，比ease更缓和
  • delay：延迟时间，动画在开始几秒后再开始运动
  • iteration-count：重复次数
    • 5：重复次数
    • infinite：无限重复
  • direction：交替播放
    • alternate：交替，奇数次正播放，偶数次逆播放
    • alternate-reverse：反向交替，奇数次逆播放，偶数次正播放
  • fill-mode：开始或结束动画状态
    • forwards：定格在结束
    • backwards：决定动画初始状态为keyframes的初始状态

-play-state：动画停止和播放

• paused：暂停
• running：运行

垂直对齐

vetical-align：垂直对齐属性

• baseline：基准线（默认值）
• top:顶线对齐
• middle：中线对齐
• bottom：底线对齐

屏幕适配属性

@media：媒体

• screen:屏幕
• and：and左右要加空格，后面加条件

        /* 宽度0-600范围 */
        @media screen and (max-width:600px) {
            .box {
                width: 100px;
                height: 10px;
            }
        }

        /* 宽度601-900px */

        @media screen and (min-width:601px) and (max-width:900px){
            .box {
                width: 200px;
                height: 15px;
            }
        }

flex相关属性

dispaly：

• flex：弹性盒子
• inline-flex：行内弹性盒子

设置了这两个属性的元素，就被视为了容器，它里面的子元素，就被视为了项目

盒子设置的属性

弹性盒子元素里能够设置的属性：（必须是设置了display：flex或者inline-flex的容器才能设置的属性）

flex：弹性容器

• -direction：容器的主轴方向

  • row：水平轴为主轴（默认）
  • column：垂直轴为主轴
  • row-reverse：水平轴为主轴，以右边为起点
  • coloumn-reverse：垂直轴为主轴，以底部为起点

• -warp：容器自动换行

  • warp：换行
  • nowarp：不换行（默认）
  • warp-reverse：反方向换行

• -flow：复合，decoration属性和warp两个属性的缩写

  • 第一个属性：指的是flex-decoration属性的值
  • 第二个属性：指的是flex-warp属性的值

justify-content：子元素的对齐和空间分配方式，项目与主轴的排列方式

• flex-start：项目位于容器主轴方向开头
• flex-end: 项目位于容器主轴方向结尾
• center: 项目位于容器主轴方向中间位置
• space-between:之间，盒子里边项目之间平分空隙
• space-around:环绕，盒子里边每个项目左右平分空隙
• space-evenly:均匀的，盒子里边盒子与项目之间，项目与项目之间平分空隙

align-items：控制单项目与容器侧轴方向的对齐方式

• flex-start:项目位于容器侧轴方向开头
• flex-end:项目位于容器侧轴方向结尾
• center：项目位于容器侧轴方向中间（上下间距相同）
• stertch：项目被拉伸以适应容器侧轴方向长度

项目设置的属性

order：设置数值1，默认所有项目的order值为0，默认按照order从小到大的顺序排列项目

flex-grow：放大，1：分配容器剩余的空间均分给每一个项目

flex-shrink：缩小

• 1；默认值是1，项目长度之和超出容器，默认缩小

• 0：项目长度之和超出容器，不缩小

flex-basis：设置项目在主轴占的大小

• 主轴为row：与设置width相同
• 主轴为column：与设置height相同

flex：1：决定项目占盒子主轴方向大小均分后1份大小。如果一行中的一个项目设置了这个值，那么其他项目应该都设置，否则没有设置的项目就不会有空间。

举例：

        a{
            flex: 1;
            background-color: blanchedalmond;
            height: 100px;

        }
        .a1{
            background-color: blue;
            flex: 3;
        }
        .a2{
            background-color: brown;
            flex: 2;
        }
        a3{
            background-color: cadetblue;
        }

• a1占主轴长度均分后的3份
• a2占主轴长度均分后的2份
• a3占主轴长度均分后的1份

filter属性

filter:滤器，当滤镜用

        img{
            /* 图片模糊度 */
            filter:blur(30px);
            /* 图片明暗程度 */
            /* 全暗 */
            filter: brightness(0);
            /* 全明 */
            filter: brightness(1);
            /* 控制图片灰度 ,1表示全灰，0表示全不灰*/
            filter: grayscale(1);
            /* 控制图片色相饱和度 */
            filter: hue-rotate(45deg);
            /* 取图片反色 ,默认为0,取反色用1*/
            filter: invert(1);
        }