文章分类 -  CSS

[转]css vertical-align属性详细图解分析
摘要：vertical-align属性详细分析 最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。 vertical-align的值有点多，包括 baseline sub supper top text-top bottom text-bottom middle以及各种长度值（%，em，ex等等）。我先给大家看一个我觉得最夸张的值：bottom。代码如下： 复制代码代码如下:p { font-size: 18px; line-height: 36px; font-family: Tahoma, sans-.. 阅读全文
posted @ 2013-09-29 16:36 Acacia Sun 阅读(104) 评论(0) 推荐(0)
[转]Firefox的position：absolute有bug
摘要： 阅读全文
posted @ 2013-09-21 22:32 Acacia Sun 阅读(134) 评论(0) 推荐(0)
[转]“img” elements: Block level element or inline element?
摘要： 阅读全文
posted @ 2013-09-21 18:10 Acacia Sun 阅读(70) 评论(0) 推荐(0)
[转]How to make div's percentage width relative to parent div and not viewport
摘要： 阅读全文
posted @ 2013-09-21 17:55 Acacia Sun 阅读(81) 评论(0) 推荐(0)
[转]width:100%的相对于谁
摘要：从刚开始接触CSS到现在，一般用的单位都是像素这种绝对的单位。简单方便，而且还不容易出现一些莫名其妙的问题。优点听起来不错，缺点也还是很多 的，比如说：页面缺乏灵活性，自适应性不强······ 那么有什么好的解决方法吗？有，不过咱还是把范围缩小，就放在width:100%个这相对单位上来看看。理论篇width:100%的相对于谁想必学过CSS，了解了相对单位的童鞋们都应该知道：相对单位于都有一个基准。那么width:100%是基于谁呢？我把可能出现的几种情况列在下面，并以DEMO说明，在最后进行总结。一般层级元素下面我们把上面的dem 阅读全文
posted @ 2013-09-21 17:42 Acacia Sun 阅读(1023) 评论(0) 推荐(0)
[转]width与max-width
摘要：[1] width:100% 并不包含margin-left margin-right的属性值，直接取其父容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。（细心观察）就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。[2] width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整行！！！这其中 阅读全文
posted @ 2013-09-21 14:23 Acacia Sun 阅读(111) 评论(0) 推荐(0)
[转]条件注释判断浏览器
摘要：我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码，表示的是限定某些浏览器版本才能执行的语句，那么这些判断语句的规则是什么呢？请看下文： 除IE外都可识别 所有的IE可识别 仅IE6可识别 IE6以及IE6以下版本可识别 IE6以及IE6以上版本可识别 仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及IE7以上版本可识别 仅IE8可识别 仅IE9可识别 项目范例说明 ![if !IE]The NOT operator. This is placed immediately in front of thefeatur... 阅读全文
posted @ 2013-09-20 11:02 Acacia Sun 阅读(125) 评论(0) 推荐(0)
[转]CSS中6种清理浮动的方法
摘要：浮动（Float）最初的定义我想只是为了实现图文环绕效果，而如今通常在多栏布局时使用，是CSS里最最常用的一种布局手段。比起圣杯布局等，它 更加容易上手并容易处理布局问题。由于浮动的特性，在布局中使用就产生了两个问题——会对后面的元素造成影响而且造成浮动元素的容器高度失效。因此我们需 要随时清理浮动，方法有很多但各有弊端。选择合理的清理方式除了让代码看起来更优雅，还会对日后维护提供很大的方便。清理浮动的方法使用带有clear属性的空元素在浮动元素后使用一个空元素如，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="cl 阅读全文
posted @ 2013-09-15 11:06 Acacia Sun 阅读(145) 评论(0) 推荐(1)
[转]设置float后元素和文档流的关系
摘要：脱离了正常的文档流。无标题文档 同position:absolute的脱离还是有一些区别的。假如，设置absolute的层的父级position未设置的话（或设为static），这个层就会脱离到body。而float:left的话，还是跟随其父级的。无标题文档 哀伤的哈哀伤的哈哀伤的哈哀伤的哈 阅读全文
posted @ 2013-09-11 11:56 Acacia Sun 阅读(93) 评论(0) 推荐(0)
[转]table设置border-radius不显示的问题
摘要：table中运用border-radius遇到问题今天在做一个升级包的时候遇到了一个问题，先给出代码<table cellpadding=”0″ cellspacing=”0″ class=”confirm-table”><thead><tr><th>证件所在地</th><th>支持证件</th></tr></thead><tbody><tr><td>中国大陆</td><td>身份证、户口本、户籍证明、临时身份证、护照（2007 阅读全文
posted @ 2013-06-08 19:00 Acacia Sun 阅读(1253) 评论(0) 推荐(0)
[转]pre标签中内容的换行
摘要：pre{ white-space:pre-wrap;/*css-3*/ white-space:-moz-pre-wrap;/*Mozilia,since1999*/ white-space:-pre-wrap;/*Opera4-6*/ white-space:-o-pre-wrap;/*Opera7*/ word-wrap:break-word;/*InternetExplore5.5_*/} 阅读全文
posted @ 2013-06-08 18:03 Acacia Sun 阅读(85) 评论(0) 推荐(0)