看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?

什么是margin纵向重叠

看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?

看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?

margin的几个属性设置负值会怎样

margin-top和margin-left设置负值,元素向上向左移动
如下图:

测试原图
看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?
如果针对item1设置
看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?

原图中的item1发生改变向上移动20px
看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?
如果针对item3元素设置看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?
item3就会被向左移动20px如下图
看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?

margin-right设置负值,右侧元素左移,自身不受影响
如果用以上原图针对item3设置看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?
item4就会向左移动20px和item3重叠如下

看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?
margin-bottom负值,下方元素上移,自身不受影响

如果以上面的原图设置item1
看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?
item2就会向上移动20px和item1重叠
看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?

怎样理解BFC

看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?
形成BFC的常见条件

  1. float不用none
  2. float不用none
  3. overflow不用visible
  4. display用flex 和inline-block

BFC具体细节可以看这篇文章(转载)

看完觉得有用的兄弟评论配合说一句
看了之后你会大叫:“哇,好细”。你不知道的几个css面试细节问题?