html css 小技巧小bug 总结
一.火狐和chrome下textarea解决自动拉伸
textarea { resize: none; }
二. IE7下，<p>等标签内部<a>添加float属性后没有和文字排在一行
<!-- '显示模式:' 和 '列表模式','缩略图模式' 没有在同一行中显示--> <div class="view"> 显示模式: <a style="float:right;" title="列表模式" href="#" >列表模式</a> <a style="float:right;" title="缩略图模式" href="#" >缩略图模式</a> </div> <!-- '显示模式:' 和 '列表模式','缩略图模式' 在同一行中显示--> <div class="view"> <a style="float:right;" title="列表模式" href="#" >列表模式</a> <a style="float:right;" title="缩略图模式" href="#" >缩略图模式</a> 显示模式: </div>
结论： 在块元素中有文字时，需要有部分文字有float属性时，应该把浮动的文字放在块元素的内部前面，这样才会在同一行中浮动，而不会在下一行才浮动
三. IE7下，padding的值会算入width中
查看元素布局时，会发现布局中的width把padding的值算了进去。
四、字体间距
行间距： line-height;
字间间距：letter-spacing;
首字缩进：text-indent;
五、图片垂直水平居中
在图片宽高未知，但最大宽高确定的情况下，在div等盒子中需要图片垂直水平都居中的实现可以用<table><td>来实现：
html：
<table> <td><img src="http://img5.hao123.com/data/8f5d57e5bc12734a86afa7f6ef0afba9_0" alt="" /></td> </table>
css：
td{ vertical-align:middle; text-align:center; width: 355px; height: 400px; } td img{ max-width:280px; max-height:400px; }
六、ie下固定table的宽高
在ie下直接给table宽高值不能够实现固定宽高，这是需要再增加一个属性：table-layout
语法：
table-layout : auto | fixed
参数：
auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关
table{ table-layout: fixed; width: 200px; height: 120px; }
七、清除浮动属性 clear的使用注意事项：
1、clear不是一个标签，它是css中的一个属性。
2、其属性值有四个
clear:both|left|right|none;
clear:both;表示该元素两边都不存浮动元素。
clear:left;表示该元素左边不存在浮动元素。
clear:right;表示该元素右边不存在浮动元素。
clear:none表示两边允许有浮动元素。
3、该属性的值指出了不允许有浮动对象的边。换句话，clear属性的作用就是“清除”浮动。 这个属性是用来控制float属性在文档流的物理位置的。当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
clear:both 使用不当造成的例子：在ie8+，chrome，火狐下出现
.aa { float:left; width:100px; height:200px; border:1px solid red; } .bb { margin-left:110px; border:1px solid blue; width:330px; } .cc { float:left; width:100px; height:100px; border:1px solid green; } .dd { float:left; border:1px solid black; width:100px; height:100px; } .clear{ clear:both; }
html:
<div class="aa"></div> <div class="bb"> <div class="cc"></div> <div class="cc"></div> <div class="cc"></div> <div class="clear"></div> <div class="dd"></div> </div>
结果：因为.clear 的使用不当，在<div class="clear"></div>的位置清除了文档流的物理位置，使左右两边都没有浮动属性。造成bug出现
修改css代码：
.aa {
float:left;
width:100px;
height:200px;
border:1px solid red;
}
.bb {
margin-left:110px;
border:1px solid blue;
width:330px;
}
.cc {
float:left; // 改为right
width:100px;
height:100px;
border:1px solid green;
}
.dd {
float:left;
border:1px solid black;
width:100px;
height:100px;
}
.clear{
clear:both; // 改为 right
}
//或者在父元素加 .clearfix
.clearfix:after{
content:".";
visibility:hidden;
height:0;
clear:both;
display: block;
}
// 上面的那段代码有时候不是很给力，clear属性有些过犹不及
// 这段外国的代码和拉轰
.clearfix{
overflow: auto;
_height:1%;
}
// 真心的下面这段也是可以的
.clearfix{
overflow:hidden;
_zoom: 1;
}
结果：
结论：使用clear的时候要注意 需要清除的浮动位置是left、right，还是both。
七、字段换行
字段自动换行有两个属性控制：word-break 和 word-wrap
p{ word-break : break-all word-wrap : break-word }
语法：
word-break : normal | break-all | keep-all
参数：
normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明：
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。
对应的脚本特性为wordBreak。
word-wrap : normal | break-word
参数：
normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生
八、 table清除4像素的间距
在table标签加入 border-collapse:collapse; 属性
table{border-collapse:collapse;}
