盒子模型

精讲css盒子模型 
1.w3c标准的盒子模型的了解 
2.IE8盒子模型的了解 
3.认识box-sizing属性的重要作用 
4.知道为盒子设置box-sizing:border-box属性后再用百分比宽度的优点.

一 W3C标准的盒子模型 
标准盒子模型的padding border width 均是是独立的. 
求盒子的总宽度是 width+padding+border

二 IE8盒子模型 
IE8盒子模型 的width是包含padding和border的. 
求盒子的总宽度是 width(包含padding和border)

三 盒子模型的规则是可以改变的 
1.box-sizing属性的使用 
box-sizing:content-box; 这是默认的属性值.w3c标准盒子模型 
box-sizing:border-box; 修改了盒子模型规则,使盒子模型规则与IE8的一样.

2.在写网站前确定盒子模型的规则尤其重要.盒子模型的规则本无好坏之分,不要产生偏见. 
个人心得:做固定布局时使用w3c标准盒子模型是最好的选择. 
(1.)从兼容性考虑.只有个别淘汰浏览器如IE8 IE6有问题.绝大多数是没问题的. 
(2.)由于content padding border margin 几个属性相对独立,在做尺寸计算上时很有效率. 
(3.)使用w3c标准做网站更可靠.后面大家的网站都使用w3c标准布局.先做出东西最重要,再考虑做好东西.

做响应式布局的时候修改box-sizing属性为border-box;使其使用IE8的盒子模型. 
(1.)主流框架均使用这种做法 
(2.)在做百分比宽度布局的时候的优点是标准盒子模型不具备的.

处理表单时尤其注意盒子模型. 
form元素只有【type="text"】和textarea两者是遵循W3C的标准 
即使使用最新谷歌浏览器.【type="submit"】依旧使用的盒子模型是border-box而非content-box

四 emment: 
emment的使用.emment是前端编辑器的重要插件.对于提高写代码的效率很有帮助. 
了解详情可以查看http://emmet.evget.com/

五 css重置属性

 
 
/*重置样式*/
body,div,p,ul,ol,dl,dt,dd,li,form,input,table,th,td,img,h1,h2,h3,h4,h5,h6 { margin:0 ;padding:0; }
body { background:#e8dccd ; color:#000; font-size:12px; font-style:normal; font-family:"Microsoft Yahei";}
em, b, i { font-style:normal;}
img { border:none;}
a { text-decoration:none; color:#000;}
a:hover { text-decoration:underline; color:#f50;}
li { list-style:none;}
table { border-spacing:0; border-collapse:collapse;}
/*the end*/