盒模型的组成部分:
内容 内边距 外边距 边框线
内边距padding
1.padding是设置盒子与内容之间的位置关系
2.边框线里面的距离都可以设置padding
3.padding使用时会撑大盒子,如果加上padding,想要盒子不变形
加上多少padding,盒子本身宽高就需要减去多少padding
4.padding的设置
单一方向的padding
padding-left padding-right padding-top padding-bottom
padding可以设置多个值
1个值:四个方向
2个值:a/上下 b/左右
3个值:a/上 b/左右 c/下
4个值:上右下左 顺时针方向 padding不可以设置负值
外边距margin
1.外边距的左右是控制盒子与盒子之间的位置关系
2.外框线外边的都可以设置外边距
3.单一方向的margin
margin-left margin-right margin-top margin-bottom
margin也可以设置多个值
1个值:四个方向
2个值:a/上下 b/左右
3个值:a/上 b/左右 c/下
4个值:上右下左 顺时针方向
margin可以设置负值
margin-left(正右负左)
margin-top(正下负上)
外边距常见问题
1.上下margin重叠问题
两个盒子上下显示 两个盒子都没外边距 上下会重叠
2.margin-top的传递问题
如果父子关系,父元素的第一个子元素设置margin-top
margin-top值会传递给父元素
解决方法:
父元素
1.给父元素加边框border
2.overflow:hidden 隐藏超出的内容(触发了BFC)
3.可以用padding-top代替margin-top
4.给父元素加浮动float(不推荐专门解决传递问题)
子元素
float:left(不推荐专门解决传递问题)
设置块元素水平居中(如果内容浮动,auto不起作用)
margin:0 auto;
盒模型计算?
总宽度:width+左右的padding+左右的border
总高度:height+上下的padding+上下的border
按钮的高度是包含边框的