盒子模型
1. 盒子模型分为两种模型:
(1)W3C模型:也称为内容盒子,标准盒子。
(1)内容区的宽高:
宽:我们定义的宽width;
高:我们定义的高height。
(2)盒子的宽高:
宽:内容的宽+边框的厚度+左右内边距的厚度(padding);
高:内容的高+边框的厚度+上下内边距的厚度(padding)。
(3)所占屏幕宽高:
宽:盒子的宽+左右外边距(margin);
高:盒子的高+上下外边距(margin)。
(2)IE盒子:又称为边框盒子,怪异盒子。
(1)内容区的宽高:
宽:width-左右padding-左右border;
高:height-上下padding-上下border。
(2)盒子的宽高:
宽:width+左右margin;
高:height+上下margin
2.用CSS切换盒子的模型
box-sizing:border-box;切换边框盒子
box-sizing:centent-box;切换内容盒子
3.盒子模型常用语句
(1)边框:border:1px(厚度) solid(实线) red(颜色);
(2)内边距:是盒子内容到盒子边框的距离。
padding:1px; 上下左右都是1px;
padding:1px 2px; 上下为1px,左右为2px。
padding:1px 2px 3px 4px; 上右下左分别为1px,2px,3px,4px。
padding-top:上内边距
padding-bottom:下内边距
padding-left:左内边距
padding-right:右内边距
(3)外边距:是盒子外部与其他盒子的距离。
margin:1px;上下左右都是1px;
margin:1px 2px; 上下为1px,左右为2px。
margin:1px 2px 3px 4px; 上右下左分别为1px,2px,3px,4px。
margin-top:上内边距
margin-bottom:下内边距
margin-left:左内边距
margin-right:右内边距