随笔分类 - Css
摘要：浮动可以将两个块级元素浮动在同一水平上。但float的缺点也有很多，还需要其他样式弥补。 早年我使用过 display: inline-block; 但苦于兼容性问题一直没敢全面使用。 近几年主要玩移动端、何况IE已经淘汰的差不多了。应该可以放心使用了。大部分框架也能看到一些影子。 使用displa
阅读全文
摘要：除了第一个以外的兄弟选择器。由于看起来像猫头鹰，也叫猫头鹰选择器 scss 语法的注意点。你可能会出现 & + & 的语法，但其实是无效的： 必须加个类或者其他：
阅读全文
摘要：placeholder readonly
阅读全文
摘要：所谓难而不会,会儿不难.这个问题让我纠结了很长时间,一句css解决了,仅仅靠一个属性
阅读全文
摘要：对select-option使用text-align:right;是无效的。 正确的姿势是：direction: ltr; 另外值得一提的是，通常还需要配合一点padding来美化。
阅读全文
摘要：设置了一定的宽度和高度。但无论是下面哪句都无效。 word-break: break-word; word-wrap: break-word; 原因竟然是因为 /* white-space: nowrap; */ 将其改为normal即可： width: 145px; height: auto; w
阅读全文
摘要：1、background-repeat 不用说，常用直接no-repeat 2、background-size 常用的分为两个，一个是铺满：cover, 另一个是使图像适应宽高：contain 3、background-position 设置图片所处的位置：left/right/bottom/top
阅读全文
摘要：水平居中 transform: translateX(-50%); left: 50%; 垂直居中同理 transform: translateY(-50%); top:50%; 垂直水平居中 top: 50%; left: 50%; transform: translate3d(-50%, -50
阅读全文
摘要：html代码
阅读全文
摘要：github地址 CSSREM 一个CSS的px值转rem值的Sublime Text 3自动完成插件。 插件效果如下： 下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Prefe
阅读全文
摘要：Rem尺寸解决方案，需要配合一些js动态设置<html>标签的font-size 和 viewport来配合 这样一来，页面的所有css尺寸单位都得换成rem了。但计算又特别麻烦。有两种解决方案： 1、sass、less、postcss 的 @function 2、sublime Text 插件的解
阅读全文
摘要：有的时候，由于页面长度不够，页面底部的页脚会很尴尬的跑上来，如图： 有的同学可能会想用position:fixed;bottom:0;来永远居底。但有些场景确实不适合。 这是我从YII2中找到的简单解决方案 原理是将最外围的容器.warp 设置最小高度为100%，并且使用margin:0 auto
阅读全文
摘要：禁止复制黏贴功能 禁止点击之后修改背景颜色 禁止点击一个链接，弹出询问框
阅读全文
摘要：该方法甚至可以解决img内容居中的问题 套路：最外层div宽度为居中内容所占的宽度（通常是1170px），并且使其居中(margin：auto) 里层的div宽度为全屏（通常是1920px;）再margin-left:-368px 该值等于(1170-1920) / 2 = 375px ,然而实战的
阅读全文
摘要：浏览器兼容性有效性信息查询 ： Can I Use? 自动为css添加浏览器厂商前缀 在线编辑HTML/CSS/JavaScript与即时预览的工作台 简易的DOM获取工具函数 通过js判断样式属性是否被支持 demo1——css编辑技巧: http://runjs.cn/code/hul3lwuq
阅读全文
摘要：当一个Div中的子元素都是浮动元素时，该div是没有高度的。通常会带来很多困扰，解决方案如下： 低版本统配兼容： 下面是不支持低配浏览器，而且似乎该效果对 P 标签没有效果，只有DIV才有效果
阅读全文
摘要：官方推荐的脚手架中，其实已经包含着解决方案：html5shiv.min.js 、Respond.min.js 但由于respond.js 使用 file:// 协议,IE8 是无法调起本地文件的 只在本地预览是看不出效果的。只能部署在web服务器上才能见效。比如apache/iis等。推荐使用360
阅读全文
