CSS高级技巧1.精灵图的使用主要借助于背景位置来实现 background-position2.字体图标本质是文字的使用及追加如果工作中原来的字体图标不够用了我们需要添加新的字体图标到原来的字体文件中。把压缩包里面的selection.json 从新上传然后选中自己想要新的图标从新下载压缩包并替换原来的文件即可。3.CSS三角4.用户界面相关样式鼠标样式:li {cursor: pointer; }取消轮廓线 input {outlinenone}防止拖拽文本域resizenone5.vertical-align应用:vertical-align : baseline | top I middle | bottom6.溢出文字省略号显示单行/*1先强制一行内显示文本/white-space: nowrap; 默认 normal 自动换行/*2超出的部分隐藏/overflow: hidden;/*3文字用省略号替代超出的部分/text-overflow: ellipsis;多行overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示/display: -webkit-box;/* 限制在一个块元素显示的文本的行数/-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式/-webkit-box-orient: vertical;7.常见布局技巧margin负值运用-left-1pxpositionrelative文字围绕浮动元素图片添加浮动行内块巧妙运用css三角运用width:0;height:0;border-color: transparent red transparent transparent;英,《border-style: solid;border-width: 22px 8px 0 0;8.CSS初始化9.CSS新增选择器属性选择器结构伪类选择器nth-child(n)选择子元素伪元素选择器及其使用场景:before在元素内部的前面插入内容::after在元素内部的后面插入内容注意before 和 after 创建一个元素但是属于行内元素新创建的这个元素在文档树中是找不到的所以我们称为伪元素语法 element::before {}before 和 after 必须有 content 属性before在父元素内容的前面创建元素after在父元素内容的后面插入元素伪元素选择器和标签选择器一样权重为1CSS3盒子模型1. box-sizing: content-box 盒子大小为 width padding border 以前默认的2. box-sizing: border-box 盒子大小为width如果盒子模型我们改为了box-sizing:border-box 那padding和border就不会撑大盒子了CSS3滤镜模糊处理filter: 函数);例如 filter: blur(5px); blur模糊处理 数值越大越模糊计算盒子宽度calcCSS3过渡transition要过渡的属性 花费时间 运动曲线 何时开始10.CSS 2D转换移动transform:translatexy旋转transform:rotate(度数)转换中心点transform-origin:x y;缩放transform:scale(x,y);transform:translate() rotate()scale()11.动画先定义再调用简写animation动画名称持续时间运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态12.CSS 3D转换perspective透视写在父盒子里translate3d● translform:translateX(100px)仅仅是在x轴上移动● translform:translateY(100px)仅仅是在Y轴上移动● translform:translateZ(100px)仅仅是在Z轴上移动注意translateZ一般用px单位● transform:translate3d(x,y,z)其中x、y、z分别指要移动的轴的方向的距离rotate3d● transform:rotateX(45deg)沿着x轴正方向旋转45度● transform:rotateY(45deg)沿着y轴正方向旋转 45deg● transform:rotateZ(45deg)沿着Z轴正方向旋转 45deg● transform:rotate3d(x,y,z,deg)沿着自定义轴旋转deg为角度transfrom-style 3D呈现13.浏览器私有前缀● -moz-代表 firefox 浏览器私有属性● -ms-代表ie 浏览器私有属性● -webkit-代表safari、chrome 私有属性● -o-代表Opera私有属性-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;移动端基础meta视口标签二倍图背景缩放flex布局父项子项移动web开发1.移动web开发之rem适配布局rem媒体查询less或flexible.jsrem2.移动web开发之响应式布局媒体查询bootstarpHTML5 新增特性1.HTML5 新增的语义化标签● header头部标签● nav导航标签● article内容标签● section定义文档某个区域● aside侧边栏标签● footer尾部标签2.视频标签video src文件地址 controlscontrols/video3.音频标签4.input类型5.表单属性
前端学习之CSS3进阶+移动web开发+HTML5新特性
CSS高级技巧1.精灵图的使用主要借助于背景位置来实现 background-position2.字体图标本质是文字的使用及追加如果工作中原来的字体图标不够用了我们需要添加新的字体图标到原来的字体文件中。把压缩包里面的selection.json 从新上传然后选中自己想要新的图标从新下载压缩包并替换原来的文件即可。3.CSS三角4.用户界面相关样式鼠标样式:li {cursor: pointer; }取消轮廓线 input {outlinenone}防止拖拽文本域resizenone5.vertical-align应用:vertical-align : baseline | top I middle | bottom6.溢出文字省略号显示单行/*1先强制一行内显示文本/white-space: nowrap; 默认 normal 自动换行/*2超出的部分隐藏/overflow: hidden;/*3文字用省略号替代超出的部分/text-overflow: ellipsis;多行overflow: hidden;text-overflow: ellipsis;/* 弹性伸缩盒子模型显示/display: -webkit-box;/* 限制在一个块元素显示的文本的行数/-webkit-line-clamp: 2;/* 设置或检索伸缩盒对象的子元素的排列方式/-webkit-box-orient: vertical;7.常见布局技巧margin负值运用-left-1pxpositionrelative文字围绕浮动元素图片添加浮动行内块巧妙运用css三角运用width:0;height:0;border-color: transparent red transparent transparent;英,《border-style: solid;border-width: 22px 8px 0 0;8.CSS初始化9.CSS新增选择器属性选择器结构伪类选择器nth-child(n)选择子元素伪元素选择器及其使用场景:before在元素内部的前面插入内容::after在元素内部的后面插入内容注意before 和 after 创建一个元素但是属于行内元素新创建的这个元素在文档树中是找不到的所以我们称为伪元素语法 element::before {}before 和 after 必须有 content 属性before在父元素内容的前面创建元素after在父元素内容的后面插入元素伪元素选择器和标签选择器一样权重为1CSS3盒子模型1. box-sizing: content-box 盒子大小为 width padding border 以前默认的2. box-sizing: border-box 盒子大小为width如果盒子模型我们改为了box-sizing:border-box 那padding和border就不会撑大盒子了CSS3滤镜模糊处理filter: 函数);例如 filter: blur(5px); blur模糊处理 数值越大越模糊计算盒子宽度calcCSS3过渡transition要过渡的属性 花费时间 运动曲线 何时开始10.CSS 2D转换移动transform:translatexy旋转transform:rotate(度数)转换中心点transform-origin:x y;缩放transform:scale(x,y);transform:translate() rotate()scale()11.动画先定义再调用简写animation动画名称持续时间运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态12.CSS 3D转换perspective透视写在父盒子里translate3d● translform:translateX(100px)仅仅是在x轴上移动● translform:translateY(100px)仅仅是在Y轴上移动● translform:translateZ(100px)仅仅是在Z轴上移动注意translateZ一般用px单位● transform:translate3d(x,y,z)其中x、y、z分别指要移动的轴的方向的距离rotate3d● transform:rotateX(45deg)沿着x轴正方向旋转45度● transform:rotateY(45deg)沿着y轴正方向旋转 45deg● transform:rotateZ(45deg)沿着Z轴正方向旋转 45deg● transform:rotate3d(x,y,z,deg)沿着自定义轴旋转deg为角度transfrom-style 3D呈现13.浏览器私有前缀● -moz-代表 firefox 浏览器私有属性● -ms-代表ie 浏览器私有属性● -webkit-代表safari、chrome 私有属性● -o-代表Opera私有属性-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;移动端基础meta视口标签二倍图背景缩放flex布局父项子项移动web开发1.移动web开发之rem适配布局rem媒体查询less或flexible.jsrem2.移动web开发之响应式布局媒体查询bootstarpHTML5 新增特性1.HTML5 新增的语义化标签● header头部标签● nav导航标签● article内容标签● section定义文档某个区域● aside侧边栏标签● footer尾部标签2.视频标签video src文件地址 controlscontrols/video3.音频标签4.input类型5.表单属性
