CSS layout strategy

Time:2021-1-19
  1. Left and right layout
  2. Left middle right layout
  3. horizontally
  4. Vertical center
  5. And other tips
The foregoing
This paper introduces some common CSS layout schemes, the usage of tags used in layout and the precautions

Left and right layout

1 floating layout
First, clear the float of the parent pseudo element
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.left-box{
    float:left;
}
.right-box{
    float:right;
}

Left middle right

Three boxes set the width for three boxes
.left-box{
    float:left;
    width:30%;
}
.middle-box{
    float:left;
    width:40%;
}
.right-box{
    float:right;
    width:30%;
}

####Horizontal center
######In line elements

Parent element settings (text)- align:center )

######Block level elements

   magin: 0 auto;
   .son{
        position: absolute;
        left: 50%;
        transform:translate(-50%,0);
   }
   .son{ 
        position:absolute; 
        width:50px; 
        left:50%;
        margin-left:-25px; }

Vertical center

If the element is an inline block level element, the basic idea is to use display: inline block, vertical align: middle and a pseudo element to make the content block in the center of the container

.parent::after, .son{
    display:inline-block;
    vertical-align:middle;
}
.parent::after{
    content:'';
    height:100%;
}
.son{
    position:absolute;
    top:50%;
    -webkit-transform: translate(0,-50%);  
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

Set relative positioning of parent element( position:relative )The child elements are as follows: CSS Style:

.son{
    position:absolute;
    Height: fixed;
    top:0;
    bottom:0;
    margin:auto 0;
}

tips:
display: inline-block;

vertical-align: top

The relationship between inblock and vertical by rote

Recommended Today

How to Build a Cybersecurity Career

Original text:How to Build a Cybersecurity Career How to build the cause of network security Normative guidelines for building a successful career in the field of information security fromDaniel miesslerstayinformation safetyCreated / updated: December 17, 2019 I’ve been doing itinformation safety(now many people call it network security) it’s been about 20 years, and I’ve spent […]