Moment For Technology

CSS layout rules (box model, document Flow, BFC)

Posted on Aug. 8, 2022, 5:17 p.m. by Arhaan Setty
Category: The front end Tag: css

This is the 10th day of my participation in the August Text Challenge.More challenges in August

preface

By understanding the CSS layout rules, we can theoretically do anything we want

CSS box model

From a CSS perspective, you can think of HTML elements as an arrangement of boxes

Box = Content + padding + border + padding

  1. Content: The contents of the box, displaying any content
  2. Padding: The area between the content and the border, transparent
  3. Border: The area between the inside and outside margins, colorable
  4. Margin: The area outside the border, transparent

Boxes can be divided into standard box model and IE box model

Standard box model

Width = content of the box

Ie box model

Width = Content + padding + border for the box

box-sizing

  1. box-sizing: content-box;Set the box to a standard box model
  2. box-sizing: border-box;Set the box to the IE box model

The document flow

Document flows can be classified as normal flow, absolute location, and float

Normal flow

Interline block-level elements

  1. Width: full line
  2. Set width: this works, if the width is smaller than the line width, there will be a margin at the top
  3. Typical tag: div
.box {
    display: block;
}
Copy the code

Inline elements

  1. Width: content + inside margin + border
  2. Set width: invalid
  3. Typical tag: SPAN
.box{
    display: inline;
}
Copy the code

Inline block-level elements

  1. Width: content + inside margin + border + margin
  2. Set width: Valid
  3. Typical tag: INPUT
.box{
    display: inline-block;
}
Copy the code

Absolute position

  1. position: absolute;
  2. position: fixed;

Float float

Float attributes allow elements to be moved left and right to another float element or boundary out of the document flow. The boundary refers to the padding that wraps the box of floating elements

  1. Position setting absolute or fixed invalidates the float
  2. Float causes the element display property to become a block; Width inline element mode;
  3. Float will cause content to collapse. Clear float properly

BFC

BFC block formatting context, one of the CSS layout rules. The layout process triggers the box to form a BFC, which has specific rules

triggered

  1. HTML tags
  2. Float to the left and right
  3. Overflow is auto, scroll, hidden
  4. Diplay: flex, inline-block, tabel-cell, Table-caption table, Inline-table, inline-flex, grid, inline-grid
  5. The position is absolute, fixed

Constraint rules

  1. The child elements of the BFC, which are not affected by the outside world, are also unaffected by the outside world
  2. The short margin of the two adjacent child elements in the BFC is blocked, which is consistent with the ordinary stream
  3. BFC elements do not overlap with floating elements
  4. The margin of the BFC element is in contact with the BFC border

example

1. Margin overlap solution

div class="wrap"
    div class="item item1"item1/div
/div
div class="item item2"item2/div
div class="item item3"item3/div
Copy the code
.wrap{/* overflow: hidden; } .item{ width: 100px; height: 100px; background: skyblue; } .item1{ background: orange; margin-bottom: 50px; } .item2{ margin-top: 50px; margin-bottom: 50px; background: orchid; } .item3{ margin-top: 50px; margin-bottom: 50px; }Copy the code

The margin of Item2 and Item3 overlaps, i.e. it used to be 200px but now only has 100px

Item1 is wrapped by wrap, which uses Overflow: hidden; The landing. The BFC area is not affected by the outside world, and the distance between Item1 and Item2 remains 200px

2. Two-column layout

div class="side"side/div
div class="main"main/div
Copy the code
.side{
    width: 200px;
    height: 500px;
    float: left;
}

.main{
    overflow: hidden;
    height: 500px;
}
Copy the code

If main does not set overflow: Hidden; So the main part will be blocked by the side. Set Main to BFC so it doesn't overlap with other elements

3. Clear floats

div class="wrap"
    div class="float"float/div
/div

div123/div
Copy the code
.wrap{
    overflow: hidden;
}

.float{
    float: left
}
Copy the code

Setting wrap to BFC clears floating elements within the wrap to avoid overlapping other elements

conclusion

  1. Box model can be combined with our daily ? gift box understanding. The distance between two boxes is called the margin; The shell of the box is the border; The distance between the shell of the box and the gift blank is the inner margin; The gift is content

  2. The default box model is the standard box model, but I prefer box-sizing: border-box; In order to better control the width of the box and avoid content overflow

  3. The layout I'm using now, Flex, can handle almost all situations, but not all situations are optimal

  4. BFC can be understood as one of the CSS layout rules. It's easy to understand this feature in conjunction with issues like margin overlap

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.