1. The box model

This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

Thank you for meeting you. I’m Y Dazhuang

By Y Dazhuang Link: juejin.cn/user/756923… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the article and pictures from the Internet, if you have any questions please contact me

  • The true size of the box model is fixed. Increasing the inner margin changes the content area

    • Content area, defined height and width

    • Border, the thickness of the border color of the border type border

    • Padding, the distance between the content area and the border

    • Margin, the distance between elements margin

      • /* Border :1px solid yellow; border:1px solid yellow; border:1px solid yellow; 2. Overflow :hidden; Clear float 3. Position: Absolute; Set positioning <! DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .content{ width: 200px; height: 200px; background-color: seagreen; /* open DFC */ *border: 1px solid yellow; */ /*overflow: hidden; */ /*position: absolute; */ margin-top: 50px; } .item2{ width: 100px; height: 100px; border: 1px solid red; background-color: sandybrown; margin-top: 20px; } </style> </head> <body> <! -- Box model: The real size of the box model is fixed. Increase the inner margin and change the content area. Content area, defined height and width 2. Border, thickness of border color of border type 3. <div class="content"> <div class="item2"></div> </div> </body> </ HTML >Copy the code

2. The layout of the site

  1. Conversion and float between elements

    • Block-level elements become inline block elements

      display:inline-block;
margin-left:-5px;                       
Copy the code

    • floating

    (1) The nature of floating elements has changed, becoming inline block elements (2) floating elements out of the open document flow (3) floating elements will cause the parent element height collapse (4) floating elements encounter contain box or another floating element, then stop floating height collapse solution: enable BFCCopy the code

    • Solution to height collapse

      • Solution: Enable the BFC

        1. overflow: hidden; The side effects are relatively minor, but will cut out the rest of the element beyond
        2. float: left; It also causes the parent element to leave the document flow
        3. position: absolute; It also causes the parent element to leave the document flow
        4. display: inline-block; But it will cause width
        5. .nav::after{end solution content: “”; display: block; clear: both; Clear float}
  2. positioning
    position: absolute;
Copy the code
    Positioning: Specifies where elements should be placed in the browser. Default: Static (1) Relative to the original position of the element does not deviate from the document flow and does not change the nature of the element. The element's hierarchy is raised by one level - if the ancestor element has positioning enabled, the absolute positioning element is offset relative to the ancestor element that has positioning enabled. (3) Fixed positioning (is a special case of absolute positioning) Fixed for body reference is always relative to the body of the browser window positioning, will not change with the scrolling of the browser. z-index: 10; /* The z-index is valid only for elements with positioning enabled */Copy the code
  3. Horizontal and vertical are centered
    /* Centralize horizontal and vertical positives between block-level elements and block-level elements left: 50%; right: 50%; margin-left: -100px; margin-top: -100px; Second, we do not know the height and width of the child element position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); Third, change the position of the element: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; * /Copy the code
  4. Elastic layout
    /* The elastic box model contains the elastic container and elastic subitems */ /* 1. */ display: flex; Row, column, vertical */ flex-direction: row; /* 3. Justify -content (1) flex-start, left-justify (2) flex-end, right-justify (3) space-between, justify (4) center */ justify-content: space-around; /* 4. Force (1) wrap, force (2) wrap-reverse, force (3) wrap */ flex-wrap: wrap; /* align vertically between sub-items (1) flex-start, top (2) flex-end, bottom (3) center, center */ align-items: flex-start;Copy the code
    .nav{ border: 1px solid red; /* The elastic box model contains the elastic container and elastic subitems */ /* 1. */ display: flex; Row, column, vertical */ flex-direction: row; /* 3. Justify -content (1) flex-start, left-justify (2) flex-end, right-justify (3) space-between, justify (4) center */ justify-content: space-around; /* 4. Force (1) wrap, force (2) wrap-reverse, force (3) wrap */ flex-wrap: wrap; /* align vertically between sub-items (1) flex-start, top (2) flex-end, bottom (3) center, center */ align-items: flex-start; }Copy the code
  5. Pseudo element (icon)
    Get the desired icon from the Alibaba icon library, download the code, get the CSS, and use the name of the icon directly. <link rel="stylesheet" href="./iconfont.css">Copy the code
  6. Element hierarchy
    Z-index: 2; z-index: 2; Sets elements of the same levelCopy the code

3. Background positioning

/* background-image: url("img/login3.jpg"); /* 2. (1) no-repeat, not (2) repeat-x, horizontal direction (3) repeat-y, vertical direction */ background-repeat: repeat-x; /* the size of the background image (1) is 100%, the horizontal direction is the same as the width of the element, and the vertical direction is automatically equal scale (2), the horizontal direction is 100%, and the vertical direction is 100% (3), the image is infinite zoom */ background-size: cover;Copy the code

Using Sprite map (using positioning mode, to locate the position of the picture)

Background-image: url("img/ image.png "); /* 1. */ background-position: -190px -10px;Copy the code