Detailed explanation of the special usage skills of CSS margin-CSS Tutorial-php.cn

Detailed explanation of the special usage skills of CSS margin

php中世界最好的语言

Release： 2018-03-21 17:01:06

Original

1964 people have browsed it

This time I will give you a detailed explanation of the special usage techniques of CSS margin, and a detailed explanation of the special usage techniques of CSS margin. What are the precautions? The following is a practical case, let's take a look.

1. Introduction

marginWe are generally used to calling it margins. We can set the margins in four directions respectively. No more details here. Describe the assignment syntax in detail.

Actually, the margins we usually set are physical-level settings, and margins also include start, end, before, after, etc. These are mainly logical-level settings. If you are interested, Google it yourself. .

When setting margin, we must know:

For block-level elements, how effective is margin in four directions;
For inline elements, margin is only effective in the horizontal direction.

2. Box model

Speaking of margin, I have to talk about the box model ：

1. From the inside and outside content => padding => border => margin

The reason why the box model must be understood from the end is mainly because the standard of the box model is not The same, it also determines what the width we set in CSS is. At this time, everyone will think of those calculation formulas. In fact, with the arrival of CSS3, we can set the standard of the box model through box-sizing:

2. border-box: width is calculated from border;

3. content-box: width is calculated from content;

4. padding-box : Removed from the standard.

Here’s another picture, are you already aware of it?

##3. Margin overlap problem

This kind of problem mainly occurs on block elements and not floating elements (it is not described clearly here, and will be discussed in detail later). Let's take a look at what happened.

1. Margin overlap that occurs between adjacent sibling elements

    .a {
        margin: 50px 0;
    }
    .b {
        margin: 100px 0;
    }

Copy after login

##Margin overlap between adjacent sibling elements

In this case, margin overlap occurs. The distance between adjacent sibling nodes is the maximum margin value. The best way to avoid this situation is to set only margin-top or

margin- in the vertical direction. bottom

2. Margin overlap occurs at parent-child nodes

    p(class="b")
    p(class="a")
        p(class="c") C

Copy after login

.a { margin: 20px 0; } .b { margin: 100px 0; }
Copy after login

Margin overlap occurs at parent-child nodes

Follow the following here Our understanding should be that a is 20 pixels away from b, and c is 100 pixels away from a. But this is not the case. Here we can solve the overlapping problem through the following methods:

4. Magical negative margin valueWe set the margin in four directions for a block element What happens:

    .item {
        margin: 0 200px;
        height: 200px;
    }

Copy after login

对于margin赋值在布局的应用很广泛，比如我们已知一个元素的宽高，你可以通过margin负值居中。

    .item {
        position: absolute;
        background: red;
        width: 200px;
        height: 200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }

Copy after login

五、margin与float

对于这两个让人头疼的属性混到一起，我只想说，真的很爆炸。上面我说过“这种问题主要发生在block元素上并且不是浮动元素”，这里要再补充两点：

相邻兄弟元素，如果两者多是浮动元素，则不发生margin重叠；
父子元素，如果其中一个是浮动元素，则不会发生margin重叠；

主要还是由于浮动元素不在正常的文档流中，所以还是用上清除浮动的方法比较好。(一下为bootstrap的实现方式)

    .clearfix::before, .clearfix::after {
        content: " ";
        display: table;
    }
    .clearfix::after {
        clear: both;
    }

Copy after login

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！