css属性设置

list-style-type

none   //不使用项目符号

disc   //默认值。实心圆 

circle   //空心圆 

square   //实心方块

decimal    //阿拉伯数字

lower-roman   //小写罗马数字 

upper-roman   //大写罗马数字 

lower-alpha   //小写英文字母 

upper-alpha   //大写英文字母 

input type

file 文件上传组件 

hidden 隐藏域 

image 图片区域 
 

input 属性

required   //必须填写的

autocomplete="off"  //关闭自动保存文本;

formDOM.reset()   //js清除全部默认保存数据;

pattern    //input 输入的正则表达式;

placeholder  //占位符;


accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。

accept  属性配置文件格式MIME(文件格式的类型)
 

border

none	无边框

hidden	隐藏边框，它有边框，只是不可见

dotted	点状线

dashed	虚线

solid	实线

double	双线，两条单线与其间隔的和等于指定的 border-width属性的值

groove	3D凹槽

ridge	3D凸槽

inset	3D凹边

outset

background

background-attachment：背景图片是否固定不动

background-clip：背景覆盖区

background-origin：背景图片覆盖区

font/text

在缩写时 font-size 与 line-height 中间要加入“/”斜扛

font:italic  bold  12px/1.5em  "宋体",sans-serif;


使用text-decoration添加文本修饰

1、text-decoration可以设置添加到文本的修饰。

2、text-decoration默认值为none, 定义标准的文本。

3、text-decoration的值为underline为定义文本下的一条线。

4、text-decoration的值为overline为定义文本上的一条线。

5、text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。

text-indent   //为文本设置首行缩进; 一般设置2em;

letter/word-spacing   增加或减少字符间的空白 (letter汉字)(word英文);

弹性盒子

direction    //设置文本方向;  rtl 从右到左;

display: flex;

父类（容器）  子类（项目）

justify-content   属性设置主轴排列方式

1，flex-start：交叉轴的起点对齐（左对齐）

2，flex-end：右对齐

3，center： 居中

4，space-between：两端对齐，项目之间的间隔都相等。

5，space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items  属性设置垂直轴排列方式
1，flex-start：默认值，左对齐

2，flex-end：垂直轴的终点对齐 

3，center： 垂直轴的中点对齐

4，baseline：项目的第一行文字的基线对齐。（文字底部）；

5，stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。


flex-direction  弹性盒子的方向;

row：默认的排列方式。 主轴依然是水平方向;

row-reverse：与垂直轴进行镜像操作;

column：纵向排列。主轴变为纵向排列

column-reverse：纵向排列。主轴变为纵向排列 与垂直轴进行镜像操作;

flex-wrap 属性（设置是否换行弹性布局）;

nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。

wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行

wrap-reverse -反转 wrap 排列。


align-content   （设置换行弹性布局之后的纵向排列位置）;
stretch - 默认。各行将会伸展以占用剩余的空间。

flex-start - 各行向弹性盒容器的起始位置堆叠。

flex-end - 各行向弹性盒容器的结束位置堆叠。

center -各行向弹性盒容器的中间位置堆叠。

space-between -各行在弹性盒容器中平均分布。

space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。



给项目设置flex占比
    
flex: 1;

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。
2、flex属性的值只能是正整数,表示占比多少。
3、给子元素设置了flex之后,其宽度属性会失效。

order: -1;

order属性(用整数值来定义排列顺序，数值小的排在前面。可以为负值)


margin
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。

所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中

常用功能

opacity: 0.5;

filter: alpha(opacity：50);IE8以下兼容	


剪切后面文字改为省略号

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行显示省略号（只有Webkit内核才能使用）

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

//跨浏览器解决方案
p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:-5px;
    padding:0 20px 1px 45px;
    background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}

如何清除行内块的间距问题

1 给父元素font-size: 0;

2使用弹性或浮动，固定或绝对;


box-shadow    // 水平阴影，垂直阴影, 模糊距离, 阴影大小, 阴影颜色, inset(内层阴影);   

user-scalable:no   //控制用户可以进行缩放，但是目前不起作用了，现在缩放功能是系统的功能

-webkit-text-fill-color: transparent;  //设置字体颜色
  -webkit-background-clip: text;     //设置背景简介到字体；
  background-image: linear-gradient(180deg,#ffb821 0,#ff5c38 45%,#ff1459); 
  空心文字

  object-fill: corver;  图片自适应

瀑布流布局(多列)

弊端（图片上下排序，左右填充）

column-count: 2;
 
column-gap: 0.15rem;