45 lines
1.2 KiB
Markdown
45 lines
1.2 KiB
Markdown
---
|
||
title: 盒模型使用技巧及相关问题
|
||
date: 2022-01-08 23:41:31
|
||
tags:
|
||
- CSS
|
||
categories: CSS
|
||
author: Anges黎梦
|
||
---
|
||
## margin相关技巧
|
||
|
||
1、设置不浮动的元素相对于父级水平居中： **margin:x auto;**
|
||
|
||
2、margin负值让元素位移及边框合并
|
||
|
||
## 垂直外边距合并
|
||
|
||
垂直外边距合并指的是，当两个不浮动的元素，它们的垂直外边距相遇时，它们将形成一个外边距。
|
||
|
||
合并后的外边 距的高度等于两个发生合并的外边距的高度中的较大者，实际开发中一般只设置**margin-top**来避开这种合并的问题，
|
||
|
||
或者将元素浮动，也可以避开这种问题。
|
||
|
||
## margin-top 塌陷
|
||
|
||
在两个不浮动的盒子嵌套时候，内部的盒子设置的**margin-top**会加到外边的盒子上，导致内部的盒子**margin-top**设置失败，
|
||
|
||
解决方法如下：
|
||
|
||
1、外部盒子设置一个边框
|
||
|
||
2、外部盒子设置 **overflow:hidden**
|
||
|
||
3、使用伪元素类：
|
||
|
||
```css
|
||
.clearfix:before{
|
||
content: '';
|
||
display:table;
|
||
}
|
||
```
|
||
|
||
可以尝试使用margin间距制作下面的例子：
|
||
|
||
|