今日学习新的css样式

z-index:1000; 离眼睛的层级关系，值越大离眼睛越近，无单位级别

font-weight:800; 用样式把文字加粗，无单位级别

display:block; 盒子模型显示

word-break:break-all; 强制换行

border-radius:5px; css3新技术，让边框出现圆滑弧度

padding:10px 内部补白文字到边框的距离增加10px空白

margin:10px 外补白，边框外面四周有10px的空隙

text-indent:26px 段落缩进2个字符可以计算如：font-size:12px; letter-spacing:1px; 2个字的缩进为（12+1）*2px

overflow:auto; 如果div比较小会出现滚动条，如果足够装下则不出现

overflow:hidden; 隐藏超过div框架之外的内容

ul,ul li{

list-style:none; 去除ul前面的黑色点点

}

-webkit- columns: auto 3; 让一段段落分成3栏 谷歌浏览器前缀

为了增强兼容性可以这样写：

-ms- columns: auto 3; IE浏览器前缀

-0- columns: auto 3; 欧鹏浏览器前缀operal

-moz- columns: auto 3; 火狐浏览器前缀firfox

columns: auto 3;

-webkit- column-rule:1px dashed gray; 给段落加入1像素的灰色的虚线

-webkit-column-gap:30px 栏的间距

position:fixed; 固定

-webkit-transtion:all 2s ease-in 0 动画 2s总运行时间 ease-in动画效果 0延迟时间从0开始

文字效果变换

text-transform:low 小写字母、

text-transform:up 大写

text-transform:cap 首字母大写

text-shadow:2px 2px 5px red; 上移 下移 阴影大小 阴影的颜色

tr:nth-child(2n){background-color:red;} 奇偶行变色

tr:nth-child(2n+1){background-color:green;}

tr:first-child{

font-size:16px; 控制第一行的样式

font-weight:800px;

background-color:gary;

}

h1{
counter-increment:item; /* 定义编号 */
}
h1:before{
content: counter(item)"、"; /* 使用编号 */
}
/*h1:after{content:'-end'}*/

a:before{
content:url(images/arrow.png);
}
a:after{
content:'-'attr(href);
}

-webkit-transform:rotate(45deg)旋转45度角

-webkit-transform:skew(20deg,0)扭曲20度

-wbkit-transform:scale(0.5,0.5) 小于1为缩放 大于1为扩放

-webkit-transfom:translatex(150px) translateY(100px); x轴水平翻转150px，y轴垂直翻转100px;

border-radius:150px 100px 30px 100px;从左上角开始四个角的弧度

outline:none; 去掉input自带的边框