欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS3 >

经典盒子模型的种类区别

 

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型分两种: ie 盒子模型和标准 w3c 盒子模型。

ie 盒子模型的范围也包括 marginborderpaddingcontent,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border pading

例:一个盒子的 margin 20pxborder 1pxpadding 10pxcontent 的宽为 200px、高为 50px

假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px,盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px

假如用ie 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px

盒子模型的选定:

怎么样才算是选择了“标准 w3c 盒子模型”呢?很简单,就是在网页的顶部加上 doctype 声明<!DOCTYPE html>。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

PSCSSmarginpadding的区别

CSSmargin是指自身边框到自身外部另一个容器边框之间的距离,就是容器外距离;padding则是容器内距离。

一、padding

1、语法结构

1padding-left:10px; 左内边距

2padding-right:10px; 右内边距

3padding-top:10px; 上内边距

4padding-bottom:10px; 下内边距

5padding10px; 四边统一内边距

6padding:10px 20px; 上下、左右内边距

7padding:10px 20px 30px; 上、左右、下内边距

8padding:10px 20px 30px 40px; 上、右、下、左内边距

2、可能取的值

1length 规定具体单位记的内边距长度

2% 基于父元素的宽度的内边距的长度

3auto 浏览器计算内边距

4inherit 规定应该从父元素继承内边距

3、浏览器兼容问题

1)所有浏览器都支持padding属性

2)任何版本IE都不支持属性值“inherit

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c33690.shtml

我要分享到:
上一篇:css3中常见的单位
下一篇:CSS属性

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-07-11 02:30 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。