1、盒子的种类
-
w3c盒子(内容盒子、标准盒子、默认盒子)
-
IE盒子(边框盒子、怪异盒子)
2、两种盒子有什么区别?
w3c盒子设置的width、height为内容区
IE盒子设置的width、height为盒子本身
3、盒子的组成
一、 w3c盒子
语法:box-sizing: content-box;(默认为w3c盒子)
padiding取值:
当padding=0, 盒子=内容区
设置padding>0,盒子宽高往外撑开(盒子变大、内容区不变)
w3c的盒子的宽高:
w3c盒子的宽度=width+padding-left+padding-right+border-left+border-right
w3c盒子的高度=height+padding-top+padding-bottom+border-top+border-bottom
所占页面的宽高:
w3c盒子页面所占宽度=w3c盒子的宽度+margin-left+margin-right
w3c盒子页面所占高度=w3c盒子的高度+margin-top+margin-bottom
二、IE盒子
语法:box-sizing: border-box;
padding取值:
padding=0,盒子=内容区
设置padding>0,内容器往里挤(盒子不变,内容区变小)
IE盒子的宽高:
- IE盒子的宽=width
- IE盒子的高=height
所占页面的宽高:
IE盒子页面所占宽度=IE盒子的宽度+margin-left+margin-right
IE盒子页面所占高度=IE盒子的高度+margin-top+margin-bottom