CSS
xiongzhengxiang
这个作者很懒,什么都没留下…
展开
-
css3 布局
1 transform 如果用3d 形式,书写顺序对结果有影响吗? 有。 参考: http://www.hitthebits.com/2012/06/css3-3d-transforms-function-order.html原创 2016-02-26 17:07:41 · 627 阅读 · 0 评论 -
div 100% height
First, we need to give 100% height to both the html and the body tag. This is often overlooked but is vitally important as no element will adjust to a percentage height unless it knows what it’s paren原创 2013-07-01 12:13:26 · 828 阅读 · 0 评论 -
css 所有元素垂直、水平居中
Horizontally Center an ElementThe first scenario that we’ll attack is by far one of the most common: centering an element horizontally in the viewport or browser window. To get started, let’s bu转载 2013-07-01 09:57:25 · 957 阅读 · 0 评论 -
div width=auto 与 width = 100% 区别
块级元素(div、p等)的初始宽度是auto。auto使块级元素占满父节点在水平方向上的所有可用空间。具体公式如下:‘margin-left'+border-left-width'+'padding-left'+'width'+'padding-right'+'border-right-width'+'margin-right' = width of containing block请参考原创 2013-07-16 11:20:25 · 2613 阅读 · 0 评论 -
ie6 filter png a 链接不可点击
问题 png 24 要想在ie6下显示半透明效果,必须借助ie 的filter 功能。而在filter 节点下的 子节点,如果有a链接,那么点击不会有任何反应。怎样让这种情况下的a链接正常反应呢?解决思路:初看了下ie filter 的原理,上述问题产生的原因是 filer 节点下的子节点,z-index 小于filer 节点。那么我们想办法让a便器节点的z-index 大于filte原创 2013-07-10 19:22:05 · 1231 阅读 · 0 评论 -
增强transform 性能的方法
Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU (Graphics Processing Unit) for better rendering performance in the browser?Most computer转载 2013-07-09 17:59:17 · 1109 阅读 · 0 评论 -
使用less 书写animation frame
CSS @keyframes Animations With LESSMarch 22, 2012, by Mateusz ★ KoczDefining CSS animations is a pain due to the vendor prefixes. We have to not only define animation property five times w转载 2013-06-19 16:22:04 · 1353 阅读 · 0 评论 -
一次css交流
今天同搜索引擎的一个朋友聊天,聊起来几个css的问题,汗,都不知道,平时使用的时候,只知道copy,没有从原理上去理解,最后只能听他给我说了。为了让以后不至于再显得无知,特记录下1 css 中 ,兼容浏览器的clear 浮动的原理2 .a {margin:10px;padding:10px;height:100px;width:100px;background:red;}原创 2013-03-31 21:46:26 · 590 阅读 · 0 评论 -
弹性方框模型 (FLEXIBLE BOX MODEL) 快速入门
简介我可以肯定,您对于页面上水平或垂直排列的样式元素已经了解得够多了。但是, CSS 还缺少适用于此任务的合适机制。了解 CSS3 弹性方框模型(简称Flexbox)该草案将 Flexbox 描述如下:[...]针对接口设计而优化的 CSS 框模型。除了 CSS 中已有的布局系统之外,该模型还提供了一个额外的布局系统。[CSS21] 在这个新的框模型中,框的子代采用水平转载 2013-01-08 09:25:33 · 796 阅读 · 0 评论 -
前端开发牛逼人的blog
张克军 http://hikejun.com/blog/玉伯 http://hi.baidu.com/bujichong/blog李松峰 http://www.cn-cuckoo.com/阮一峰 http://www.ruanyifeng.com/blog/archives.html田永强(朴灵)(淘宝):xxx元彦 http://www.alloyte原创 2011-09-15 09:46:49 · 1027 阅读 · 0 评论 -
css 书写规范
样式表索引样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息,它一般是一段格式化的CSS注释文本。给出该css文件作者的相关信息 定义站点的布局(几栏,静态布局/动态布局) 记录文件版本号(利于多作者协作及将来更新) 样式表索引命名锚点命名锚点是用来规划整个CSS文件结构的(就好像书签一样),从而使整个CSS文件获得良好的组织原创 2012-12-30 16:15:12 · 786 阅读 · 0 评论 -
高效css的写法
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素1 selector的性能排序 id selector > class selector > tag selector > universive selectorso,key selector 决定了css 规则的性能2 少些css rule,学习规则是可以继承的不能继承的属性:比如border原创 2012-09-21 09:00:27 · 800 阅读 · 0 评论 -
z-index 的用法
z-index属性简介引用:z-index : auto | numberauto:默认值。number:无单位的整数值,可为负数。z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而z-index 值为负数的对象在其之下。注意:这个属性不会作用于窗口控件,如转载 2012-06-26 11:13:02 · 932 阅读 · 0 评论 -
我用到的clientHeight等属性
弹出浮动层,让起居于浏览器底部是需求中,我用到的各种height有:1 浏览器可见区域高度:document.documentElement.clientHeight; ***document.body.clientHeight*** 是整个页面内容的高度,而非浏览器可见区域的高度2 滚动条已滚动的高度:document.documentElement.scrollTop;原创 2012-05-09 21:13:22 · 1367 阅读 · 0 评论 -
Set CSS 100% Width Minus Padding And Margin
Set CSS 100% Width Minus Padding And MarginJuly 15, 2011Styling elements to fluid layout when its parent element has fixed padding or margin always prompts the question: How do I set the转载 2013-07-01 19:58:36 · 1378 阅读 · 0 评论 -
易维护、高移植性的css 书写方法
一why:css 没有作用域的概念,不同css文件,如果选择器相同,会造成覆盖/* profile.css */.error { color: orange; }.success { color: blue; }/* signup.css */.error { color: red; }.success { color: green; }当项目逐渐变大,样式就难于预料;一个模块的原创 2013-09-04 13:29:59 · 872 阅读 · 0 评论 -
分析主流css 框架 css 模块化的写法
方法:参考:http://blog.sina.com.cn/s/blog_60b31fc70100fqgo.html原创 2013-09-12 09:50:28 · 878 阅读 · 0 评论 -
css3 3d 学习文档
perspective http://blog.sina.com.cn/s/blog_7fcde0e20102v7ja.html原创 2016-01-31 18:26:27 · 518 阅读 · 0 评论 -
几种浏览器常见的术语
设备像素:screen.width屏幕尺寸: screen.width 单位:设别像素浏览器窗口尺寸: window.innerWidth 单位:css 像素浏览器滚动距离: window.pageXOffset 单位:css 像素文档的尺寸: document.documentElement.offsetWidth事件坐标:pageX 相对于 元素原创 2016-01-14 10:33:27 · 1075 阅读 · 0 评论 -
restart css3 animation
一个动画完了,还想触发,怎么弄?$el.removeClass('run').addClass('run')这样做,不行。因为浏览器发现删除的和新加的是同一个通话,而浏览器不会让同一个动画多次两次。如何解决?1、触发reflow时间$el.removeClass('run');$el[0].offsetWidth = $el[0].offsetWidth;$el原创 2015-12-24 19:32:30 · 651 阅读 · 0 评论 -
css3 框架学习
参考: https://pages.18f.gov/frontend/css-coding-styleguide/frameworks/添加一些常用的mixin http://bourbon.io/sass 选择器的书写顺序:variables@extend directives@include directivesdeclaration list (prope原创 2016-01-20 20:31:45 · 647 阅读 · 0 评论 -
css3 cal 用法
1 语法calc(); 函数名和括号间不能有空格calc(1px + 2vm) + - 周围必须有空格原创 2015-12-30 20:58:50 · 1735 阅读 · 0 评论 -
sass 变量作用域
sass 变量有两个作用域 -局部变量 -全局变量局部变量在mixin 和function 中定义的变量。嵌套选择器,可以使用在嵌套外定义的变量。局部变量是已{}区分的吗?全局变量在选择器外定义的变量,默认都是全局变量原创 2015-08-24 11:57:35 · 816 阅读 · 0 评论 -
media query width vs device-width
width: 网页中用于渲染的宽度device-width: 顾名思义,就是屏幕的宽度。device-width >=width参考:http://www.sitepoint.com/media-queries-width-vs-device-width/原创 2015-04-29 16:26:24 · 920 阅读 · 0 评论 -
compass 编译 sourcemap 配置
参考:https://chillco.com/blog/setting-sass-and-compass-source-maps转载 2014-12-27 10:11:13 · 750 阅读 · 0 评论 -
inline elment new line
参考:原创 2014-10-24 11:37:07 · 509 阅读 · 0 评论 -
top bottom 百分比是相对于宽度
This one is a tad bit confusing at first, which I’ve written about before. While you might know that percentage widths are calculated based on the width of the container, percentages on properties l转载 2014-05-04 10:36:26 · 1452 阅读 · 0 评论 -
如何保存chrome toolbar 下面对css的修改
In the Chrome Dev Tools, it's possible to save changed CSS and JavaScript files from the Sources panel, and see what changes (diffs) have been made to those files.For example:Open a JavaScript转载 2013-11-22 16:45:42 · 1619 阅读 · 0 评论 -
css 模块化规范bem
参考:http://bem.info/method/definitions/原创 2013-11-20 11:23:58 · 1315 阅读 · 0 评论 -
html 居中布局
需求,有三个内容需要居中显示内容居中,我们太熟悉了:).content1,.content2,.content3{width:960px;margin:0 auto;}这样,三个内容都居中了。然后,当content1 内容里面的h1,距离顶部有50个像素的时候,怎么写? 第一反应,用margin.title{原创 2013-10-30 18:16:32 · 2074 阅读 · 0 评论 -
css 画三角形
原理:css盒模型:一个盒子包括:margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等。 – 调整宽度大小可以调节三角形形状。示例1:一般情况下,我们设置盒子的宽高度及上下左右边框,会呈现如下图:原创 2012-07-20 19:00:13 · 748 阅读 · 0 评论 -
解决IE6 select z-index无效,遮挡div的bug
在最近的一个项目中,遇到了IE6 select遮挡div的bug,为了解决这个bug我查了很多资料,试图找到一个最最有效的方法,很多人是通过iframe的方法来解决,其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。解决方法之一:If转载 2012-07-10 09:23:33 · 1253 阅读 · 0 评论 -
html float 原理 及案例解析
浮动在历史上最初是做什么的? 在最开始的web发展初期,只有一些很简单的文字和图片的布局,其中文字环绕图片怎么办呢?聪明的css开发者就发明了一个float属性。这就是现在我们要说的浮动。因此,浮动出现的意义就是让文字环绕图片。这是最原始的初衷。文字环绕图片是怎么做到的呢?下面分析下。首先我们看看没有float的图文混排。 代码:HTML>http-equi原创 2011-11-04 09:18:25 · 6495 阅读 · 1 评论 -
诡异css bug 记录
li空间明明放得下a下面的文字,但是a的文字却折行了。解决办法:white-space:nowrap;原创 2011-11-30 16:02:04 · 942 阅读 · 0 评论 -
white-space || word-space
white-space : 设置文本行内容是否在对象内自动换行;normal:正常,默认值,文本行内容自动换行。如果文本内容超过对象宽度,则在下一行自动换行。nowrap:不换行,当内容超出对象宽度时也不换行。word-spacing 属性增加或减少单词间的空白(即字间隔)。normal默认。定义单词间的标准空间。le原创 2011-11-30 14:59:18 · 1022 阅读 · 0 评论 -
float 原理,看懂这一篇,你就懂了!!!
CSS Float是网页设计最强大的灵活性功能之一。本文介绍CSS Float的基本原理和行为特征,并介绍各种浏器Float特性的Bugs。内容基本的浮动原理浮动是如何进行的浮动从何处开始水平浮动堆叠反向浮动Clearing Floats基本的浮动原理任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动,事实上即转载 2011-11-10 14:56:35 · 6610 阅读 · 1 评论 -
在IE下margin 0 auto 不能使div居中
有一个div居中的样式属性,在firefox中显示正常,在IE下就不能居中 找了一下,有的说是要加一个w3c认证的一个声明 转载自:http://hotsunshine.iteye.com/blog/1069573Html代码 > 我不想加 还有一个说法,说要给body加一个属性 Html代码 t转载 2011-11-07 16:55:07 · 1451 阅读 · 0 评论 -
整理优化你的CSS代码
当我们面对网站项目里日益庞大的css,javascript文件,无论是为了二次开发还是浏览器解析,都应该优化他们的代码,但是优化并不意味着是简单的压缩或减小文件体积。条理清晰,运行效率高才是我们要的结果。那么有哪些手段能够我们的css代码呢?一起来看看下面的一些建议吧。1.使用缩写缩写能够缩短你的工作时间,减小你的文件体积,何乐而不为?针对相近的不同设置不同的值:view转载 2011-11-17 15:34:20 · 647 阅读 · 0 评论 -
高效CSS属性缩写
今天在整理电脑时发现了曾经学习 CSS 时保存的一篇文章,感觉很有用,保存在电脑上说不定什么时候就找不到了,不如就贴到博客里了。原文是英文的,顺便翻译了一下。水平有限,并没有严格按照原文翻译,只能算意译,如有不到位之处敬请谅解。希望对正在研究网站前端技术的朋友有些许帮助。原文:Efficient CSS with shorthand properties作者:Roger Joh转载 2011-11-17 15:15:51 · 899 阅读 · 0 评论 -
block fomatting context 怎么应用的?它是什么?
要实现以上效果,你会怎么写css呢?方案1: .... .twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;}.twit_list dd .twit_item_content{float:left;width:316px;color:#原创 2011-11-15 09:40:02 · 711 阅读 · 0 评论