首页 > 其他 > 详细

对标准、怪异盒模型的认识

时间:2018-08-27 16:44:51      阅读:134      评论:0      收藏:0      [点我收藏+]

技术分享图片

标准盒模型和怪异盒模型

  • 什么是盒模型?
    • 网页设计中css技术所使用的一种思维模型
  • 盒模型的组成:
    • 外边距(margin)、边框(border)、内边距(padding)、内容(content)
  • 盒模型的分类:
    • 标准(W3C)盒模型、怪异(IE)盒模型
  • 对于两者的区别,用这幅图就可以说明,简单直接明了(自己画的图,凑合着看啦)

技术分享图片

  • 标准盒:

    标准盒模型是一种正规的盒子模型,它css的width由四部分组成:

      外边距margin(left、right、both have) + 边框border + 内边距padding(left、right、both have) + 内容content

      eg:margin-left  +  border-left-width padding-left  +  content  +  padding-right  +  borer-right-width  +  margin-right

    它css的height由四部分组成:

      外边距margin(top、bottom、both have) + 边框border + 内边距padding(top、bottom、both have) + 内容content

      eg:margin-top  +  border-top-width  padding-top  +  content  +  padding-bottom  +  borer-bottom-width  +  margin-bottom

  • 怪异盒:

    怪异盒模型是一种不正规的盒子模型,它css的width由两部分组成:

      外边距margin(left、right、both have) + 内容content

      eg:margin-left  +  content  +  margin-right

    它css的height由两部分组成:

      外边距margin(top、bottom、both have) + 内容content

      eg:margin-top + content + margin-right

 

  • 注意:标准盒和怪异盒之间的切换
    • 标准盒切换怪异盒:box-sizing:border-box;
    • 怪异盒切换标准盒:box-sizing:content-box。

对标准、怪异盒模型的认识

原文:https://www.cnblogs.com/cq-0715/p/9542765.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!