css所有标签代码,几个css常用标签(示例代码)

总结一下自己在项目中常用到的一些css属性：

1.将某个快固定在屏幕的顶部/底部位置:

position:fixed;

bottom:0;或者 top:0;

2.个浏览器的兼容前缀：

-webkit-   /*safrai、chrome浏览器私有*/

-moz-      /*firefox浏览器私有*/

-mz-       /*IE浏览器私有*/

-0-         /*欧朋浏览器私有*/

3.flex (也需加上兼容前缀)

在css中，可以说flex是一个即轻便又简洁的布局神器了，下面列出常用的几个属性：

在容器上  position:flex;

设置子级的排列方向      flex-direction:row            (→)

flex-direction:row-reverse (←)

flex-direction:column        (↓)

flex-direction:row-reverse  (↑)

设置子级的对其方式      justify--contet:center         居中

justify--contet:flex-star      左对齐

justify--contet:flex-end       右对齐

justify--contet:space-between   子级之间留空隙 (如两个子级分别在贴两头)

justify--contet:space-around     子级之间、之前、之后都留有空隙

多个子级进行排列         flex-wrap:nowrap                默认不换行

flex-wrap:wrap                    换行

在子级中                    order:具体数值                     默认为零、数值小的排前面

flex-grow: 具体数值              默认为零、如果有1和2则这两个子级瓜分剩余空间，分别占1/3 和 2/3空间。

4.         伪类选择器                  多个同类标签下如:li p span img  可通过父级的类去控制个别子标签  .content li:first-child{}   .content li:last-child{}

多个子级时也可以这样写    .content li:nth-child(第几个子级就写几，不限同类标签){}

5.         渐变背景                     background-image:-webkit-linear-gradient(right,#000000,#777777 50%,#000000);有to right; to left; to top; to bottom

6.         超出文本部分用省略号代替  text-overlow:ellipsis;    /*兼容性：ie支持。safari:-webkit-.欧朋-0-*/

white-space:nowrap;

overflow:hidder;

word-break: break-all;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;           (换几行)

7.        背景阴影                        box-shadow:水平阴影 垂直阴影 羽化值 阴影颜色

8.        图片滤镜                        fliter:blur(2px)模糊度