1. What are the inline elements and block-level elements? and what's the difference?
- Inline elements: a span strong em etc.
It does not occupy an area exclusively, it relies on its own font size or image size to support the structure.
Generally, the width and height cannot be set.
- Features of inline elements:
- on a single line with adjacent inline elements
- The width and height cannot be set, but the padding and margin properties in the horizontal direction can be set, and the vertical direction is invalid
- The default width is its own width
- Inline elements can only hold plain text or other inline elements (except a tag)
- Block-level elements: h1~h6 p div ul ol li etc.
Each block-level element occupies one or more lines, and its width and height can be set independently.
- Features of block-level elements:
- meeting monopoly party
- Width, height, margins, and padding can all be set individually
- The default width is 100% of the container
- Can accommodate inline elements and other block-level elements
- Inline block elements: input img td etc.
You can set the width, height, etc.
- Features of inline-block elements:
- On the same line as adjacent inline elements, but with a blank space in between
- The default width is the width of the content itself
- Height, row height , padding and margins can all be set
- Mutual conversion between inline elements and block-level elements:
- Block-level elements = "inline elements: display: inline;
- Inline element = "block-level element: display: block;
- Block level/inline element = "inline block: display: inline-block
2. Understanding of the box model?
There are two types of box models in css3:
Standard box model, IE box model
Same point:
There are four parts, namely margin, border, padding, content
Differences:
standard box model, width and height only contain content
IE box model, width and height contain border, padding, content
The box model can be changed by setting the box-sizing property:
box-sizing: content-box means the standard box model
box-sizing: border-box means the IE box model
3. When importing styles on a page, what is the difference between using link and @import?
Same point:
-
They are all used to reference CSS styles
difference:
-
link is concurrent loading, @import is serial loading, it will be blocked, you need to wait for the website to load before starting to load
-
@import is proposed by a higher version of css, and it is not very compatible with old browsers
-
import can only load css, link can load css, others can also