css3(box-sizing调整布局,统一form表单)

1、box-sizing:content-boz(w3c盒模型width=content+padding+width,height亦是)/border-box(Ie传统模型width=content-padding-border,height亦是)

2、调整布局:在常见的左右布局页面中,如果稍微改变(加border,padding)就会导致布局全乱
正常情况下是这样的

[img]http://dl2.iteye.com/upload/attachment/0102/8507/702aa6c0-ddb7-3656-b3fb-f17b6115e88f.png[/img]
如果我给右边页面上加上一个20px的边框,就成了这样

[img]http://dl2.iteye.com/upload/attachment/0102/8509/c676434c-27bb-3630-8096-4bd419fc435e.jpg[/img]
布局就乱了,如果是以前可能就要去改右边这块的长宽。
但是再有了boxsing后就不用了
只要在我们的css代码中加上

.right{
float: left;
width: 48%;
background: green;
border: 20px solid blue;
box-sizing:border-box;
}

布局就好了

[img]http://dl2.iteye.com/upload/attachment/0102/8511/6b0c0445-73bb-3636-b53e-02b32c43114d.png[/img]
这个可能需要你先去了解一下w3c盒模型与传统的ie盒模型


3、form表单
(1)、【type="submit"】、【type="reset"】、button、【type="text"】、select、textarea默认情况下都有2px的border;

(2)、【type="submit"】、【type="reset"】、button默认情况下会有6px的左右padding;height在mac系统下会比在winxp win7系统下少1px,只有16px,(12px的字体时高度为17px);

(3)、【type="text"】默认情况下会有1px的上下padding;WinXP和Win7下高度为15px,Mac系统下为14px

(4)、【type="checkbox"】默认情况下会有margin:3px 3px 3px 4px,并且宽/高度默认为13px(IE6,IE7默认大约是15px,Mac系统下只有9px)

(5)、【type="radio"】默认情况下会有margin: 3px 3px 0 5px的外边,并且宽/高度默认为13px(IE6,IE7默认大约是15px,Mac系统下只有9px)

(6)、textarea默认情况有1px的上下margin;
综上所述:只有【type="text"】和textarea是遵循w3c盒模型,其他都是传统ie,我们将他们所有的padding:0、margin:0、border:1px设置。
但是在这种情况下【type="checkbox"】【type="radio"】宽度仍然不统一
在给他们加上[box-sizing:border-box]在IE6/7下仍不兼容,所以这里还需要用到hack.
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
.x-form .x-btn{ height:25px; width:95px; line-height:25px; color:#000; background:#414143 url(images/btn_02.jpg); border:0px; margin-left:5px; } .x-form .x-brnull{ border-right:0px; } .x-msg{ background:#EEF5FF; margin:0px auto; color:#000; border:1px solid #ccc; } .x-msg A{ text-decoration:none; color:red; } .x-form .x-blnull{ border-left:0px; } .x-form-title,.x-form-title td{ font-weight:bold; color:#000; background:#eee; border:1px solid #dcdcdc; } .x-form-bBack td{ background:url(images/bg6.jpg) repeat-x; color:#FFF; border:1px solid #4D4D4D; } .x-form-bGreen td{ background:url(pic/bg14.jpg) repeat-x; } .x-form-title span,.x-form-title td span{ margin-left:10px; } /**列表***/ .x-list{ width:100%; font-size:12px; } /***列表Head**/ .x-list .x-head td,.x-list .x-head th{ /***background:url(images/head_bg.gif) repeat-x;**/ background:url(pic/bg14.jpg) repeat-x; height:27px; line-height:27px; text-align:center; font-weight:bold; } /**行的默认颜色**/ .x-list td{ padding-left:3px; height:27px; line-height:27px; border:1px solid #dcdcdc; } .x-list .x-sRow td{ background:#F8F8F8; } /**偶数行背景颜色***/ .x-list .x-dRow td{ background: #FBECC6; } /**选中TD背景颜色**/ .x-list .x-stRow td{ background:#d5effc url(images/td_over.png) repeat-x; } /**内容显示位置 left center right**/ .x-list .x-l{ text-align:left; } .x-list .x-c{ text-align:center; } .x-list .x-l{ text-align:right; } /**分页**/ .x-list .x-page{ height:35px; line-height:35px; background:#eee; text-align:center; } .x-list .x-page A{ margin-left:5px; text-decoration:none; color:#004A9B; } .x-list .x-page A:hover{ color:#404040; } .x-list td .x-a A{ text-decoration:none; color:#000; } .x-list td .x-a A:hover{ text-decoration:underline; color:#999; } 比较实用的box样式表单
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值