Implementation of a two-column layout

The general two-column layout refers to the fixed width of the left column and the adaptive width of the right column. The specific implementation of the two-column layout is as follows:

Using a float, set the width of the left element to 200px and set the float to the left. Set the margin-left of the right element to 200px and the width to auto (the default is auto, covering the entire parent element).

.outer {
  height: 100px;
}
.left {
  float: left;
  width: 200px;
  background: tomato;
}
.right {
  margin-left: 200px;
  width: auto;
  background: gold;
}
Copy the code

With float, set the left element to a fixed size and float it left and the right element to Overflow: Hidden; This triggers the BFC on the right, and the region of the BFC does not overlap with the floating element, so the sides do not overlap.

.left{
     width: 100px;
     height: 200px;
     background: red;
     float: left;
 }
 .right{
     height: 300px;
     background: blue;
     overflow: hidden;
 }
Copy the code

Using the Flex layout, set the left element to a fixed width of 200px and the right element to Flex :1.

.outer {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  flex: 1;
  background: gold;
}
Copy the code

Using absolute positioning, sets the parent element to relative positioning. Set the left element to absolute position and set the width to 200px. Set the margin-left value of the right element to 200px.

.outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100px;
  background: tomato;
}
.right {
  margin-left: 200px;
  background: gold;
}
Copy the code

Using absolute positioning, sets the parent element to relative positioning. Set the width of the left element to 200px, the width of the right element to absolute positioning, the left element to 200px, and the rest of the orientation to 0.

.outer {
  position: relative;
  height: 100px;
}
.left {
  width: 200px;
  background: tomato;
}
.right {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;
  background: gold;
}
Copy the code

Implementation of three column layout

Three-column layout generally refers to a page with a total of three columns, the left and right columns of fixed width, the middle of the adaptive layout, the specific implementation of the three-column layout:

Using absolute positioning, set the left and right columns as absolute positioning, and set the corresponding value of margin in the middle.

.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}
Copy the code

Using the Flex layout, set the left and right columns to a fixed size and the middle column to Flex :1.

.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}
Copy the code

Use float, the left and right columns set fixed size, and set the corresponding direction of the float. The middle column sets the left and right margin values. Note that this way **, the middle column must be placed last: **

.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}
Copy the code

Grail layout, using float and negative margin to achieve. The width of the middle column is set to the width of the parent element, so the last two columns are squeezed to the next line. By setting a margin negative value, the two columns are moved to the top line, and then positioned to both sides by relative positioning.

.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}
Copy the code

Double wing layout, in contrast to the Holy Grail layout, the left and right positions are reserved by margin of the middle column, not by padding of the parent element. Essentially, this is done by floating and margin negative values.

.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}
Copy the code

Horizontal vertical middle realization

Using absolute positioning, position the upper-left corner of an element to the center of the page with Top :50% and left:50%, then adjust the element’s center point to the center of the page with Translate. This method needs to consider browser compatibility issues.

.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
Copy the code

Using absolute positioning, set the values of the four directions to 0, and set the margin to auto. Since the width and height are fixed, the corresponding directions are evenly divided, and the horizontal and vertical directions can be centered. This method is applicable to the case where the box has width and height:

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
Copy the code

Using absolute positioning, position the top left corner of the element to the center of the page with top:50% and left:50%, and then adjust the center point of the element to the center of the page with margin negative values. This method is applicable to the case where the width and height of the box are known

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* Half of its height */
    margin-left: -50px;    /* Half of its width */
}
Copy the code

Using flex layout, the container is centered vertically and horizontally with align-items: Center and context-Content: Center, and then its children can be centered vertically and horizontally as well. Compatibility should be considered in this method, which is widely used in mobile terminals:

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}
Copy the code

Alternatively, if the parent element has a Flex layout, just add margin: Auto to the child element; You can achieve a vertically centered layout

.parent{
    display:flex;
}
.child{
    margin: auto;
}
Copy the code

Margin :auto; You can only do horizontal center

The reason can be seen in this article (specifically related to the definition of auto)

Implement a triangle

The CSS uses the border property to draw triangles.

Usually when setting the box frame, it is often set very narrow, and you may mistakenly think that the frame is composed of rectangle. In fact, the border attribute is made up of triangles. Here’s an example:

div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orange blue red green;
}
Copy the code

Setting both the length and width of the element to 0 will display something like this:So we can draw triangles according to the border property:

  1. Triangle 1
div {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}
Copy the code

  1. Triangle 5
div {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}
Copy the code

There are many, not a realization, the general principle is to control the direction of the triangle through the upper and lower left and right borders, with the width ratio of the border to control the Angle of the triangle.

Implement a sector

The idea of using CSS to achieve the sector is basically the same as the triangle, that is, there is a rounded corner style, to achieve a 90° sector:

