Html css high frequency questions (1)

1. What is BFC?

BFC (Block Formatting Context) block formatting context is part of the visual CSS rendering of a Web page, the area where the layout process of the block box occurs, and the area where floating elements interact with other elements.

BFC is an isolated independent container on the page, and the child elements inside the container will not affect the elements outside.

How to create a BFC?

Floating elements (the float of the element is not none, specify float as left or right to create a BFC)
Absolutely positioned elements (the position of the element is absolute or fixed)
display:inline-block, display:table-cell, display:flex, display: inline-flex
overflow specifies a value other than visible

For details, please refer to this blog, which is written in detail:

What are BFCs in CSS? how to use? _webchang's blog-CSDN blog_bfc css BFC (block formatting context) detailed explanation https://blog.csdn.net/weixin_43974265/article/details/115416184

 2. The width and height of the parent element and the child element are not fixed, how to achieve horizontal and vertical centering?

    1. Flex Box

       Parent element settings: display: flex; justify-content: center; align-items: center, child elements can set margin: auto;

    2. Positioning plus displacement

        Father element: position: relative.

        Child element: position: absolute;top:50%;left:50%;transform:translate(-50%,-50%)

3. Briefly describe the difference between the selector ~ and +

       ~: Match multiple, you can choose the same level element immediately following the current qualified element

       +: Only one can be matched, and multiple elements at the same level that meet the conditions can be matched.

4. The box model corresponding to box-sizing

     box-sizing is used to change the width and height of the calculated element, the default css box       

1. content-box: Following the w3c principle, the width and height of the box do not include padding and border.
2. border-box: The width and height of the box include padidng and border values
3. inherit: is the box-sizing value inherited from the parent container

5. The difference between align-items and align-content

1.     align-items: used for single-line content, setting the default alignment of each sub-item on the cross axis
2.     align-content: When used with multiple lines of content, you need to set flex-wrap: wrap before use;

Indicates that the child element exceeds the line break. When the flex container has extra space on the cross axis, the child item is aligned as a whole.

For details, please refer to the following blog:

716 css flex layout: flex-flow, flex-direction, flex-wrap, justify-content, align-items, align-content, flex, order, align-sel_mb5fed409d6f1b2's technical blog_51CTO blog

6. What is standard document flow?

   Standard document flow is the way elements are arranged automatically from left to right and from top to bottom in the process of element typesetting and layout. When the previous content changes, the following content will also change.

HTML is a standard document flow document.

7. What is z-index? When can the value of position be triggered?

z-index: refers to the hierarchical level displayed by the overlapping layer when an element is positioned on the current document page. The default is 0, and the value is not limited. The larger the value, the higher the displayed level

Trigger mechanism: It will only be triggered when the value of position is set to absolute, relative or fixed.

8. How does css3 achieve rounded corners?

border-radius property

1. Four values: upper left, upper right, lower right, lower left
2.  Three values: top left, top right and bottom left, bottom right
3. Two values: top left and bottom right, top right and bottom left
4.   One value: four fillet values ​​are the same

You only need to use border-radius to set the four corners to an appropriate size to achieve rounded corners.

9. How to clear floating in css

1. Add an empty block-level tag at the end of the tag, and set the style attribute to: clear: both;

     Disadvantage: If there are many floating layouts on the page, a lot of empty divs will be added, which is not conducive to page optimization

2. The parent defines the pseudo-classes after and zoom,

.box:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
}
.box{
zoom:1;
}

3. The parent div defines overflow:hidden

    Advantages:  simple, less code, good browser support

    Disadvantage:  Cannot be used with position, because the excess size will be hidden.

4. Separately define the height of the parent element (height)

      If the height of the parent element is not defined, when the height of the parent element is completely extended by the child element, the parent div manually defines the height, which solves the problem that the parent div cannot automatically obtain the height.