- Talk about the classification of tags, as well as commonly used tags
The classification of tags includes block elements, inline block elements, and inline elements
Features of block elements: exclusive line, arranged from top to bottom, width and height can be set, width is not set, the width is 100% of the parent element, the height is expanded by the content, and block elements, inline elements, and inline block elements can be placed inside .
Common block element tags: div h1-h6 ol ul li p etc.
Features of inline block elements: adjacent inline block elements or inline elements can be displayed on one line, the width and height can be set, and the default is to be stretched by the content
Common inline block elements: img input td
Features of inline elements: display from left to right, switch to the next line when one line is full, cannot set width and height, width and height are stretched by content
Common inline elements are: a span em strong del etc.
2. Talk about BFC
The implicit attribute in the page element, that is, block formatting context, referred to as BFC, the element with BFC enabled is equivalent to an independent area, which will not affect the layout of the page, so what problems can be solved by enabling the BFC attribute?
It can solve the problem of overlapping margins of parent elements and child elements, and can solve the problem of high collapse in the page. So how to open BFC?
There are the following 4 methods:
set float
Turn the element into an inline block element (display: inline-block)
Set the property value of overflow to a non-visible value (minimal side effects)
Enable absolute positioning
3. Talk about the rules of style priority
The order of style priority (weight) from large to small is ! Important;> inline style>id selector>class selector, attribute selector>element selector>wildcard selector>inherited weight
If the selectors have the same weight, use the lower selector style, because the browser runs the code from top to bottom
If you are using an intersection selector, then add their weights together, and the result of the addition is their weights
But no matter how the selector is added, it will not exceed its upper level weight
If you are using a union selector, do not add, but see who has the most weight in the union selector
4. Talk about floating
In our page layout, we often use floats. Floats are very important, because we often use block elements in layouts, and the feature of block elements is that they occupy one line alone, so we cannot lay out in horizontal layouts, so floats are It can solve the problem of not being able to layout in the horizontal direction, and setting floating elements will break away from the document flow.
The property name of float is float
Its optional values are
none The page should be as it should be, which is equivalent to not floating
left Set the floating element to float to the left
right Set the floating element to float to the right
5 talk about html semantics;
Html semantics is to define the structure of the code from the meaning, and can clearly express the structural level of the code
For example: header main body footer bottom nav navigation title title aside sidebar etc.
6. Talk about the unit of css size setting
There are many size units for CSS, the common ones are px, em, % percentage, rem, etc.; then what is the difference between them?
px: px is a fixed unit, 1px is equivalent to 1 physical pixel.
em: em is a relative unit, which is defined relative to the current font size. If the current font size is 20px; then 1em=20px, 2em=40px; if the font size is not set, then 1em is equal to the default font size of 16px ;
%: Percentage is also a relative unit, which is defined relative to the width and height of the parent element. If the width and height of the parent element are 200px and 100px, then we set the width and height of the child element to 50%, 50%, Then his corresponding width and height are 100px and 50px.
rem: rem is also a relative unit. It is defined relative to the root label (root). It depends on the font size of the root label and the font size of the label, so 1 rem is.
7. Talk about the horizontal centering method of several elements
Horizontal centering should be divided into why it is centered. If the block element is to be centered on the page, we can set margin: 0 auto; to center the page layout; if the content is to be in the parent box, we have an attribute: text- align: center; in this way, the content will be horizontally centered;
Absolute positioning can also achieve horizontal centering. Through absolute positioning, set left: 50% and margin-left: - (half the width of the element), so that horizontal centering can also be achieved
If the main axis in the elastic box is the X axis, then justify-content: center can also achieve horizontal centering
Absolute positioning and transform can also be centered. After the element is enabled for absolute positioning, top: 0; left: 0; then transform: translate (-50%, -50%);
8. Talk about the box model
The box model is the most common in our layout. The box model consists of four parts, margin, border, padding, and content;
The outer margin is to adjust the position of the box on the page. Its properties are: margin-left, margin-top, margin-right, and margin-bottom, which correspond to left, top, right, and bottom, for example, margin-left: 50px; means that the value of the element from the left is increased by 50px. If it is followed by a negative value, it means that it wants to move in the opposite direction. Shorthand margin: It can be followed by 4 values, 3 values, 2 values, and 1 value.
4 values, the order corresponds to up, right, down, left
3 values, corresponding to up, left and right, down
2 values, corresponding to up and down, left and right
1 value is the same value in all 4 directions
The border is to add a border to the box. Its properties include border-width, border-color; border-style; they refer to the size, color, and style of the border respectively. Of course, it also has the abbreviation border: followed by the size, color, and style , in no fixed order.
Padding refers to the distance from the border to the content area, its attribute is padding, and its rules are the same as those of margin
We generally set the width and height for the content area, so the border, padding, and the size of the content area will all affect the size of the box. The width and height you want to set are the content of the padding, margin, and content area. Inside, we have an attribute called: box-sizing: border-box;
9. Talk about the three-pixel problem in pictures
The three-pixel problem is because img is an inline block element, leaving a blank space on the page, which is the three-pixel problem
There are the following solutions to solve the image three-pixel problem:
- Turn images into block elements
- out of document flow
- Set parent element font-size to 0
- Set the vertical-align property and set a non-visible style value
10. How to optimize and solve the problem of height collapse
We generally do not set the height of the parent element, which is propped up by the child element, but setting the child element to float will cause the height of the parent element to be lost, which is called height collapse
There are the following methods to solve the height collapse:
1. Set a fixed height to the parent element
2. Open BFC
3. You can add a blank block element directly behind the highly collapsed parent element, and then clear the float.
4. You can add a block-level element to the end of the element through the after pseudo-class, and then clear the float.