div{
  border: 100px solid transparent;
  width: 0;
  height: 0;
  border-radius: 100px;
  border-top-color: red;
}
Copy the code

Implement a width and height adaptive square

  1. Use VW to achieve:
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}
Copy the code
  1. The margin/padding percentage of the element is relative to the parent element width:
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}
Copy the code
  1. Use the margin-top value of the child element to achieve:
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}
.square::after {
  content: ' ';
  display: block;
  margin-top: 100%;
}
Copy the code

Draw a 0.5px line

Take the transform: scale() method, which defines the 2D scale transformation of the element:

transform: scale(0.5.0.5);
Copy the code

Use the Meta ViewPort approach

<meta name="viewport" content="width=device-width.initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/ >Copy the code

This will scale it to 0.5 times its original size, if it is 1px it will become 0.5px. Viewport is mobile only. You can only see the effect on mobile

Set the font to be less than 12px

Under Google CSS, when the font size is set to 12px or less, the display will be the same size, the default is 12px.

Solutions:

  • Use the Webkit kernel’s -webkit-text-size-adjust private CSS property to do this, just add -webkit-text-size-adjust: None; The font size is unlimited. But chrome will not be available after the update to version 27. So higher versions of Chrome Google no longer support the -webkit-text-size-adjust style, so use it with caution.
  • Webkit-transform :scale(0.5) using cSS3’s transform scale attribute; Note – its – transform: scale (0.75); Shrink the size of the entire element. In this case, if it is an inline element, you must convert the inline element to a block element, using display: block/inline-block/… ;
  • Use pictures: If the content is fixed, use less than 12px text to cut out pictures, so that it does not affect compatibility and aesthetic.

How to solve the 1px problem?

The 1px problem refers to the fact that on some Retina models, the 1px of the mobile page can become very thick and look like more than 1px. The reason is simple — 1px in CSS is not the same as 1px on mobile devices. The proportional relationship between them has a special property to describe:

window.devicepixelRatio = Physical pixels of the device/CSS pixels.Copy the code

Open Chrome, start mobile debug mode, and output the devicePixelRatio value on the console. Select iphone6/7/8 and the output is 2:

This means that a 1px CSS pixel will actually be rendered in 2 physical pixel units on this device, so it will look a little bit bigger than 1px.

Three ways to solve the 1PX problem:

Idea 1: Write 0.5px

If the previous 1px style was written like this:

border:1px solid # 333
Copy the code

To get Windows in JS. DevicePixelRatio value, then this value by JSX or template syntax to CSS data, achieve the result of this made demonstration JSX grammar (here) :

<div id="container" data-device={{window.devicePixelRatio}}></div>
Copy the code

You can then use the property selector in CSS to match devicePixelRatio of a certain value, such as here trying to match devicePixelRatio of 2:

#container[data-device="2"] {
  border:0.5 px. solid # 333
}
Copy the code

Simply change 1px to the value after 1/devicePixelRatio, which is by far the easiest way. The downside of this approach is that it’s not compatible. IOS requires version 8 or higher, and Android is not compatible.

Idea 2: pseudo-elements zoom in first and then zoom out

This approach will be more feasible and more compatible. The only downside is more code.

Append a ::after pseudo-element to the end of the target element, make it absolute and spread over the target element, then set its width and height to double the target element, and set the border value to 1px. Then, with the help of CSS animation effects, the entire pseudo element is reduced to 50% of its original size. At this point, the width and height of the pseudo-element is just right to align with the original target element, and the border is reduced to half of 1px, indirectly achieving the effect of 0.5px.

The code is as follows:

#container[data-device="2"] {
  position: relative;
}
#container[data-device="2"]::after{
  position:absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  content:"";
  transform: scale(0.5);
  transform-origin: left top;
  box-sizing: border-box;
  border: 1px solid # 333;
}
Copy the code

Idea 3: Viewport zoom solution

The idea is to start with a few key attributes in the meta tag:

<meta name="viewport" content="Initial - scale = 0.5, the maximum - scale = 0.5, the minimum - scale = 0.5, user - scalable = no">
Copy the code

Here, for a page with a pixel ratio of 2, the entire page is scaled to 1/2 of its original size. Thus, a 1px style that used to take up two physical pixels now takes up a standard physical pixel. Depending on the pixel ratio, this scale can be calculated to a different value, using JS code as follows:

const scale = 1 / window.devicePixelRatio;
// metaEl refers to the Dom corresponding to meta tags
metaEl.setAttribute('content'.`width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
Copy the code

That works, but the side effect of doing so is that the entire page gets scaled. At this point 1px has been processed to a physical pixel size, which is a good size for displaying borders on your phone. However, some content that didn’t need to be shrunk, such as text and images, was also shrunk.

Remember, remember (° °) Blue ✿


O (~ ▽ ~)d Don’t get lost

Favorites ✋🏻 + Follow

Thank you blue