没心没肺づ惜

V1

2022/08/22阅读:32主题:默认主题

CSS的常用属性

CSS的常用属性

1.box-sizing定于盒子模型组成模式

    /* 
    box-sizing 属性定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等  
    */

    box-sizingcontent-box/* 
                                默认值 如果你设置一个元素的宽为 100px,
                                那么这个元素的内容区会有 100px 宽,
                                并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中 
                             */

    box-sizingborder-box/* 
                                告诉浏览器:你想要设置的边框和内边距的值是包含在 width 内的,
                                也就是说,如果你将一个元素的 width 设为 100px,那么这 100px 会包含它的 border 和 padding,
                                内容区的实际宽度是 width 减 去(border + padding) 的值
                                大多数情况下,这使得我们更容易地设定一个元素的宽高
                                注:border-box 不包含 margin
                             */

    box-sizinginherit;   /* 指定 box-sizing 属性的值,应该从父元素继承  */

2.font 文本

当设置文字大小小于12px这时候Chrome 这款任性的浏览器做了限制,低于 12px 的,一律按 12px 显示。理由是 Chrome 认为低于 12px 的中文对人类是不友好的,用户是可以自行调整的,进入 chrome://settings/fonts 设置,滚动到最下方你就可以调整 12px 为其他值 但我们解决方法肯定不能取决于用户去设置 我们可以先设置 12px,然后使用 transform: scale(0.833333) 将元素缩小来达到更小的文字效果

    /* font 文本*/
    /* 
    font-family 属性指定一个元素的字体  
    */

    font-familyArialHelveticasans-serif;  /* 用于某个元素的字体族名称或/及类族名称的一个优先表 默认值:取决于浏览器  */
    font-familyinherit;   /* 规定应该从父元素继承字体系列  */

    /* font-size 设置字体大小  */
    font-size: 12px/* 把 font-size 设置为一个固定的值  */
    font-size: 80%; /* 把 font-size 设置为基于父元素的一个百分比值  */
    font-sizeinherit/* 规定应该从父元素继承字体尺寸  */

    font-sizelarger/* 把 font-size 设置为比父元素更大的尺寸  */
    font-sizesmaller/* 把 font-size 设置为比父元素更小的尺寸  */
    font-sizexx-small/* 把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large 默认值:medium  */
    font-sizex-small;
    font-sizesmall;
    font-sizemedium;
    font-sizelarge;
    font-sizex-large;
    font-sizexx-large;

    /* 
    font-style 设置文本的字体样式  
    */

    font-stylenormal;  /* 默认值 浏览器显示一个标准的字体样式  */
    font-styleitalic;  /* 浏览器会显示一个斜体的字体样式  */
    font-styleoblique;  /* 浏览器会显示一个倾斜的字体样式  */
    font-styleinherit;  /* 规定应该从父元素继承字体样式  */

    /* 
    font-weight 设置文本的粗细 
    */

    font-weightnormal/* 默认值 定义标准的字符  */
    font-weightbold/* 定义粗体字符  */
    font-weight: 700; /* 定义由细到粗的字符(100/200.../900) 400 等同于 normal,而 700 等同于 bold  */
    font-weightbolder/* 定义更粗的字符  */
    font-weightlighter/* 定义更细的字符  */
    font-weightinherit/* 规定应该从父元素继承字体的粗细  */

