本文整理了一些在div+css 布局过程中的一些经验技巧如:浏览器兼容、规范写法、简写等一系列,需要的朋友可以参考下
DIV 上下居中用 line-height
Html代码
清除浏览器默认样式
1.用其他有名的库来清除(如:YUI)
2.自已清除 如:
* {padding: 0;margin:0;}
让A支持所有浏览器
Html代码
A 伪类定义顺序记忆法
LoVe:HAte(爱恨)
IMG vertical-align
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
baseline :默认值。将支持 valign 特性的对象的内容与基线对齐
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top : 将支持 valign 特性的对象的内容对象顶端对齐
text-top : 将支持 valign 特性的对象的文本与对象顶端对齐
middle : 将支持 valign 特性的对象的内容与对象中部对齐
bottom : 将支持 valign 特性的对象的内容与对象底端对齐
text-bottom : 将支持 valign 特性的对象的文本与对象顶端对齐
length : 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。请参阅 长度单位。目前IE尚未实现此参数
Html代码
垂直Margin 叠加
Html代码
Background position
Html代码
Float 占地问题
1.父子TAG都Float以父能包含子
Html代码
Html代码
2.最后一个子TAG后加一clear的无语义tag
Html代码
例子7:
Html代码
Html代码
复制代码
代码如下:垂直居中
清除浏览器默认样式
1.用其他有名的库来清除(如:YUI)
2.自已清除 如:
* {padding: 0;margin:0;}
让A支持所有浏览器
Html代码
复制代码
代码如下:A 伪类定义顺序记忆法
LoVe:HAte(爱恨)
IMG vertical-align
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
baseline :默认值。将支持 valign 特性的对象的内容与基线对齐
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top : 将支持 valign 特性的对象的内容对象顶端对齐
text-top : 将支持 valign 特性的对象的文本与对象顶端对齐
middle : 将支持 valign 特性的对象的内容与对象中部对齐
bottom : 将支持 valign 特性的对象的内容与对象底端对齐
text-bottom : 将支持 valign 特性的对象的文本与对象顶端对齐
length : 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0,对于百分数来说就是0%。请参阅 长度单位。目前IE尚未实现此参数
Html代码
复制代码
代码如下:正常
有图片有字
垂直Margin 叠加
Html代码
复制代码
代码如下:div1
div2
span1span2
Background position
Html代码
复制代码
代码如下:20px
20%
20%
Float 占地问题
1.父子TAG都Float以父能包含子
Html代码
复制代码
代码如下:child
child
child
Html代码
复制代码
代码如下:child
child
child
2.最后一个子TAG后加一clear的无语义tag
Html代码
复制代码
代码如下:child
child
child
例子7:
Html代码
复制代码
代码如下:child
child
child
以上就是div css布局解决浏览器兼容及优化等实用技巧的详细内容,更多请关注0133技术站其它相关文章!