随笔分类 -  css、scss

容器居中
摘要：1、margin: autodiv { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}2、transformdiv { position: absolute; top: ... 阅读全文
posted @ 2017-04-06 16:07 ning0_o 阅读(103) 评论(0) 推荐(0)
scss基本使用及操作函数
摘要：操作函数1、for循环@for … from … through @for $var from through // 范围包括和的值@for … from … to@for $var from to // 范围包括,不包括的值获取数组中第i项的值 nth($arr, $i)获... 阅读全文
posted @ 2017-03-24 17:30 ning0_o 阅读(5094) 评论(0) 推荐(0)
svg -> text文本水平、垂直居中。文本垂直对齐方式
摘要：1 // dominant-baseline设置文本垂直对齐方式，text-before-edge设置文本在边... 阅读全文
posted @ 2017-02-07 15:06 ning0_o 阅读(6464) 评论(0) 推荐(0)
css代码建议
摘要：1、选择更优的样式属性值 建议把border: 0;设为border: none;CSS中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对borde... 阅读全文
posted @ 2017-02-07 14:57 ning0_o 阅读(112) 评论(0) 推荐(0)
模态框遮罩层，兼容IE
摘要：css: .overlay { position: fixed; height: 100%; width: 100%; filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F0000... 阅读全文
posted @ 2016-12-12 15:53 ning0_o 阅读(266) 评论(0) 推荐(0)
引入其他字体库 和 字体样式设置
摘要：引入其他字体库， 如Open Sans，先下载Open Sans字体http://pan.baidu.com/s/1c1S8ZC0@font-face { font-family: 'Open Sans'; /* 为导入的字体命名(自定义)，方便以后使用 */ src: ... 阅读全文
posted @ 2016-12-07 11:08 ning0_o 阅读(205) 评论(0) 推荐(0)
css兼容问题
摘要：Aanimation @keyframes动画 谷歌 低版本（4.0~43.0）-webkit- 火狐 低版本 (5.0~16.0) -moz- IE9- 不支持 解决方法： 使用jquery的animate动画 $(ele).animate({style}... 阅读全文
posted @ 2016-11-23 16:15 ning0_o 阅读(114) 评论(0) 推荐(0)
未知宽高的容器设置居中、未知行数的文本设置居中
摘要：这是一个未知行数的文本 ddd 阅读全文
posted @ 2016-11-03 15:34 ning0_o 阅读(147) 评论(0) 推荐(0)
单行居中，2行居左，超过2行省略
摘要：文本 单行居中 单行居中，2行居左。 单行居中，2行居左。 单行居中，2行居左。超过2行省略。 单... 阅读全文
posted @ 2016-10-26 15:22 ning0_o 阅读(205) 评论(0) 推荐(0)
css3渐变
摘要：1、线性渐变background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient... 阅读全文
posted @ 2016-08-22 11:33 ning0_o 阅读(125) 评论(0) 推荐(0)
设置margin-top值时，溢出到父元素
摘要：给子元素margin-top时，若这个子元素前面没有其他内容，这个margin-top值会应用到父元素上解决方案，给父元素设置：beforebody:before{ content: ""; display: table; /*或者display: inline-blo... 阅读全文
posted @ 2016-08-12 10:03 ning0_o 阅读(637) 评论(0) 推荐(0)
修改浏览器默认的滚动条样式
摘要：/*滚动条 start*/ ::-webkit-scrollbar { width: 10px; height: 4px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ... 阅读全文
posted @ 2016-08-12 09:53 ning0_o 阅读(181) 评论(0) 推荐(0)
设置inline-block布局造成的幺蛾子事
摘要：1、文本错位display: inline-block;vertical-align: bottom;2、两个容器之间出现间隔第一种，word-spacing:0;// 给父容器设置display: table;第二种，word-spacing:0;// 给父容器设置font-size: 0; 阅读全文
posted @ 2016-07-25 11:19 ning0_o 阅读(104) 评论(0) 推荐(0)
Media Query媒体查询
摘要：（1）@media screen and (max-width: 1400px) {选择器{ 属性：属性值； }}（2） 阅读全文
posted @ 2016-01-24 21:48 ning0_o 阅读(104) 评论(0) 推荐(0)
overflow内容溢出时，显示省略号
摘要：css内容溢出时，显示省略号nobr表示强制不换行 阅读全文
posted @ 2016-01-18 23:17 ning0_o 阅读(242) 评论(0) 推荐(0)