HiCSS — 海玉’s Blog

攻略强制换行与强制不换行

分类: Html/CSS

强制换行与强制不换行问题曾经一度困扰着我，每当遇到换行问题时候那就是痛苦回忆的开始，现在终于痛定思痛，一鼓作气把这个长期顽固问题给解决。

强制换行与强制不换行用到的属性

我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地：

word-wrap语法：

word-wrap: normal(默认) | break-word
各个浏览器均能识别

参数：

normal: 允许内容顶开指定的容器边界。
break-word: 内容将在边界内换行。必要时会触发word-break（注意：请分辨清楚word-break和break-word这俩个是不同的东西，一为属性另为参数）。

说明：

word-wrap是控制是否“为词断行”的，设置或检索当前行超过指定容器的边界时是否断开转行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。

范例：

congratulation这个单词属于长串英文，word-wrap:break-word整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断，这就是对于长串文字不起作用的解释。word-wrap:normal是默认情况，英文单词不被拆开。

continue reading »

CSS实战——纯图片圆角Box的实现技巧

分类: Html/CSS

终于要开始写实战系列了，本站的口号可是理论为辅，实战为主哦。对，你没有看错，就是“纯图片”，不是纯代码实现而是利用图片来实现的圆角。你或许会不以为然，可是我想告诉你的是即使将来CSS3圆角实现全浏览器兼容，但在当下图片圆角依旧是主流，丰富的图片效果（渐变、阴影、透明度、圆角、浏览器兼容、开发维护效率）这些是用代码实现远远不可比拟的。所以说图片圆角在实战中的重要性是有目共睹的，掌握图片圆角的技巧为日常开发打下坚实的基础。下面开始剖析各个图片圆角的实现技巧，你会发现原来用图片实现的圆角也会那么的丰富多彩！

全部浮动法

如果一个CSS初学者写图片圆角效果，那么推荐使用全部浮动法，简单且容易上手。其原理就是左圆角左浮动，主体也左浮动，右圆角右浮动，外包div 平铺背景图片。很直观的就实现出图片圆角效果。缺点是之后会需要清除浮动，且因背景图片全部平铺，所以左右俩个圆角必须左右覆盖背景上不能让圆角留白处透明出下方的图片。

HTML代码如下：

<div class="floatMethod">
  <div class="left"></div>
  <div class="middle">全部浮动法</div>
  <div class="right"></div>
</div>

CSS代码如下：

.floatMethod{width:350px; height:32px; background:url('roundBox_middle.gif') left top repeat-x;}
.floatMethod .middle{float:left; line-height:32px; padding:0 0 0 10px;}
.floatMethod .left{float:left; width:6px; height:32px; background:url('roundBox_left.gif') left top no-repeat;}
.floatMethod .right{float:right; width:8px; height:32px; background:url('roundBox_right.gif') left top no-repeat;}

continue reading »

Javascript的循环优化探究

分类: Javascript

前几天又温习了一番JS的基础知识，发现JS循环同其他语言的循环大有不同，随后再继续翻了俩本JS的权威教程，写下这篇文章。

平时我们书写循环大致是这个样子的：

function(){
	//一般循环的书写方式
	for(var i=0; i<values.length; i++){
		...
	}
}

优化变量声明

上面这个写法在一开始学习JS的时候是没有错的，甚至对于绝大多数的面向对象语言这么写都是正确的书写方式，但JS不同与其他面向对象的语言，他没有块及作用域，有的仅仅是函数作用域，所以说，上面的写法并不是很规范，在某些情况下还会发生Bug ，当你使用了一个变量，然后不久在函数中又重新声明的话，就可能产生逻辑错误。对于JavaScript，只要你的变量是在同一个作用域中（同一函数），它都被当做是声明的，即使是它在var声明前使用的时候。合理的写法即把变量声明在函数的开始，而不是在循环内部才开始定义变量。

function func(){
	//优化JS的变量定义，变量定义在开始位置，避免产生块级作用域的误区
	var i;
	for(i=0; i<values.length; i++){
		...
	}
}