3.color文字颜色

    colorinherit/* 指定颜色,应该从父元素继承 */
    /* 颜色的名称,比如red, blue, brown, lightseagreen等,不区分大小写  */
    color:red;
    /* 十六进制符号 #RRGGBB 和 #RGB(比如 #ff0000) "#" 后跟 6 位或者 3 位十六进制字符(0-9, A-F)不区分大小写  */
    color#ff0055/* 两两重复可缩写#f05 */
    color#f05
    /* RGB,红-绿-蓝(red-green-blue (RGB))规定颜色值为 rgb 代码的颜色,函数格式为 rgb(R,G,B),取值可以是 0-255 的整数或百分比  */
    colorrgb(255,0,51);
    colorrgb(100%,0%,20%);
    /* RGBA,红-绿-蓝-阿尔法(RGBa)RGBa 扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度 a 表示透明度:0=透明;1=不透明  */
    colorrgba(255,0,51,0);    /* 透明 */
    colorrgba(255,0,51,0.8);    /* 80% 不透明 */
    colorrgba(255,0,51,1);    /* 不透明 */

    /* HSL,色相-饱和度-明度(Hue-saturation-lightness)色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度 
    饱和度和明度由百分数来表示 
    100% 是满饱和度,而 0% 是一种灰度 
    100% 明度是白色, 0% 明度是黑色,而 50% 明度是"一般的"  */

    colorhsl(120,100%,25%);    /* 深绿色 */  
    colorhsl(120,100%,50%);    /* 绿色 */       
    colorhsl(120,100%,75%);    /* 浅绿色 */

    /* HSLA,色相-饱和度-明度-阿尔法(HSLa)HSLa 扩展自 HSL 颜色模式,包含了阿尔法通道,可以规定一个颜色的透明度  a 表示透明度:0=透明;1=不透明  */
    colorhsla(240,100%,50%,0.05);   /* 5% 不透明 */   
    colorhsla(240,100%,50%, 0.4);   /* 40% 不透明 */  
    colorhsla(240,100%,50%, 0.7);   /* 70% 不透明 */  
    colorhsla(240,100%,50%,   1);   /* 完全不透明 */

