Common layout and problems of HTML + CSS


After working for a long time, I have accumulated a lot of experience. Now I will record my own experience and summary from scratch,

This is a summary of HTML + CSS common layout and pit

Common layout of PC

There are many kinds of PC layout, such as holy grail layout, double wings and so on, but they have not been used in the development, and the common ones are two

1. Margrn + floating layout

margin: 0 auto; Cooperatefloat:left/right;

The effect is shown in the figure

Common layout and problems of HTML + CSS

Then there should be alignment when there is layout

Text align: Center; // align horizontally

Line height: 100px; // row height, which is generally used to achieve vertical center and the alignment of elements in the container

There are some pits in itThat is, novices may use it vertical-align: middle;

This is for in line elements. First set the parent element as in line to have effect. Then it is not very easy to use. I usually use less.

line-height: 100%;There are holes in the row height, so the percentage is invalid

The percentage of line spacing based on the current font size.

This is a sentence from W3C. What does it mean? This is based on the parent elementfont-sizeFont size, specific circumstances useful, usually less than 100%;

Novice attention to start with PX units

2. Responsive layout

This is also a common site layout for PC development

Main application technology@mediaMedia search andwidthWidth% unit

The core of responsive layout is breakpoints. Here are my common breakpoints

/*Mobile first*/

    /*XS Mini screen as default style*/
    /*SM small screen*/
    @media screen and (min-width:576px){

    /*MD medium screen*/
    @media screen and (min-width:768px){

    /*LG large screen*/
    @media screen and (min-width:992px){

    /*XL Large Screen*/
    @media screen and (min-width: 1200px){

It can be seen that I adopt the mobile first strategy, SM super small screen as the default style, said the meaning

XS is generally the size of a 375px mobile phone, SM is a large screen mobile phone, MD medium screen tablet, LG is a small screen computer, and XL is our normal computer.

How to adapt?

First of all, it can be used on 1200px computersmargin: 0 auto;And floating layout, you can also see the percentage of your designer’s drawing

Then the key point is to use the percentage layout on the mobile phone. As long as the percentage is used, it needs to be usedWeird box model, or you can’t write it

    /*Weird box model*/
    box-sizing: border-box;

In the weird box model, the padding is also calculated into the width, which will not be discussed in detail here.

Then the scope of application of responsive layout, that is, some display enterprise websites, and some large websites will develop their own mobile sites

Because the disadvantage of responsive is that different terminals will produce a lot of useless code, which is intolerable in websites that value website experience.

Alignment is also usedtext-alignandline-height

3. Other PC layout

Then there are some unconventional layouts

positionFixed positioning is used more often. Some people use fixed relative positioning to replace margin and float layout. However, if there are too many pages, there will be hierarchy problem, which is not used generally.

By the way, if you want to debug the level of the float layout box position: relative;By setting the relative positioning first, you can add a hierarchical, normal document flowz-indexIs invalid.

Once popular layout, double wings, Holy Grail layout, I have tried, the principle ismargin: -100%But now I don’t pay much attention to the layout. If it’s easy to use, it’s OK. If I’m PC, the top two are enough,

Then the work pays more attention to the business related logic

Mobile terminal layout

Mobile compatibility is better, we can use W3C special layout properties, flexible box layout

/*Parent container*/
    /*The focus is on these four attributes. I will not elaborate on the concept of cross axis of main shaft. If you are interested, you can understand it by yourself*/
    /*Elastic box*/
    display: flex;
    /*The direction is horizontal and does not wrap*/
    flex-flow: row nowrap;
    /*Center alignment of spindle*/
    justify-content: center;
    /*Center the cross axis*/
    align-items: center;
/*Sub container*/
    /*Unit width percentage*/
    width: 33.333%;
    /*Whether to divide the remaining space equally, the default value is 0*/
    flex-grow: 1;

There is still a lot to be said about the flexible box layout. If I have time, I can give a special article on the flexible box layout. I will not elaborate on this article.

Elastic box is a special property set by W3C for layout. It’s easy to use. The simplest way to use it is to write it as above.

Mobile terminal layout adaptation

The mobile terminal generally adopts rem as the unit and adapts according to the size of HTML font

The formula 1rem = the font size of HTML tag, and the default font of HTML is 16px, that is, you have not set 1rem = 16px;

Here are the CSS dynamic settings

    /*This is based on the one tenth screen of the iPhone 6, which is 10px. When converting, 1rem = 10px*/
    font-size: calc(100vw / 37.5);

Of course, I use js to set it dynamically, but there is still a problem with VW compatibility;

Then, it is too troublesome to manually switch. I use the postcss-px2rem-exclude plug-in

"Postcss-px2rem exclude": {// code added
    Remunit: 20, // set the REM conversion rule 20px to rem
    exclude: /node_ modules|folder_ Name / I // ignore node_ Files in the modules directory

For this REM conversion, the rules are set, and then you can develop it with px. Because the iPhone 6 DPR is 2, the REM conversion is doubled.

So far, the mobile terminal and PC layout have been discussed

Next, I’ll list two or three small problems in HTML. You can see if you have encountered them. It’s the online search in the problems I encountered in my previous work, and then summed up by myself. The source can’t be tested, so you can copy it to you directly.

1、 There is a gap between the two div tags / a tags and the div box

Because browsers treat elements as words, gaps are reserved for some aligned letters that still grow


PutbodyOffont-sizeSet to 0;

When doing so, remember to assign font size to the element when writing div below.

2、 Blank question under img

The a tag is an inline non replaced element
The IMG tag is an inline replaced element

The default alignment of inline block elements is based on baseline,
For boxes without in line elements, baseline is the bottom edge. If there is an inline element, align baseline to be the baseline of the inline element.
Although there are no other characters in the container, there is a blank character similar to the length of 0 by default. In this case, the bottom height will be raised.
How high is it?
Is the distance from the bottom of the row height to the baseline.


`<a> Set display: inline block; (change the calculation method of a tag height)
`< img > ` set vertical align: bottom; (eliminate extra height under IMG)

3、 Input search box gap

There will be gaps in inline block newline writing. The gap size is generally half of the default font size. 1. Floating to block level elements can solve this problem. 2. Manually clear spaces

Thank you for watching. I wrote this article for the first time. I hope you can point out the mistakes and make progress together!

Recommended Today

How to manage multiple GitHub accounts on one machine

scene On a computer, there are two repositories that belong to two different GitHub accounts. step Configure GitHub’s git account for repository Use the terminal to enter the repository a directory and configure the GIT account $ git config “user_a” $ git config “[email protected]” Use the terminal to enter the repository B directory […]