22 盒模型使用技巧及相关问题

盒模型使用技巧及相关问题

margin相关技巧 
1、设置元素水平居中: margin:x auto;
2、margin负值让元素位移及边框合并 

理解练习 
1、制作一个600*100的盒子,边框1像素黑色,距离浏览器顶部100px,水平居中。
2、制作下面的菜单效果:
课堂练习示例图片

外边距合并 

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下: 

1、使用这种特性
2、设置一边的外边距,一般设置margin-top
3、将元素浮动或者定位 

理解练习 
使用div标签制作如下布局:
课堂练习示例图片

margin-top 塌陷 

在两个盒子嵌套时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类: 

.clearfix:before{
    content: '';
    display:table;
}

理解练习 
分别使用margin间距和padding间距制作下面的例子: 课堂练习示例图片

版权属于:本文由黑马程序员(itheima.com)创作,仅用于学习交流,请勿用于商业目的。

如有侵权,请联系[email protected],收到邮件后立即删除文章。

感谢阅读,如有错误,欢迎指正。如果觉得对您有帮助,欢迎打赏,谢谢~

Last modification:November 11th, 2018 at 10:10 pm

Leave a Comment