优化循环中动态集合读取

优化了JS 循环的变量后，我们继续深入优化。日常开发最常打交道的就是DOM 了，常常会遇到循环NodeList 的情况（不知道什么是NodeList 对象的话请去复习基础知识）。总而言之一般类似var divs = document.getElementsByTagName(“div”) 的这个divs 所引用的就是NodeList 对象，其他类似的NodeList 近亲有NameNodeMap 和 HTMLCollection， 这三个集合每当文档结构发生变化时，它们都会得到更新（而且还是动态的更新）。这样就会导致俩个问题，第一是性能问题，每当你修改NodeList 在读取它时，你读取的不是先前的NodeList 而是修改后动态更新的NodeList。第二会产生无限循环的Bug。举个例子，下列代码会导致无限循环：

continue reading »

z-index下的一些知识

分类: Html/CSS

前几天工作的时候遇到一个问题，在IE6下select 这个控件似乎无法用z-index 属性隐藏，接下来就开始了寻找问题的解法，总结了一些z-index 的知识。

z-index 定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。——W3shcool

z-index：auto | number

默认值：auto 堆叠顺序与父元素相等

number：无单位的整数值，可为负数

JavaScript 语法： object.style.zIndex=”1″

注意：z-index 属性适用于那些被定义了除position:static 外任意属性的元素中。即z-index 仅能在定位元素上奏效（position: absolute | relative | fix）。

stacking context & stack level & z-index 是什么

stacking context 堆叠上下文

每个定位元素都归属于一个stacking context（即堆叠上下文，以下统一用堆叠上下文），最初的堆叠上下文（即根部堆叠上下文）是由根元素产生（一般页面的根元素是body），而其他的堆叠上下文则由定位元素产生（此定位元素的z-index 被定义一个非auto 的z-index 值），定位子元素会以这个基准堆叠上下文为参考，用相同的规则来决定层叠顺序。

触发stacking context

1. 定位元素并且定义了z-index为非auto；

2. FF, Safari, Chrome下元素设置opacity属性（1除外）会产生stacking context；(除了Opera)

3. IE6,7下的定位元素，无论设置了z-index，或无论z-index设置成什么值，都会产生新的 stacking context。

continue reading »

overflow知多少

分类: Html/CSS

最近在研究OOCSS，当打开template.css阅读第一行时，震惊了，第一眼居然没看懂。。。。。。以下就是OOCSS下的template.css第一行代码：

.body{overflow:hidden; _overflow:visible; _zoom:1;}
.main{overflow:hidden; _overflow:visible; _zoom:1;}

后来分析这段代码，不分析不知道，一分析吓一跳，短短三个属性竟然包含了浮动、浮动清除、Haslayout、IE6兼容性、最小高度不同浏览器下实现、浏览器Hack、overflow的各种用途等等一系列的问题及知识点。废话不多说，且荣我细细道来这行代码的可怕之处！

在分析之前，先补充一下是基本知识，否则等最后分析了半天你听的一头雾水这不是本文想达到的效果。

overflow是什么，有什么用途：

overflow属性规定当内容溢出元素框时发生的事情。——W3shcool

根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处理。

overflow属性有四个值：visible (默认), hidden, scroll, 和auto。这里我们只分析 overflow:visible和hidden其他俩属性这里不多做展开，有兴趣的读者可以上网查一下另外俩个属性的知识。

知识：overflow:hidden的用途

我们平时最常用到的即overflow:hidden，一般用在固定宽高的div里面，目的是隐藏溢出使内部元素高度即使超过父元素也能够被隐藏。

overflow:hidden另一个流行的用途是用在没有宽高的div里，其目的是清除浮动。应用了overflow(auto或hidden)的元素（默认高度height:auto），将会扩展到它需要的大小以包围它里面的浮动的子元素。这是一个很奇特的特性，因为他的简洁，许多coder都喜欢利用这个特性来清除浮动。

continue reading »