随笔分类 - CSS
摘要：序言：应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ，以备后用 LESS代码： .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-r
阅读全文
摘要：一、浏览器默认处理文本换行现在的浏览器对文本的换行处理还是比较合理的，当文字超过容器宽度时会自动换行，那么它是怎么自动换行的呢？即：当一行的末尾容纳不下下一个文字或单词时，就会自动换行，英文单词不会被截断，相当于一段默认的css:{ word-wrap: normal; /*浏览器对文本默认的自动换行处理*/}如图：浏览器自动换行文本二、break-word属性值当然在网页排版中也会遇到一些特殊情况，例如：某个单词(某品牌的英文名称)够长，而容器宽度较小以至于容纳不下，那么单词就会溢出容器，你可能就会想到下面一段css代码：{ word-wrap: break-word; /*对溢...
阅读全文
摘要：一、IE浏览器模式Hack标识1、css hack标识ie6 { _property: value; }ie7 { +property: value; }ie9 { property: value\9\0; }lte ie7 { *property: value; }gte ie8 { property: value\0; }all ie { property: value\9; }/*注：除非万不得已，否则不推荐使用hack，使用hack标识必须测试各浏览器(包括新出的ie浏览器)*/2、IE浏览器环境Hack标识所有IE浏览器<!--[if IE]><script>
阅读全文
摘要：CSS图片垂直居中问题，困扰了我许久，今天终于可以总结下来了:方法一：利用定位HTML结构如：<div class="box"> <a class="pic-wrap" href="#" target="_blank"> <img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png"> </a></div>CSS代码如：body { margin:
阅读全文
摘要：图：HTML代码：<div class="pre-wrap"> <div class="pre"> <div class="pre1"></div> <div class="pre2"></div> </div></div>CSS代码：.pre-wrap { width: 200px; height: 120px; margin: 50px auto 0; border: 2px solid #F00; border-r
阅读全文
摘要：all IE{property:value\9;}gte IE 8{property:value\0;}lte IE 7{*property:value;}IE 8/9{property:value\0;}IE 9{property:value\9\0;}IE 7{+property:value;}IE 6{_property:value;}not IE{property:value;}lte：就是Less than or equal to的简写，也就是小于或等于的意思。lt ：就是Less than的简写，也就是小于的意思。gte：就是Greater than or equal to的简写，
阅读全文
