CSS
关注
分享
扫一扫
ISaiSai
这个作者很懒，什么都没留下…
展开
-
行内元素 水平对齐的简单方法
直接使用 postion:relation top:10px;原创 2015-04-07 17:49:39 · 3929 阅读 · 2 评论 -
非table 布局 重叠边框合并方法
使用 margin-right: -1px; margin-bottom: -1px;可以合并重复的边框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .item { float: left;转载 2015-12-29 14:18:55 · 7239 阅读 · 0 评论 -
absolute 元素的百分比宽高
absolute 元素的百分比宽高 是相对于其最近的 父级别的absolute／relative 元素来计算的（如没有则对body）相对应的数值为 自身区域＋ padding 的区域总和DEMO:style="width:100px;height: 0px;padding-bottom:100px;background-color: gray;position:原创 2015-12-29 19:14:09 · 3032 阅读 · 0 评论 -
background-size ,写在background里面，使用右划线
background-size ,写在background里面转载 2015-11-30 11:16:40 · 5307 阅读 · 0 评论 -
RETINA 屏幕1px 边框实现
retina 屏幕1px 边框会显示的比较宽，解决办法是，使用scale 缩放0.5倍实现，并且需要是在after 伪元素中实现缩放，不影响原有元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .container1 {转载 2016-01-07 11:07:21 · 1678 阅读 · 0 评论 -
多行文本垂直居中新方法
display: -webkit-box;-webkit-box-align: center;原创 2015-12-23 11:55:11 · 524 阅读 · 0 评论 -
Html5 屏幕旋转事件
仅仅无线浏览器支持orientationchange 事件（屏幕旋转事件） 和 window.orientation属性（屏幕旋转角度）orientation 可能值有 0 （默认） ，－90 ，90 三个可选项。 alert(window.orientation);window.addEventListener('orientationchange',function(){ aler原创 2016-01-07 15:38:23 · 5243 阅读 · 0 评论 -
浏览器 console.log 样式
console.log("%c hello %c world","color:red;font-size:20px;","color:blue")以百分号开头的console.log 内容，会使用后面的样式参数转载 2016-01-11 10:10:21 · 1336 阅读 · 0 评论 -
-webkit-overflow-scrolling 学习
当使用了-webkit-overflow-scrolling : touch; 后在Iphone 上的overflow:auto区块的滚动效果会变的更加顺畅，并且有弹簧效果转载 2016-02-23 11:31:58 · 1971 阅读 · 0 评论 -
html select 自定义
通过appearance:none 可以删除下拉列表的默认样式，替代一张背景图片，实现简易的下拉列表样式美化参考文档： http://ourjs.com/detail/551b9b0529c8d81960000007 http://www.w3school.com.cn/cssref/pr_appearance.asp<!DOCTYPE html><html lang="en"><head转载 2016-04-28 14:18:09 · 2531 阅读 · 0 评论 -
less 强制将css 打包到单个文件中
less 在import 其它less文件的时候会将其合并到单个文件中 但是当引入css 文件时，默认不会将css 合并进来 使用inline 关键字 将a.css 强制打包到最终的单个文件中@import (inline) "./a.css";div{ color:yellow;}编译后的结果是如下，只有一个文件（a.css 只有一个a样式）a{ color:red;}di原创 2016-04-16 15:56:05 · 1914 阅读 · 0 评论 -
pointer-events:none;阻止区块被点击
pointer-events:none; 可以阻止区块被点击，使得点击穿透测试代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> </head><body><div onclick="alert('ok');" > 可以点击</div><div原创 2015-12-29 10:36:29 · 2963 阅读 · 0 评论 -
获取html跟节点的font-size
getComputedStyle(window.document.documentElement)['font-size']原创 2015-10-17 10:57:10 · 14099 阅读 · 0 评论 -
html form element
今天看到一段代码 通过 dom元素是否有elements判断该元素是否是form 表单（非表单的elements 都是undefined）原创 2015-04-13 14:38:44 · 637 阅读 · 0 评论 -
ie7 去除iframe 边框
iframe 添加如下两个属性 可以去除边框 border="0" frameborder=no原创 2015-04-08 16:27:52 · 1981 阅读 · 0 评论 -
利用tabel实现 部分列宽度按固定，一列根据容器宽度自适应
最简单的方法实现部分列固定宽度，一列随着容器宽度自适应table-layout: fixed ，并且这是部分固定宽度列的宽度，并且td overflow：hidden，防止溢出并且table的宽度100%DEMO 如下：实现随着页面的宽度的变化，中间一列的宽度变化（另外三列固定）html>html>head> meta char原创 2015-04-24 12:07:51 · 8359 阅读 · 0 评论 -
小技巧：图片不存在的时候的容错处理
当XX.png不存在的时候，展示default.png 的默认图片转载 2015-05-11 09:25:19 · 979 阅读 · 0 评论 -
小技巧：图片的呼吸效果
效果：当鼠标移动到图片上的时候图片放大，移开后图片还原原有大小html>html>head> meta charset="UTF-8"> title>title> style> img { display: block; width: 540px; height:转载 2015-05-11 09:45:16 · 5614 阅读 · 0 评论 -
css 四列布局 中间空白技巧
1190px 的容器 分成四列 每列290px，中间添加10px 的间距但是每一列都添加margin-left:10px;最左侧就多出10px的问题解决方案：外部容器直接添加 margin-left:-10px 冲抵掉多出来的10px 问题高效解决html>html>head> meta charset="UTF-8"> title原创 2015-05-11 10:12:22 · 3054 阅读 · 0 评论 -
css 利用table 及 noWrap 实现一列优先使用宽度，另外一列自适应
整个容器宽度固定，要求第一列优先使用宽度（内容长度不定），第二列自适应，使用剩余的宽度，超出隐藏table style="width: 400px; overflow: hidden;"> tr> td noWrap="noWrap">主要内容优先使用宽度td> td> div style=原创 2015-05-04 11:07:28 · 3202 阅读 · 0 评论 -
postion absolute 对text-decoration 继承的影响
当一个子元素absolute 以后，无法继承父元素的 text-decoration 样式，原因不明（color 等其它样式是可以正常继承的）html>html>head> meta charset="UTF-8"> title>title>head>body>style> .bbb { color: gray; tex原创 2015-05-13 14:42:57 · 749 阅读 · 0 评论 -
几个常用css3 的ie 支持情况
border-radio：圆角：IE 9 及以上rgba：透明颜色 IE9级以上transition：变换 IE 10 及以上opacity:ie9及以上 （以下使用filter: alpha(opacity=30); 替代）原创 2015-05-13 15:21:18 · 788 阅读 · 0 评论 -
webstorm css 智能感知 自动完成 autocomplete
发现webstorm css 自动完成输入“wid” 然后tab 后感知的不是width ，很影响工作效率修改方式: 设置---》Editor--》Live Templates--》右侧zen css分组--》删除wid的智能感知（同样 添加自定义的智能感知方法相同，但是需要注意需要添加 这个智能感知的快捷键希望出现在什么类型的文件上 选项在最底部）原创 2015-05-18 12:04:29 · 7245 阅读 · 0 评论 -
white-space pre-wrap 样式 与 pre 标签 等价
<div style="white-space: pre-wrap" > 你好nihao</div><pre> 你好nihao</pre>原创 2016-05-24 16:11:51 · 1524 阅读 · 0 评论 -
标准clearfix 代码
一下代码拷贝自bootstrap，标准clearfix 代码.clearfix:before,.clearfix:after { display: table; content: " "}.clearfix:after { clear: both}转载 2016-04-29 16:18:17 · 2293 阅读 · 0 评论 -
ES6模块与commonJS 模块的转换
SCSS 的”%” 与 “.” 功能类似，但是不会输出代码DEMO%fo{ color:red;}.two { @extend %fo; font-size: 10px;}生成.two { color: red; }.two { font-size: 10px; } 参考文档 http://thesassway.com/intermediate/understandin原创 2016-08-22 10:39:08 · 7519 阅读 · 1 评论 -
0.5px边框学习
0.5px 在iphone 下支持 在android 下不支持（不会显示边框）简单解决办法.border { position: relative;}.border:after { content: " "; display: block; position: absolute; box-sizing: border-box; left: 0px;转载 2016-08-10 15:53:04 · 1383 阅读 · 0 评论 -
空白图片导致重复请求问题总结
会导致页面重复请求的情形，需要避免（）<img src="#"><div style="background-image: url()"></div>不会导致重复请求的情形<img src=""><img src>原创 2016-08-25 14:24:28 · 1001 阅读 · 0 评论 -
bootstramp alert 学习
可选的值： alert-info alert-success alert-warning alert-danger原创 2016-09-29 10:05:36 · 696 阅读 · 0 评论 -
bootstramp button loading 状态
通过 button 的 “data-xxxxxxx-text” 属性做设置loading状态 ，DEMO如下<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off"> Loading state转载 2016-09-29 11:16:50 · 2523 阅读 · 0 评论 -
-webkit-linear-gradient 学习
1.第一个参数 可以是 top ，left,bottom,right 或者10deg ，表示开始的位置 2.后面紧跟颜色（可以添加位置 占比） background-image: -webkit-linear-gradient(10deg,red 10% ,green 60%, blue);原创 2016-10-01 11:17:52 · 6832 阅读 · 0 评论 -
background-origin 学习
背景图片从什么地方开始绘制（如果是content-box ,并不是padding 不绘制，仅仅指定的开始绘制位置）默认值 padding-box：从边框内部开始 content-box：背景图片从 内容开始 border-box:从边框开始一般配合 background-repeat:none 使用原创 2016-10-01 11:56:40 · 408 阅读 · 0 评论 -
设置背景遮罩
position: fixed; width:100%; height:100%; background-color:#000; opacity:0.7; left:0px; top:0px; z-index:8;原创 2016-10-18 16:24:48 · 557 阅读 · 0 评论 -
bootstrap theme 的作用
按钮的话 提供渐变效果 提供一些动画,渐变效果，添加theme 这个css 后，页面更美观<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link r原创 2016-11-02 11:27:38 · 6200 阅读 · 0 评论 -
scss 百分号操作符
SCSS 的”%” 与 “.” 功能类似，但是不会输出代码DEMO%fo{ color:red;}.two { @extend %fo; font-size: 10px;}生成.two { color: red; }.two { font-size: 10px; } 参考文档 http://thesassway.com/intermediate/understandin原创 2016-08-18 17:57:19 · 2953 阅读 · 0 评论 -
z-index:0 与 z-index:auto(默认值)是有区别的
z-index:0 的会创建一个新的层叠上下文 而auto 不会，两者在有区别 （0 会在auto 上面）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><div class="abc"> <span class="red2">Red2</spa转载 2016-08-28 20:29:40 · 16053 阅读 · 3 评论 -
css 加号 选择器
加号 选择临近紧贴后面的一个元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .abc + li { color: red; } </style></head><body><ul转载 2016-05-04 16:27:34 · 1836 阅读 · 0 评论 -
将input file 上传组件替换成一张图片的简易方式
将input file 放在图片上层，且将其透明度设置为0 代码拷贝自：bootstrap-wysiwyg $('[data-role=magic-overlay]').each(function () { var overlay = $(this), target = $(overlay.data('target')); ove转载 2016-05-06 21:11:12 · 3947 阅读 · 0 评论 -
overflow:hidden display:inline-block 行内对齐问题
同时拥有overflow hidden 和 display inline-block 的元素，会对行内元素垂直对齐 有影响， 导致原因是 overflow hidden 改变了默认对齐方式解决办法：添加 vertical-align: bottom参考文档： http://stackoverflow.com/questions/20566710/overflowhidden-displayinl转载 2016-04-22 14:06:08 · 3682 阅读 · 1 评论 -
CSS animate HelloWorld
CSS animate 学习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .container { width:100px; height: 100px; bo转载 2016-04-23 11:29:31 · 539 阅读 · 0 评论