Questions to note about HTML page layouts

1. Set the element width as a percentage errors that may result

Many students are accustomed to using percentages to set the width of page elements (such as Div, which is referred to as the box, easy to introduce), which may cause unknown errors, most commonly when the page is reduced, or the screen resolution is lowered, because the width of the box is set by using the resolution, The box itself decreases as the resolution decreases, potentially causing internal elements to fit inside, and the contents are squeezed to the next line, resulting in layout errors.

I. Solutions

It should be emphasized that using percentages to set the width of the box is not a good idea, but if you use a percentage to set the width, we'd better set the minimum width element{min-width:1000px for the box, and ensure that the inner elements of the box are properly arranged in the box. or set the width of the box to a fixed size, so that we can ensure that when the page shrinks to a certain extent, the page will appear scroll bar, will not affect the layout of the elements inside the box.

2. Do not move the parent element when you want the icon to move position

A common mistake for some students is to change the position of the parent element by changing the position of the icon (for example, to center the icon and moving the N px to the left), which is obviously wrong. The popular saying is that we want to move the sofa, but the house was moved away.

3. How to center a block element

There are many ways to center a block element horizontally, and the most common practice is to set the following style for the element div{margin:0 auto;} , or we can use relative displacement to change the position of the element selector{position:relative;left:npx}, but this practice often requires the calculation of pixel values, so the first approach is more direct and effective.

4. Comparison of block elements and inline elements

Block elements are called block elements because they all appear by default in a rectangular shape (using the CSS3 style can change this feature), the block element has height, width characteristics, that is, we can set the height and width of the block element to change its original size. Inline elements are different, and by default the contents of the mid-term are arranged, and their shapes are displayed. Another block element adds a newline between the front and the back, which means that the block element is displayed by default (unless we set a float or use a displacement to change its initial position), and through the display property, we can set the state of the element to be displayed;

Display:block; /* element is displayed as a block element */ Display:block; /* elements displayed as inline elements */ Display:inline-block; /* element is displayed as a block element, but with inline features, that is, the end of the line break is canceled/

　　

Questions to note about HTML page layouts