盒模型
Posted xsqlj
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒模型相关的知识，希望对你有一定的参考价值。
1、外边距：改变元素外边的间距（margin可以为负值）
margin:一个值；一个值 改变四个方向 padding:34px;
margin:两个值；每个值控制两个方向 padding:5px 24px;上下 左右
margin:三个值；上 左右 下
margin:四个值；上 右 下 左
margin：20px auto；(auto指左右居中）
margin：auto；（只左右居中，垂直不居中）
margin常见bug:嵌套关系的元素，子元素和父元素的外边距相遇，取较大值。
上下外边距相遇，只显示较大值。
第二种写法：margin-top:20px ; 顶部内边距
margin-bottom:20px; 底部内边距
margin-left:45px; 左内边距
margin-right:56px; 右内边距
2、内边距：改变元素与内容的间距（padding不能为负值，不会对背景图的位置造成影响）
padding:一个值；一个值 改变四个方向 padding:34px;
padding:两个值；每个值控制两个方向 padding:5px 24px;上下 左右
padding:三个值；上 左右 下
padding:四个值；上 右 下 左
第二种写法：padding-top:20px ; 顶部内边距
padding-bottom:20px; 底部内边距
padding-left:45px; 左内边距
padding-right:56px; 右内边距
3、盒模型占位大小计算
w=width+左右边框+左右内边距+左右外边距
h=height+上下边框+上下内边距+上下外边距
4、矩形选框工具选中----ctrl+c-----ctrl+n---ctrl+v----ctrl+shift+alt+s
以上是关于盒模型的主要内容，如果未能解决你的问题，请参考以下文章