4.background背景

    /* 
    background : [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip] 
    */

    backgroundred url('图片路径.png') no-repeat top left / 100% auto;

    /* background-color设置背景颜色与上述color文字颜色设置方式一致*/
    background-colortransparent/*默认  透明*/
    background-colorinherit/*指定背景颜色,应该从父元素继承*/
    background-color:red;
    background-color:#00ff00;
    background-color:rgb(255,0,255);
    background-color:rgb(255,0,255,0.8);
    background-colorhsl(120,100%,75%);
    background-colorhsl(120,100%,75%,0.8);

    /* 
    background-image设置一个元素的背景图像 元素的背景是元素的总大小,包括填充和边界(但不包括边距) 
    默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向  
    提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,可以使用背景色带代替 
    */

    background-image:url('图像的路径.png'); /* 图像的URL */
    background-imagenone/* 无图像背景会显示 这是默认 */
    background-imageinherit/* 指定背景图像应该从父元素继承 */

    /* 
    linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 
    创建一个线性渐变,需要指定两种颜色,还可以实现不同方向(指定为一个角度)的渐变效果,
    如果不指定方向,默认从上到下渐变  不常用 
    */

    background-imagelinear-gradient(bluered); /* 从上到下,蓝色渐变到红色 */
    background-imagelinear-gradient(45degbluered); /* 渐变轴为45度,从蓝色渐变到红色 */
    background-imagelinear-gradient(to left topbluered); /* 从右下到左上、从蓝色渐变到红色 */
    background-imagelinear-gradient(0degbluegreen 40%, red); /* 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

    /* repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"  */
    background-imagerepeating-linear-gradient(45degredblue 7%, green 10%);
    /* repeating-radial-gradient() 函数用于创建重复的径向渐变 "图像"  */
    background-imageradial-gradient(ellipse at center#0f0#030);

    /* 
    background-position 设置背景图像的起始位置  
    注意对于这个工作在Firefox和Opera,background-attachment必须设置为 "fixed(固定)". 
    */

    background-positioncenter center/* 第一个值是水平位置(left/center/right),第二个值是垂直(top/center/bottom) */
    background-position: 0 0; /* 俩个值都可设置为固定数值亦或是百分比数值 */
    background-positioninherit;   /* 指定background-position属性设置应该从父元素继承 */

    /* 
    background-size 设置背景图片大小  
    */

    background-size: 100px 100px/* 设置背景图片高度和宽度 第一个值设置宽度,第二个值设置的高度 如果只给出一个值,第二个是设置为 auto(自动) */
    background-size: 100%;
    background-size: 100% auto/* 背景图宽度100%,高度自适应 */
    background-sizeauto 100%; /* 背景图高度100%,宽度自适应 */
    background-sizecover/* 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小  */
    background-sizecontain/* 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小  */

    /* 
    background-repeat 设置如何平铺对象的 background-image 属性 
    默认情况下,重复background-image的垂直和水平方向  
    */

    background-repeatrepeat;  /* 背景图像将向垂直和水平方向重复 这是默认 */
    background-repeatrepeat-x;  /* 只有水平位置会重复背景图像 */
    background-repeatrepeat-y;  /* 只有垂直位置会重复背景图像 */
    background-repeatno-repeat;  /*  background-image 不会重复 */
    background-repeatinherit;  /*  指定 background-repeat 属性设置应该从父元素继承 */

    /* 
    background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动  
    不常用 
    */

    background-attachmentscroll/* 背景图片随着页面的滚动而滚动,这是默认的  */
    background-attachmentfixed/* 背景图片不会随着页面的滚动而滚动  */
    background-attachmentlocal/* 背景图片会随着元素内容的滚动而滚动  */
    background-attachmentinitial/* 设置该属性的默认值  */
    background-attachmentinherit/* 指定 background-attachment 的设置应该从父元素继承  */

    /* 
    background-Origin属性指定background-position属性应该是相对位置  
    不常用 
    */

    background-originborder-box/* 背景图像边界框的相对位置 */
    background-originpadding-box;  /* 背景图像填充框的相对位置 */
    background-origincontent-box/* 背景图像的相对位置的内容框 */

    /* 
    background-clip属性指定背景绘制区域  
    不常用 
    */

    background-clipborder-box/* 默认值 背景绘制在边框方框内(剪切成边框方框) */
    background-clippadding-box;  /* 背景绘制在衬距方框内(剪切成衬距方框) */
    background-clipcontent-box/* 背景绘制在内容方框内(剪切成内容方框) */

    /* background-blend-mode 属性定义了背景层的混合模式(图片与颜色)  ie完全不支持 暂不做介绍*/

5.width 设置元素的宽度

以上是p标签设置后效果,而p标签默认100%宽,如果是span标签将会是别的效果

    widthauto/* 默认 浏览器会计算出实际的宽度  */
    width: 100px/* 使用 px、em、rem、cm 单位定义宽度  */
    width: 100%; /* 定义基于包含块(父元素)宽度的百分比宽度  */
    widthinherit/* 规定应该从父元素继承 width 属性的值  */

6.height 设置元素的宽度

示例100%看着并不是自己想要的,是因为受父级影响,当父级位置高度200px后当前高度100%才会有200px高度

    heightauto/* 默认 浏览器会计算出实际的高度  */
    height: 100px/* 使用 px、em、rem、cm 等单位定义宽度  */
    height: 100%; /* 基于包含它的块级对象的百分比高度  */
    heightinherit/* 规定应该从父元素继承 height 属性的值  */

7.line-height 设置行高 注意: 负值是不允许的

    line-heightnormal/* 默认 设置合理的行间距 */
    line-height: 28px/* 设置数字,此数字会与当前的字体尺寸相乘来设置行间距 */
    line-height: 1.5/* 设置固定的行间距 */
    line-height: 100%; /* 基于当前字体尺寸的百分比行间距 */
    line-heightinherit/* 规定应该从父元素继承 line-height 属性的值 */

8.letter-spacing 属性增加或减少字符间的空白(字符间距)

    letter-spacingnormal/* 默认 规定字符间没有额外的空间 */
    letter-spacing: 2px/* 定义字符间的固定空间(允许使用负值) */
    letter-spacinginherit/* 规定应该从父元素继承 letter-spacing 属性的值 */

9.text-indent 设置文本块中首行文本的缩进

    text-indent:2rem/* 定义固定的缩进 默认值:0 */
    text-indent:50%; /* 定义基于父元素宽度的百分比的缩进 */
    text-indent:inherit/* 规定应该从父元素继承 text-indent 属性的值 */

10.text-shadow 设置阴影文本

    /* 
    text-shadow 属性应用于阴影文本
    text-shadow: h-shadow v-shadow blur color;
        h-shadow  必需 水平阴影的位置 允许负值
        v-shadow  必需 垂直阴影的位置 允许负值
        blur  可选 模糊的距离
        color  可选 阴影的颜色
    */

    text-shadow:2px 2px 4px #000/* 定义水平阴影的位置2px 垂直阴影的位置2px 模糊的距离4px 阴影的颜色#000  */

11.text-align 设置文本的水平对齐方式

    text-alignleft/* 把文本排列到左边 默认值:由浏览器决定 */
    text-alignright/* 把文本排列到右边 */
    text-aligncenter/* 把文本排列到中间 */
    text-alignjustify/* 实现两端对齐文本效果 */
    text-aligninherit/* 规定应该从父元素继承 text-align 属性的值 */

12.text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等

    /* 
    text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等
    text-decoration 属性是以下三种属性的简写:

        text-decoration-line 几乎所有的主流浏览器都不支持 text-decoration-line 属性 
                                Firefox 支持另一个可替代该属性的属性,即 -moz-text-decoration-line 属性 
        text-decoration-color 几乎所有的主流浏览器都不支持 text-decoration-color 属性 
                                Firefox 支持另一个可替代该属性的属性,即 -moz-text-decoration-color 属性 
        text-decoration-style 属性规定线条如何显示
            solid  默认值 线条将显示为单线
            double  线条将显示为双线
            dotted  线条将显示为点状线
            dashed  线条将显示为虚线
            wavy  线条将显示为波浪线
            initial 设置该属性为它的默认值
            inherit 从父元素继承该属性

    */

    text-decorationnone/* 默认 定义标准的文本 */
    text-decorationunderline/* 定义文本下的一条线 */
    text-decorationoverline/* 定义文本上的一条线 */
    text-decorationline-through/* 定义穿过文本下的一条线 */
    text-decorationblink/* 定义闪烁的文本 */
    text-decorationinherit/* 规定应该从父元素继承 text-decoration 属性的值 */

13.box-shadow 设置一个或多个下拉阴影的框

    /* 
    box-shadow 设置一个或多个下拉阴影的框
    box-shadow: h-shadow v-shadow blur spread color inset;
        h-shadow  必需的 水平阴影的位置 允许负值
        v-shadow  必需的 垂直阴影的位置 允许负值
        blur  可选 模糊距离
        spread  可选 阴影的大小
        color  可选 阴影的颜色
        inset  可选 从外层的阴影(开始时)改变阴影内侧阴影
    */

    box-shadow: 2px 2px 4px #000/* 定义水平阴影的位置2px 垂直阴影的位置2px 模糊的距离4px 阴影的颜色#000  */

14.padding 简写属性在一个声明中设置所有填充属性(内边距) 该属性可以有1到4个值 四个值分别为:上、右、下、左

    padding:10px 5px 15px 20px/* 四个值分别为:上、右、下、左 */
    padding:10px 5px 15px/* 三个值分别为:上、左右、下 */
    padding:10px 5px/* 二个值分别为:上下、左右 */
    padding:10px/* 一个值为:上下左右 */
    padding: 20%; /* 规定基于父元素的宽度的百分比的填充 */
    paddinginherit/* 指定应该从父元素继承padding(内边距) */

    padding-top: 10px/* 设置上边距 */
    padding-right: 10px/* 设置右边距 */
    padding-bottom: 10px/* 设置下边距 */
    padding-left: 10px/* 设置左边距 */

15.margin 简写属性在一个声明中设置所有外边距属性 该属性可以有1到4个值 四个值分别为:上、右、下、左

    margin:10px 5px 15px 20px/* 四个值分别为:上、右、下、左 */
    margin:10px 5px 15px/* 三个值分别为:上、左右、下 */
    margin:10px 5px/* 二个值分别为:上下、左右 */
    margin:10px/* 一个值为:上下左右 */
    marginauto/* 浏览器计算外边距 */
    margin: 20%; /* 规定基于父元素的宽度的百分比的外边距  */
    margininherit/* 规定应该从父元素继承margin(外边距) */

    margin-top: 10px/* 设置上边距 */
    margin-right: 10px/* 设置右边距 */
    margin-bottom: 10px/* 设置下边距 */
    margin-left: 10px/* 设置左边距 */

16.border 设置元素边框的样式、宽度和颜色可以设置的属性分别(按顺序):border-width, border-style 和 border-color

    /* 
    border 设置元素边框的样式、宽度和颜色  
    可以设置的属性分别(按顺序):border-width, border-style 和 border-color 
    */


    bordersolid/* 边框样式 */
    border: 2px dotted/* 边框宽度 | 边框样式 */
    borderoutset #f33/* 边框样式 | 边框颜色 */
    bordermedium dashed green/* 边框宽度 | 边框样式 | 边框颜色 */
    borderinherit/* 指定应该从父元素继承border属性值 */
    borderinitial/*  */
    borderunset/*  */

    /* 
    border-width属性设置一个元素的四个边框的宽度 
    此属性可以有一到四个值 四个值分别为:上、右、下、左 
    */

    border-width: 1px 2px 3px 4px/* 定义上、右、下、左的边框  */
    border-width: 1px 2px 3px/* 定义上、左右、下的边框  */
    border-width: 1px 2px/* 定义上下、左右的边框  */
    border-width: 1px/* 定义上下左右边框的宽度  */
    border-widthmedium/* 默认 定义中等的边框  */
    border-widththin/* 定义细的边框  */
    border-widththick/* 定义粗的边框  */
    border-widthinherit/* 规定应该从父元素继承边框宽度  */

    /* 
    border-style属性设置一个元素的四个边框的样式 
    此属性可以有一到四个值 四个值分别为:上、右、下、左 
    */

    border-styledotted solid double dashed/* 定义上、右、下、左的边框样式  */
    border-styledotted solid double/* 定义上、左右、下的边框样式  */
    border-styledotted solid/* 定义上下、左右的边框样式  */
    border-stylesolid/* 定义上下左右边框的样式  定义实线 */
    border-stylenone/* 定义无边框 */
    border-stylehidden/* 与 "none" 相同 不过应用于表时除外,对于表,hidden 用于解决边框冲突 */
    border-styledotted/* 定义点状边框 在大多数浏览器中呈现为实线 */
    border-styledashed/* 定义虚线 在大多数浏览器中呈现为实线 */
    border-styledouble/* 定义双线 双线的宽度等于 border-width 的值 */
    border-stylegroove/* 定义 3D 凹槽边框 其效果取决于 border-color 的值 */
    border-styleridge/* 定义 3D 垄状边框 其效果取决于 border-color 的值 */
    border-styleinset/* 定义 3D inset 边框 其效果取决于 border-color 的值 */
    border-styleoutset/* 定义 3D outset 边框 其效果取决于 border-color 的值 */
    border-styleinherit/* 规定应该从父元素继承边框样式 */

    /* 
    border-color属性设置一个元素的四个边框颜色 
    此属性可以有一到四个值 四个值分别为:上、右、下、左 
    */

    border-colorred blue green pink/* 定义上、右、下、左的边框颜色 */
    border-colorred blue green/* 定义上、左右、下的边框颜色 */
    border-colorred blue/* 定义上下、左右的边框颜色 */
    border-colorred/* 定义上下左右边框的颜色 */
    border-colortransparent/* 指定边框的颜色应该是透明的 这是默认 */
    border-colorinherit/* 指定边框的颜色,应该从父元素继承 */

    /*
    border-radius 允许你设置元素的外边框圆角 
    当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆 
    这个(椭)圆与边框的交集形成圆角效果 
    border-radius 属性是一个最多可指定四个 border-*-radius 属性的复合属性
    提示: 这个属性允许你为元素添加圆角边框!
    */

    border-radius: 15px 50px 30px 5px/* 第一个值适用于左上角,第二个值适用于右上角,第三个值适用于右下角,第四个值适用于左下角 */
    border-radius: 15px 50px 30px/* 第一个值适用于左上角,第二个值适用于右上角和左下角,第三个值适用于右下角 */
    border-radius: 15px 50px/* 第一个值适用于左上角和右下角,第二个值适用于右上角和左下角 */
    border-radius: 15px/* 该值适用于所有四个角,均等圆角 */

    border-top-left-radius: 15px/* 设置左上角圆角 */
    border-top-right-radius: 15px/* 设置右上角圆角 */
    border-bottom-left-radius: 15px/* 设置左下角圆角 */
    border-bottom-right-radius: 15px/* 设置右下角圆角 */

17.opacity属性设置一个元素了透明度级别

    opacity: 0.8/* 指定不透明度 从0.0(完全透明)到1.0(完全不透明) */
    opacityinherit/* opacity属性的值应该从父元素继承 */

18.overflow属性指定如果内容溢出一个元素的框,会发生什么

    /* 
    overflow属性指定如果内容溢出一个元素的框,会发生什么  
    注意:在X Lion(Mac OS),滚动条显示默认是隐藏的,只有当被使用(即使"overflow:scroll"已设置) 
    */

    overflowvisible/* 默认值 内容不会被修剪,会呈现在元素框之外 */
    overflowhidden/* 内容会被修剪,并且其余内容是不可见的 */
    overflowscroll/* 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容 */
    overflowauto/* 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容 */
    overflowinherit/* 规定应该从父元素继承 overflow 属性的值 */

19.float属性指定一个盒子(元素)是否应该浮动 注:使用了浮动记得要清除浮动

    floatleft/* 元素向左浮动 */
    floatright/* 元素向右浮动 */
    floatnone/* 默认值 元素不浮动,并会显示在其在文本中出现的位置 */
    floatinherit/* 规定应该从父元素继承 float 属性的值 */

20.display 属性规定元素应该生成的框的类型

    displaynone/* 此元素不会被显示 */
    displayblock/* 此元素将显示为块级元素,此元素前后会带有换行符 */
    displayinline/* 默认 此元素会被显示为内联元素,元素前后没有换行符 */
    displayinline-block/* 行内块元素 (CSS2.1 新增的值) */
    displayinherit/* 规定应该从父元素继承 display 属性的值 */
    displaylist-item/* 此元素会作为列表显示 */
    displaytable/* 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符 */
    displayinline-table/* 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符 */
    displaytable-row-group/* 此元素会作为一个或多个行的分组来显示(类似 <tbody>) */
    displaytable-header-group/* 此元素会作为一个或多个行的分组来显示(类似 <thead>) */
    displaytable-footer-group/* 此元素会作为一个或多个行的分组来显示(类似 <tfoot>) */
    displaytable-row/* 此元素会作为一个表格行显示(类似 <tr>) */
    displaytable-column-group/* 此元素会作为一个或多个列的分组来显示(类似 <colgroup>) */
    displaytable-column/* 此元素会作为一个单元格列显示(类似 <col>) */
    displaytable-cell/* 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) */
    displaytable-caption/* 此元素会作为一个表格标题显示(类似 <caption>) */
    displayrun-in/* 此元素会根据上下文作为块级元素或内联元素显示 */
    displaycompact/* CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除 */
    displaymarker/* CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除 */

21.flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间

    /*
    flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间
    flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性
    注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用
    display: -webkit-box;
    display: -webkit-flex;
    display: flex; 弹性盒子
    */

    flex: 1; /* 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性 */
    flex-basis: 1; /* flex-basis项目的长度 合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em"、"rem" 或任何其他长度单位的数字 */
    flex-shrink: 1; /* flex-shrink一个数字,规定项目将相对于其他灵活的项目进行收缩的量 */
    flex-grow: 1; /* flex-grow一个数字,规定项目将相对于其他灵活的项目进行扩展的量 */
    flexauto/* 与 1 1 auto 相同 */
    flexnone/* 与 0 0 auto 相同 */
    flexinitial/* 设置该属性为它的默认值,即为 0 1 auto */
    flexinherit/* 从父元素继承该属性 */

22.position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型

    positionabsolute/*  生成绝对定位的元素,
    相对于 static 定位以外的第一个父元素进行定位元素的位置
    通过 "left", "top", "right" 以及 "bottom" 属性进行规定 
    */

    positionrelative/* 生成相对定位的元素,相对于其正常位置进行定位 
       因此,"left:20" 会向元素的 LEFT 位置添加 20 像素
    */

    positionfixed;    /* 生成固定定位的元素,相对于浏览器窗口进行定位 
       元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 
    */

    positionstatic;   /*  默认值 没有定位,元素出现在正常的流中
       (忽略 top, bottom, left, right 或者 z-index 声明) 
    */

    positionsticky;   /* 粘性定位,该定位基于用户滚动的位置 
      它的行为就像 position:relative; 
      而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置 
      注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位  
      Safari 需要使用 -webkit- prefix (查看以下实例)  
     */

    positioninherit/* 规定应该从父元素继承 position 属性的值 */
    positioninitial/* 设置该属性为默认值 */

23.z-index 属性指定一个元素的堆叠顺序

    /* 
    z-index 属性指定一个元素的堆叠顺序  
    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
    注意: z-index 进行定位元素(position:absolute, position:relative, or position:fixed)
    */

    z-indexauto/* 默认 堆叠顺序与父元素相等 */
    z-index: 1; /* 设置元素的堆叠顺序 */
    z-indexinherit/* 规定应该从父元素继承 z-index 属性的值 */

24.cursor 设置鼠标指针放在一个元素边界范围内时所用的光标形状

    cursorpointer/* 光标呈现为指示链接的指针(一只手) */
    cursorurl('图片路径.png'); /* 需使用的自定义光标的 URL */
    cursordefault/* 默认光标(通常是一个箭头) */
    cursorauto/* 默认 浏览器设置的光标 */
    cursorcrosshair/* 光标呈现为十字线 */
    cursormove/* 此光标指示某对象可被移动 */
    cursortext/* 此光标指示文本 */
    cursorwait/* 此光标指示程序正忙(通常是一只表或沙漏) */
    cursorhelp/* 此光标指示可用的帮助(通常是一个问号或一个气球) */
    cursore-resize/* 此光标指示矩形框的边缘可被向右(东)移动 */
    cursorne-resize/* 此光标指示矩形框的边缘可被向上及向右移动(北/东) */
    cursornw-resize/* 此光标指示矩形框的边缘可被向上及向左移动(北/西) */
    cursorn-resize/* 此光标指示矩形框的边缘可被向上(北)移动 */
    cursorse-resize/* 此光标指示矩形框的边缘可被向下及向右移动(南/东) */
    cursorsw-resize/* 此光标指示矩形框的边缘可被向下及向左移动(南/西) */
    cursors-resize/* 此光标指示矩形框的边缘可被向下移动(南) */
    cursorw-resize/* 此光标指示矩形框的边缘可被向左移动(西) */

25.filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)

    -webkit-filtergrayscale(100%); /* Chrome, Safari, Opera */
    filtergrayscale(100%); /* 彩色图片会变成黑白图 */

本文只列举常用属性,参考来源于:https://www.runoob.com/cssref/css-reference.html 更多更详细属性可前往查看

分类:

前端

标签:

CSS

作者介绍

没心没肺づ惜
V1