码迷,mamicode.com
首页 > Web开发 > 详细

css盒模型

时间:2020-06-21 11:48:19      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:nbsp   模型   sof   border   strong   盒模型   height   padding   盒子模型   

盒模型分:W3C标准的盒子模型(标准盒模型)、IE标准的盒子模型(怪异盒模型)

1、标准盒模型

标准盒模型中width指content的宽度,height指content的高度。

标准盒模型下盒子的大小 = content + border + padding + margin

技术图片

 

 2、怪异盒模型

怪异盒模型中的width和height指(content + border + padding)的总宽度/总高度。

怪异盒模型下的盒子的大小 = width(content + border + padding) + margin

技术图片

 

 解析盒模型

box-sizing:content-box; 标准盒模型

box-sizing:border-box; 怪异盒模型

css盒模型

标签:nbsp   模型   sof   border   strong   盒模型   height   padding   盒子模型   

原文地址:https://www.cnblogs.com/MaShuai666/p/13171659.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!