Collection of some basic knowledge points of css

Collection of some basic knowledge points of css

1. Element classification

1.1 Block elements

representative:

div, p, h1~h6, ul, ol, etc.

Features:

  • Own a line
  • You can set the width and height, inner and outer margins
  • The default width is the width of the parent element

1.2 Inline elements

representative:

a, span, i, label, strong, em, etc.

Features:

  • And other non-block-level elements displayed one by one within a line
  • Can not set width, height, upper and lower margins, padding, left and right margins can be set
  • The width and height of the content is the width and height of the element

1.3 Inline block elements

representative:

img, input

Features:

  • And other non-block-level elements displayed one by one within a line
  • Width and height, inner and outer margins can be set
  • 1.4 Element type conversion

    • Set display: inline on the block element to convert the block element into an inline element
    • Set display: block for inline elements to convert inline elements into block elements
    • Set display: inline-block for block elements and inline elements to convert block elements and inline elements into inline block elements
    • Use float: left/right on the element, which is equivalent to converting the element into an inline block element
    • Use position: absolute/fixed on the element, which is equivalent to converting the element into a block element

    2. the box model


    2.1 Standard box model (W3C box model)

    box-sizing: content-box

    The width and height of the element is expressed as the size of the content

    The actual width and height of the element: content width and height + padding width and height + border width

    2.2 Weird Box Model (IE Box Model)

    box-sizing: border-box

    The width and height of the element is expressed as: content width and height + padding width and height + border width

    3. css selector and priority

    • !important
    • Inline style (1000)
    • ID selector (0100)
    • Class selector/attribute selector/pseudo-class selector (0010)
    • Relationship selector (0002)
    • Element selector (0001)
    • Wildcard selector (0000)

    4. floating

    The float attribute specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to surround it.

    Note: The float attribute is ignored for absolutely positioned elements!

    • The float of the element is horizontal

    • A floating element will move to the left or right as far as possible until its outer edge touches the border of the containing box or another floating box

    • If the sibling before the floating element is a block element, then the floating element will float on a new line

    • If the sibling before the floating element is an inline element, then the floating element will not float on a new line

    • Floating elements allow the text of the following sibling element and the inline elements before and after it to surround it

    The attribute values of float are as follows:

    leftThe element floats to the left.
    rightThe element floats to the right.
    noneDefaults. The element does not float and will be displayed where it appears in the text.
    inheritSpecifies that the value of the float attribute should be inherited from the parent element.

    5. several ways to clear the float

    Parent element set height

    .floatParent {   height: 50px;} 

    The parent element uses pseudo-elements

    .clear::after {      content: "";      display: block;      height: 0;      clear: both;      visibility: hidden;}
    .floatParent {   /* IE ie6 7  */   zoom: 1;} 

    Parent element uses BFC

    .floatParent {    overflow: auto;   /* IE ie6 7  */   zoom: 1;} 

    Add an empty element after the floating element

    .temp {    clear: both;} 

    6. Positioning

    The position attribute specifies the type of positioning method for an element (static, relative, absolute or fixed).

    The position attribute values are as follows:

    absolute

    Generate absolutely positioned elements, which are positioned relative to the first parent element other than static positioning.

    The position of the element is specified by the "left", "top", "right" and "bottom" attributes.

    fixed

    Generate fixed positioning elements and position them relative to the browser window.

    The position of the element is specified by the "left", "top", "right" and "bottom" attributes.

    relative

    Generate relatively positioned elements and position them relative to their normal positions.

    Therefore, "left:20" will add 20 pixels to the LEFT position of the element.

    staticDefaults. Without positioning, the element appears in the normal flow (ignoring top, bottom, left, right or z-index declarations).
    sticky

    Sticky positioning, which is based on where the user scrolls.

    It behaves like position:relative; and when the page scrolls beyond the target area, it behaves like position:fixed;, it will be fixed at the target position, at this time it is equivalent to the parent element for positioning.

    Note: Internet Explorer, Edge 15 and earlier versions of IE do not support sticky positioning. Safari needs to use the -webkit- prefix (see the example below).

    inheritSpecifies that the value of the position attribute should be inherited from the parent element.
    initialSet this property to use its default value. The default value of position is static. If position: initial is set, the value of position is static.

    7. n ways to center an element (application of positioning)

    absolute + margin auto

    .center {    width: 100px;    height: 50px;    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;}/*   */ 

    absolute + negative margin

    .center {    width: 100px;    height: 50px;    position: absolute;    top: 50%;    left: 50%;    margin-left: -50px;    margin-top: -25px;}/*   */ 

    absolute + calc

    .center {    width: 100px;    height: 50px;    position: absolute;    top: calc(50% - 25px);    left: calc(50% - 50px);}/*  calc  */ 

    absolute + transform

    .center {    width: 100px;    height: 50px;    position: absolute;    top: 50%;    left: 50%;    transform: translateX(-50%) translateY(-50%);}/*  translate2d  */ 

    flex

    .parent {  display: flex;  justify-content: center;  align-items: center;}
    /*  PC  */
     

    8. The similarities and differences between floating and positioning (absolute positioning and fixed positioning)

    8.1 Similarities

    • Are relative to its parent element
    • Will be out of the text flow

    8.2 Difference

    • The positioning element will not affect the sibling elements before and after it; if there are multiple positioning elements, they will overlap by default, and the latter will cover the previous one.
    • Floating elements are not only affected by the sibling elements in front of them, but also sibling elements behind them; multiple floating elements will be lined up in a row (if there is enough space)
    • The specific impacts are as follows:
    1. If the sibling element before the floating element is a block element, the floating element will float on a new line; if it is an inline element, it will not float on another line, and the sibling inline element before it will wrap around the floating element
    2. Floating elements allow the text of the following sibling element and the inline elements before and after it to surround it

    8.3 Verification



    Source code

    <style>    * {         margin: 0;         padding: 0;    }    .container {        width: 600px;        height: 400px;        background-color: pink;        position: relative;        margin: 10px auto;    }    .position, .float {        width: 100px;        height: 50px;    }    .position {        position: absolute;    }    .float {        float: left;    }    .box1, .box3 {        background-color: red;    }    .box2, .box4 {        background-color: yellow;    }</style> 

    <div class="container">     <div>before div</div>     <span>before span</span>     <div class="position box1"></div>     <div class="position box2"></div>     <div>after</div></div><div class="container">     <div>before div</div>     <span>before span</span>     <div class="float box3"></div>     <div class="float box4"></div>     <div>after</div></div> 

    Effect picture


    Description:

    From the screenshots of Google Browse, we can see:

    • The positioning element does not affect the sibling block elements and sibling inline elements in front of it
    • The positioning element does not affect the sibling elements behind it. Because the positioning element has a background color, the sibling elements behind it are covered, but it does not affect where it should be.
    • Multiple positioning elements overlap, and the back covers the front
    • The floating element is affected by the sibling element in front of it, and a new line is floated
    • The sibling inline element in front of the floating element surrounds the floating element (the floating element allows the text of the sibling block element after it and the inline elements before and after it to surround it)
    • The content of the sibling block element behind the floating element surrounds the floating element (the floating element allows the text of the sibling block element after it and the inline elements before and after it to surround it)
    • Multiple floating elements are lined up in a row (if there is enough space)

    9. several methods to achieve two-column layout (fixed width on the left, adaptive on the right)

    float + BFC

    #box {    height: 600px;    background-color: pink;}#left {    width: 200px;    height: 400px;    background-color: red;    float: left;}#right {    height: 500px;    overflow: auto;    background-color: sandybrown;}
    
    <div id="box">    <div id="left"></div>    <div id="right"></div></div> 

    float +margin

    #box {    height: 600px;    background-color: pink;}#left {    width: 200px;    height: 400px;    background-color: red;    float: left;}#right {    height: 500px;    margin-left: 200px;    background-color: sandybrown;} 

    float +calc

    #box {    height: 600px;    background-color: pink;}#left {    width: 200px;    height: 400px;    background-color: red;    float: left;}#right {    width: calc(100% - 200px);    height: 500px;    background-color: sandybrown;    float: left;} 

    flex

    #box {    height: 600px;    background-color: pink;    display: flex;}#left {    width: 200px;    height: 400px;    background-color: red;}#right {    flex-grow: 1;    height: 500px;    background-color: sandybrown;} 

    position + padding

    #box {    height: 600px;    background-color: pink;    position: relative;    padding-left: 200px;}#left {    width: 200px;    height: 400px;    background-color: red;    position: absolute;    top: 0;    left: 0;}#right {    height: 500px;    background-color: sandybrown;}
    <div id="box">    <div id="left"></div>    <div id="right"></div></div> 

    10. Several methods to realize the three-column layout (fixed width on the left and right sides, adaptive in the middle)

    Holy grail

    /*  200 + 150  200 */body {    min-width: 550px;}
    .common {    height: 50px;}#header {    background-color: sandybrown;}#footer {    background-color: brown;    clear: both;}.column {    float: left;}#container {    height: 800px;    padding-left: 200px;    padding-right: 150px;}#main {    width: 100%;    height: 100%;    background-color: yellow;}#left {    width: 200px;    height: 500px;    background-color: blue;    margin-left: -100%;    position: relative;    right: 200px;} #right {    width: 150px;    height: 400px;    background-color: red;    margin-right: -150px;}<div id="header" class="common"></div>
    <div id="container">    <div id="main" class="column"></div>    <div id="left" class="column"></div>    <div id="right" class="column"></div></div><div id="footer" class="common"></div> 

    Double wing

    /*  200 + 150 */
    body {
        min-width: 350px;
    }.common {    height: 50px;}#header {    background-color: sandybrown;}#footer {    background-color: brown;    clear: both;}.column {    float: left;}#container {    width: 100%;    height: 800px;}#main {    margin-left: 200px;    margin-right: 150px;    height: 100%;    background-color: yellow;}#left {    width: 200px;    height: 500px;    background-color: blue;    margin-left: -100%;}#right {    width: 150px;    height: 400px;    background-color: red;    margin-left: -150px;}
    
    
    <div id="header" class="common"></div><div id="container" class="column">    <div id="main"></div></div><div id="left" class="column aside"></div><div id="right" class=column aside"></div><div id="footer" class="common"></div> 

    float + calc

    .common {    height: 50px;}#header {    background-color: sandybrown;}#footer {    background-color: brown;    clear: both;}.column {
        float: left;
    }#container {    width: 100%;    height: 800px;}#left {    width: 200px;    height: 500px;    background-color: blue;}#right {    width: 150px;    height: 400px;    background-color: red;}#main {    width: calc(100% - 350px);    height: 100%;    background-color: yellow;}
    
    
    <div id="header" class="common"></div>
        <div id="container">        <div id="left" class="column"></div>        <div id="main" class="column"></div>        <div id="right" class="column"></div>    </div><div id="footer" class="common"></div> 

    position + padding

    .common {    height: 50px;}#header {    background-color: sandybrown;}#footer {    background-color: brown;    clear: both;}
    #container {    height: 800px;    position: relative;    padding-left: 200px;    padding-right: 200px;}.aside {    height: 400px;    position: absolute;    top: 0;}#left {    width: 200px;    background-color: blue;    left: 0;}#main {    width: 100%;    height: 100%;    background-color: yellow;}#right {    width: 150px;    background-color: red;    right: 0;}
    <div id="header" class="common"></div>    <div id="container">        <div id="left" class="aside"></div>        <div id="main"></div>        <div id="right" class="aside"></div>    </div><div id="footer" class="common"></div> 

    flex

    .common {    height: 50px;}#header {    background-color: sandybrown;} #footer {    background-color: brown;    clear: both;}#container {    width: 100%;    height: 800px;    display: flex;}#left {    flex-basis: 200px;    height: 500px;    background-color: blue;} #right {    flex-basis: 150px;    height: 400px;    background-color: red;}#main {    width: 100%;    height: 100%;    flex: 1;    background-color: yellow;}
    
    
    <div id="header" class="common"></div><div id="header" class="common"></div>    <div id="container">        <div id="left" class="column"></div>        <div id="main" class="column"></div>        <div id="right" class="column"></div>    </div><div id="footer" class="common"></div>