It can load the font text of the server and let the client display the font not installed by the client

grammar:
@font-face{
• font-family:<Yours web The name of the font>;
src: url("Font path);
font-weight:bold;
}
@font-face{
  /*Define font*/
  font-family:"My font";
  src:url("font/CooperBlackStd.otf");
 }
    div{
        font-family: "My font"; 
        /*Reference font*/
    }
    p{
     font-family: "CooperBlackStd";
}

Are you still worried about the special border effect?

box-sizing:border-box;Weird box model(Any inner margins and borders you specify for an element will be drawn at the set width and height)

outline Contour effect heel border The rendering effect is very similar, but it does not occupy the space of web page layout. It is rendered when the element takes focus or is activated,You can try the following example.
div{
      width: 100px;
      height: 100px;
      background-color: red;
      border: 10px dashed black;
    }
    p{ 
     width: 100px;
     height: 100px;
     background-color: red;
     outline: 10px dashed black;
     /*box-sizing:border-box Weird box mode
      outline  The contour effect decoration style does not occupy text space*/
}

Do you still remember the newspaper layout of that year? When your web page style also needs this style, take a look at the following!

Column layout

/Column properties/
column-count: number； Quantity control of columns
Column gap: length unit; Distance between columns
Column rule: width, color; See the separation line between columns, similar to border
div{
/The properties of columns (columns) are divided into several columns/
-webkit-column-count:3;
-moz-column-count:3;
-o-column-count:3;
column-count:3;

The following is a code example. Go and try it!

 /*Width between columns*/
 -webkit-column-gap:100px; 
 -moz-column-gap:100px; 
 -o-column-gap:100px; 
 column-gap:100px;
    
    /*Width and color of the divider between columns*/
    -webkit-column-rule:5px dashed red;
    column-rule:5px dashed red;

}

Flex box: flexible layout

advantage:

1. It has strong adaptability and is very practical in making interface types with different screen resolutions
2. The width can be adjusted at will. Scale element width and height
3. You can easily change the order of elements
4. Adaptive layout is fast and easy to maintain

Elastic box model

display: box; Layout the child elements of an element in a flexible layout
-webkit-box-orient:vertical; Arrangement order of child elements (horizontal or vertical)
Box direct action: normal | reverse the order of the child elements
-webkit-box-flex:1; How do child elements allocate remaining space
Box align: start | end | center vertical alignment of child elements
Box pack: horizontal alignment of start | end | center child elements
flexbox is a layout module that contains the attributes of parent and child elements
The theme of flexbox layout is that the size of the element changes to adapt to the available space. When the space becomes larger, the flex element will expand to fill the available space. When the flex element exceeds the available space, it will automatically shrink. In short, the flex element can make your layout automatically scale according to the size change of the browser
Flexible layout flex box

Note: horizontal layout is preferred

Code example!!!!!!(If you don't understand it, understand it by yourself)
 *{
     margin: 0;
     padding: 0;
    }
    html,body{
     height: 100%;
    }
    .wrap{
        height: 100%;
        /*Declare the elastic box model at the parent*/
        display: -webkit-box;
        /*The elastic box model defaults to horizontal layout and can be set to vertical layout*/
        /*-webkit-box-orient:vertical;*/
    }
    .wrap div{
     /*width: 200px;*/
     /*height: 100px;*/
    }
    .con1{
     background-color:red;
     -webkit-box-flex:2;
    }
    .con2{
     background-color:blue;
     -webkit-box-flex:1;
     /*Set the necessary conditions for the current quick change to elastic model and fill in the remaining content. The parent sets the elastic box model*/
    }
    .con3{
     background-color: yellow;
     /*Fill ratio*/
     -webkit-box-flex:1;
    }

Author: Senior migrant workers
Link: https://www.jianshu.com/p/7d958300b651
Source: Jianshu
The copyright belongs to the author. For commercial reprint, please contact the author for authorization. For non-commercial reprint, please indicate the source.