随笔分类 - 1_css（布局、z-index等）
摘要：CSS实现垂直居中 一、总结 一句话总结： 1、水平居中设置方法及注意？ 2、垂直居中方法（相对定位然后偏移的方法）？ 3、偏移自身高度一半的css怎么写（同理左右偏移自身一半）？ 4、css3如何使用弹性布局？ 5、弹性布局如何实现垂直和水平居中（子元素设置固定宽高，父元素该如何设置）？ 二、CS
阅读全文
摘要：纯CSS实现垂直居中的几种方法 一、总结 一句话总结：垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。 二、纯CSS实现垂直居中的几种方法 垂直居中是布局中十分常见
阅读全文
摘要：iconfont字体图标的使用方法--超简单! 一、总结 一句话总结：在阿里巴巴iconfont官网将打包好的字体文件下载到本地添加到你的项目中,在项目中引用文件中的iconfont.css文件; 二、iconfont字体图标的使用方法--超简单! 我之前因为项目用bootstrap比较多,所以使用
阅读全文
摘要：css如何实现垂直居中（5种方法） 一、总结 一句话总结：行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。 块的话可以尝试 margin:auto； 1、单行文本垂直居中用什么？ 这个方法只能将单行文本置中。只需要简单地把 line-height 设
阅读全文
摘要：css3中rem和em是干嘛的 一、总结 一句话总结：对rem综合评价是用来做web app它绝对是最合适的人选之一。 这里我特别强调web app，web page就不能使用rem吗，其实也当然可以，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力 用rem做响应式是通过j
阅读全文
摘要：妙味css3课程 1-2、css3中新增的伪类和伪元素有哪些 一、总结 一句话总结： 1、div:target{}是什么意思？ 比如a标签的锚点链接到div，div:target{}就可以找到这个divE:target { sRules } 匹配相关URL指向的E元素。 2、如何用input框模拟单
阅读全文
摘要：Font Awesome 图标如何使用 一、总结 一句话总结：Font Awesome字体图标非常好用，直接引入font-awesome.css，然后就可以直接使用了，使用的时候是用的i标签。 1、字体图标一般用什么元素使用？ Font Awesome 设计为与内联元素一起使用。 <i>和 <spa
阅读全文
摘要：妙味css3课程 1-1、css中自定义属性可以用属性选择器么 一、总结 一句话总结：可以的。 1、如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片？ p a[href*=text]{background-image:url(img/text.gif);} 2、浏览器前缀在js中
阅读全文
摘要：妙味css3课程 4-5、纯js如何做扇形导航 一、总结 一句话总结： 1、aImg[i].style.transition="0.5s "+i*100+"ms";是什么意思？ 前一个0.5s是动画持续时间，后一个事件是延迟事件 2、如果页面第一次的动画没有transition效果，而后面的都有，应
阅读全文
摘要：css3-13 如何改变文本框的轮廓颜色 一、总结 一句话总结：outline使用和border很像，几乎一模一样，多了一个offset属性 1、轮廓outline如何使用？ 使用和border很像，几乎一模一样，多了一个offset属性 2、轮廓outline和边框的区别是什么？ 使用和borde
阅读全文
摘要：css3-13 css3的3D动画如何实现 一、总结 一句话总结：这里是transform+setInterval实现。transform属性里面的rotate属性值变成rotateX或rotateY即可实现从2D样式变为3D样式，但是这只是死样式，可以用setInterval把它弄活。 1、tra
阅读全文
摘要：css3-12 transition+css或transform实现过渡动画 一、总结 一句话总结：首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。 1、哪些样式可以设置过渡动画？ transform加别的css 2、如何设置为hover里面的所有样式都
阅读全文
摘要：css3-12 transform:scale(1.2,1.2)实现移入元素变大特效 一、总结 一句话总结：transform:scale(1.2,1.2)鼠标移入的时候变大一点点，超出边框的部分隐藏掉。 1、如何设计出好看的动态效果？ 去别人网站参考 记得把功能写成函数 2、一般放大特效中多余的部
阅读全文
摘要：div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一、总结 一句话总结：直接加上box-sizing:border-box;即可解决上述问题。 1、box-sizing的三个属性分别是什么？ 根据意思来记很好记的 值一、content-box （向外边框）
阅读全文
摘要：css3-11 如何实现2D动画 一、总结 一句话总结：就是transform属性，属性值为1.translate() 2.rotate() 3.scale()，而这是哪个属性值是带参数的。 1、transform：translate和相对定位relative的不同？ 没旋转的时候是一模一样，都是占
阅读全文
摘要：css3-11 网页如何使用自定义字体 一、总结 一句话总结：下载好字体文件，然后在网页中引入，用src: url('my.otf');来引入，使用的时候就使用自己定义的名字来使用这个字体。 1、网页如何使用自定义字体？ 下载好字体文件，然后在网页中引入，用src: url('my.otf');来引
阅读全文
摘要：css3-11 如何让html中的不规则单词折行 一、总结 一句话总结：用word-wrap属性：word-wrap:break-word; 1、word-break和word-wrap的区别？ 推荐word-wrap， word-break：所有单词只要范围不够一律折行 word-wrap：不规则
阅读全文
摘要：css3-11 如何设置文字的阴影 一、总结 一句话总结：text-shadow属性。text-shadow:3px 3px 3px #f0f; 1、text-shadow属性的参数依次是什么意思？ 水平及垂直偏移 模糊距离（这个参数相当于ps里面的羽化半径） 颜色 2、所有阴影类的属性必备的三个属
阅读全文
摘要：css3-11 如何改变背景图片的大小和位置 一、总结 一句话总结：css3相对css2本身就支持改变背景图片的大小和位置。 1、怎么设置背景不填充padding部分？ background-origin3)content-box#有效区域 2、如何改变背景图片的大小？ background-siz
阅读全文
摘要：如何修改页面元素在手机访问时的透明度 一、总结 一句话总结：就一个opacity属性。 1、修改页面元素透明度的时候出现的两个问题？ 书写符号问题，把英文的:写成了中文的：，在博客园那个代码里面看不出来，推荐在外面写代码 之后写的代码的样式被之前写的代码的样式覆盖：推荐后面写的代码一律放在后面 2、
阅读全文
浙公网安备 33010602011771号