随笔分类 -  css

手机各机型尺寸比较
摘要：1. iPhone 各种机型尺寸信息列表入下表： iPad设备 放在微信里面的设计尺寸，需要考虑微信头部导航栏（128），按iphon6来设计，那么设计稿的高度就是1334-128=1206，那么进行高度100%设计就布局就好了，一些按钮元素可以通过定位进行布局固定位置！！！！！！！！ 原文：htt 阅读全文
posted @ 2020-08-07 11:22 没事看看电影 阅读(1739) 评论(0) 推荐(0)
BFC 神奇背后的原理
摘要：BFC 是Box、Formatting Context的缩写。 BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外 阅读全文
posted @ 2018-06-07 14:27 没事看看电影 阅读(166) 评论(0) 推荐(0)
CSS3的calc()使用
摘要：什么是calc()? calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等 阅读全文
posted @ 2017-05-31 15:08 没事看看电影 阅读(320) 评论(0) 推荐(0)
css有用的代码片段
摘要：1、伸展一个元素到窗口高度 在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，我们需要伸展顶层元素：html和body: 然后将100%应用到任何元素的高： 2、只在一边或两边显示盒子阴影 如果你要一个盒阴影，试试这个技巧，能为任一边 阅读全文
posted @ 2017-02-03 11:52 没事看看电影 阅读(248) 评论(0) 推荐(0)
css兼容性大坑
摘要：一、 \9在 IE 6及其以上都可以识别（但是 IE11不识别 ，IE 5 识别，IE5.5不识别） \9\0 IE8、IE11不识别,IE9 IE10 识别 可用： 更好用的是ie浏览器独有的文档注释的方式： 二、 IE7 及以上版本 : 子选择符 （E>F）, 相邻选择符（E+F）,兄弟选择符（ 阅读全文
posted @ 2016-12-06 17:31 没事看看电影 阅读(156) 评论(0) 推荐(0)
手机端取消文字选中、取消图片长按下载
摘要：企业号有一种消息类型叫保密消息，该类型消息有全屏水印、图片水印、禁止分享至朋友圈、禁止选中文字等功能。 但是对于图片，手机端默认长按时会触发下载保存交互。 首先想到的方案是通过JS实现，对touch实践做处理。 但是这个对于长的文章，滚动事件就失效了。所以此方案无效，但是如果只是某个div有需求，可 阅读全文
posted @ 2016-09-14 17:35 没事看看电影 阅读(1255) 评论(0) 推荐(0)
IE 8 下的 box-sizing 和 min-* 属性
摘要：在非 IE 浏览器中，默认情况下 width 属性指的是内容区域(content)的宽度。 IE 6+ 中，如果浏览器以标准模型渲染，和非 IE 浏览器的表现是一致的；如果浏览器以怪癖模式渲染，则 width 指的是外 border 的宽度。 通常而言，网页头部添加了 <!DOCTYPE> ，则 I 阅读全文
posted @ 2016-06-18 17:04 没事看看电影 阅读(797) 评论(0) 推荐(0)
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
摘要：让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法 最近做一个Web网站，之前一直觉得bootstrap非常好，这次使用了bootstrap3,在chrome,firefox,safari,opera，360浏览器（极速模式）、搜狗浏览器等浏览器下均没有问题，而在I 阅读全文
posted @ 2016-06-18 16:33 没事看看电影 阅读(228) 评论(0) 推荐(0)
网址前面的icon
摘要：shortcut icon和icon代码之间究竟有何区别呢.下面介绍一下 语句一:<link rel="shortcut icon" href="favicon.ico" /> 语句二<link rel="icon" href="animated_favicon.gif" type="image/g 阅读全文
posted @ 2016-05-09 10:05 没事看看电影 阅读(439) 评论(0) 推荐(0)
css content 的 attr 用法 （实现悬浮提示）
摘要：content 的attr 实现 鼠标悬浮 显示 悬浮提示， content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。 content 的attr 实现 鼠标悬浮 显示 悬浮提示， content 属性与 :before 及 :after 伪元素配合使用，来插入生成 阅读全文
posted @ 2016-04-09 11:38 没事看看电影 阅读(1343) 评论(0) 推荐(0)
css小常识
摘要：实现多行文本溢出显示省略号： overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; {-webkit-text-si 阅读全文
posted @ 2016-04-01 14:24 没事看看电影 阅读(130) 评论(0) 推荐(0)
input注意事项
摘要：一、更改place-holder颜色 input::-webkit-input-placeholder { color: #D6D0CA !important; /* WebKit browsers / } input:-moz-placeholder { color: #D6D0CA !impor 阅读全文
posted @ 2016-03-28 10:40 没事看看电影 阅读(259) 评论(0) 推荐(0)
sass跨文件重写变量
摘要：你可以在变量尚未赋值前，通过在值的末尾处添加 !default 标记来为其指定。 也就是说，如果该变量已经被赋值， 就不会再次赋值， 但是，如果还没有被赋值，就会被指定一个值。 假如 你在 _nav.scss 中： 那么在 addr.scss 中@import _nav.scss 之前可重写变量： 阅读全文
posted @ 2016-03-23 17:18 没事看看电影 阅读(806) 评论(0) 推荐(0)
sass兼容IE8透明度方法
摘要：经过检测，ie8下透明度为0.5时，此方法无效。究其原因：滤镜前段为7f,此方法转化为80。 另外小数点第二位未曾检测。 /* IE滤镜写法; gradientType : 1代表水平方向 , 0 代表垂直线性渐变 ; startColorstr是起始颜色,endColorstr是结束颜色; 颜色支 阅读全文
posted @ 2016-03-23 15:25 没事看看电影 阅读(544) 评论(0) 推荐(0)
关于CSS中对IE条件注释的问题
摘要：默认使用Google Chrome Frame进行渲染，如果没有安装gcf则使用IE的最新内核来渲染 < meta http-equiv = "X-UA-Compatible" content ="IE=edge,chrome=1" /> 一、通用区分方式：IE6、IE7能识别*，标准浏览器（如FF 阅读全文
posted @ 2016-03-23 15:00 没事看看电影 阅读(377) 评论(0) 推荐(0)
css规范
摘要：一、文件规范 二、sass使用规范 6. 禁止 scss 标签、类名 多层嵌套，最多可嵌套4层（最好2到3层）。 错误实例： 三、CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, pa 阅读全文
posted @ 2016-03-21 13:29 没事看看电影 阅读(221) 评论(0) 推荐(0)
transition代替简单的animation注意事项
摘要：一、 transition 和 animation 不支持 Internet Explorer 9，以及更早的版本。 二、 要变化的属性 transition-property:要变化的属性，比如元素变宽则是width，文字颜色要变色这是color；W3C给出了一个可变换属性的列表： CSS属性 改 阅读全文
posted @ 2016-03-18 11:54 没事看看电影 阅读(526) 评论(0) 推荐(0)