请选择 进入手机版 | 继续访问电脑版
首页 /web前端 / 正文

div css布局解决浏览器兼容及优化等实用技巧

2021-03-01| 发布者: 爺的笵灬你不懂| 查看: 454

DIV 上下居中用 line-height Html代码 复制代码代码如下: div.v-align {line-height: 200px;height: 200px;border: 1px solid red;} 垂直居中 清除浏览器默认样式 1.用其他有名的库来清除(如:YUI) 2.自已清除 如

DIV 上下居中用 line-height
Html代码

复制代码代码如下:

垂直居中


清除浏览器默认样式
1.用其他有名的库来清除(如:YUI)
2.自已清除 如:
* {padding: 0;margin:0;}

让A支持所有浏览器
Html代码

复制代码代码如下:

捷道数码

Google

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




来源:www.guadou.net 如有侵权,请联系QQ:199993150
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

0人已打赏

0条评论 454人参与 网友评论 文明发言,请先登录注册

文明上网理性发言,请遵守国家法律法规。

最新评论

相关推荐
©2001-2018 瓜豆网 https://www.guadou.net/中国互联网举报中心非经营性网站公安网备