经典盒子模型的种类区别

2019-09-12 郑州网站建设  

盒子模型是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://tzchb.ieyo.com/dede/2012.html转载请标明出处,谢谢合作!
标签:
  • 一个
  • 重要
  • css
  • 盒子
  • 模型
  • 概念