12 Essential and Difficult Questions You Must Know About HTML and CSS

These 12 questions are basically the key and difficult points in the basics of HTML and CSS, and they are also basic questions that must be clarified. What are the relative positioning of absolute positioning and relative positioning? This is still easy to be overlooked, and the floating is also a big pit with many details.
These 12 knowledge points are what I personally think, let's take a look at these 12 knowledge points.
1. How to make a DIV with variable width and height centered vertically and horizontally? To
use Flex , you

only need to set it in the parent box: display: flex; justify-content: center; align-items: center;

use CSS3 transform

to set the parent box: position: relative
Div settings: transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%;

use display:table-cell method

Parent box settings: display:table-cell; text-align :center;vertical-align:middle;
Div setting: display:inline-block;vertical-align:middle;

2. The role of several properties There are
four common property values ​​of position: relative, absolute, fixed, static. Generally used with the "left", "top", "right" and "bottom" properties.

static: default location. In general, we don't need to declare it specially, but sometimes we encounter inheritance, and we don't want to see the influence of the attributes inherited by the element itself, so we can cancel the inheritance with Position:static, that is, restore the positioning of the element. Defaults. An element set to static will always be in the position given by the page flow (static elements ignore any top, bottom, left or right declarations). Generally not used.
relative: Relative positioning. Relative positioning is the positioning relative to the default position of the element. The top, right, bottom, and left values ​​of its offset are all offset from its original position, regardless of what happens to other elements. Note that the relative moved element still occupies space in its original position.
absolute: Absolute positioning. For an element set to absolute, if its parent container has a position attribute set, and the value of the position attribute is absolute or relative, it will be offset according to the parent container. If its parent container does not have a position property set, the offset is based on the body. Note that elements that set the absolute attribute have no place in the standard flow.
fixed: fixed positioning. An element whose position is set to fixed can be positioned at specified coordinates relative to the browser window. The element stays in that position whether the window is scrolled or not. It is always body based. Note that elements with the fixed attribute set have no place in the standard stream.

3. Floating and Clearing Floating
3.1 Floating-related knowledge
The value of the float attribute:

left: The element floats to the left.
right: The element floats to the right.
none: Default value. Elements do not float and appear where they appear in the text.

Floating properties:

A floated element breaks out of the normal document flow, but a floated element doesn't just affect itself, it affects the alignment and wrapping of surrounding elements.
Regardless of whether an element is an inline element or a block-level element, if it is set to float, the floating element will generate a block-level box, and its width and height can be set, so float is often used to make horizontally arranged menus, which can be sized and Horizontal arrangement.

The display of floating elements has different rules in different situations:

when a floating element is floating, its margin will not exceed the padding of the containing block. PS: If you want the element to exceed, you can set the margin property.
If two elements float to the left and one floats to the right, the marginRight of the left-floated element will not be adjacent to the marginLeft of the right-floated element.
If there are multiple floating elements, the floating elements will be arranged in order without overlapping.
If there are multiple floated elements, later elements will not exceed the height of the preceding element and will not exceed the containing block.
If there are both non-floated and floated elements, and the non-floated element is in front, the floated element will not be higher than the non-floated element
Floated elements are aligned to the top, left or right as much as possible

Overlap issues

Inline elements and floats When elements overlap, their borders, backgrounds, and content will be displayed on top of the floating element. When
a block -level element overlaps with a floating element, the border and background will be displayed below the floating element, and the content will be displayed on top of the floating element.

clear property
clear property : Make sure there are no floating elements to the left or right of the current element. clear only works on the layout of the element itself.
Values: left, right, both
3.2 The problem of
height of parent element
Solve the problem of height collapse of the parent element: If a block-level element does not have a height set, its height is stretched by the child element. After using float on a child element, the child element will break out of the standard document flow, that is, there is no content in the parent element to stretch its height, so the height of the parent element will be ignored, which is called height collapse.
3.3 The method of clearing the float
Method 1: Define the height for the parent div
Principle: Define a fixed height (height) for the parent DIV, which can solve the problem that the parent DIV cannot obtain the height.
Advantages: concise code
Disadvantages : the height is fixed, it is suitable for modules with fixed content. (Not recommended)
Method 2: Use empty elements, such as <div class="clear"></div> (.clear{clear:both})
Principle: Add a pair of empty DIV tags and use css clear:both The property clears the float, allowing the parent DIV to get the height.
Advantages: good browser support
Disadvantages : There are a lot of empty DIV tags. If there are many floating modules on the page, there will be a lot of empty DIVs, which is not very satisfactory. (Not recommended)
Method 3: Let the parent div also float together
This can initially solve the current floating problem. But it also floats the parent, which will create new floating problems. Deprecated
Method 4: The parent div defines display:table
Principle: Force the div attribute into a table
Advantage : I don't understand
Disadvantage: It will cause new unknown problems. (Not recommended)
Method 5: The parent element sets overflow: hidden, auto;
Principle: The key to this method is to trigger the BFC. In IE6, hasLayout also needs to be triggered (zoom: 1)
Advantages: Code introduction, no structural and semantic problems
Disadvantages : Unable to display elements that need to overflow (not recommended)
Method 6: Parent div defines pseudo-class: after and zoom
.clearfix:after{
content:'.';
display:block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}
Principle: Only supported by IE8 and above and non-IE browsers: After, the principle is similar to method 2, zoom (IE transferred with attributes) can solve the floating problem of ie6, ie7
Advantages : The structure and semantics are completely correct, the amount of code is also moderate, and the reuse rate (it is recommended to define public classes)
Disadvantages: code Not terribly concise (highly recommended) Strive for better
notation
.clearfix:after {
content:”\200B”;
display:block;
height:0;
clear:both;
}
.clearfix { *zoom:1; } take care of IE6, IE7 is fine. For

details about floating, please refer to this article:
http://luopq.com/2015/11/08/CSS-float/

4.BFC related knowledge
Definition : BFC (Block formatting context) is literally translated as "block formatting context". It is an independent rendering area, only the Block-level box participates, it specifies how the internal Block-level Box is laid out, and has nothing to do with the outside of this area.
BFC layout rules
BFC is an isolated and independent container on the page, and the child elements inside the container will not affect the outside elements. And vice versa.

The vertical margin of the BFC element will overlap. The vertical distance is determined by the margin.
The area with the maximum value of BFC will not overlap with the floating box (clearing the floating principle).
When calculating the height of the BFC, floating elements also participate in the calculation.

Which elements will generate BFC

root element
float attribute is not none
position is absolute or fixed
display is inline-block, table-cell, table-caption, flex, inline-flex
overflow is not visible

5. What is box-sizing?
Set CSS box The model is the standard model or the IE model. The width of the standard model only includes content, and the second IE model includes border and padding. The
box-sizing property can be one of three values:

content-box, the default value, only the width of the content is calculated, border and padding are not calculated into the width
padding-box, padding is calculated into the width
border-box, border and padding are calculated into the width

6.px, em, rem The difference between
px and Pixel. absolute unit. Pixel px is relative to the screen resolution of the display, it is a virtual unit of length, and it is the digital image length unit of the computer system. If px is to be converted into physical length, the precision DPI needs to be specified.
em is a relative length unit, relative to the font size of the text within the current object. If the current font size of inline text is not manually set, it is relative to the browser's default font size. It inherits the font size of the parent element, so it is not a fixed value.
rem is a relative unit (root em, root em) newly added in CSS3. When using rem to set the font size for an element, it is still a relative size, but only relative to the HTML root element.
7. What are the ways to import CSS? What is the difference between link and @import?
There are four types: inline (style attribute on element), inline (style tag), external link (link), import (@import)
link The difference from @import:

link is an XHTML tag, in addition to loading CSS, it can also define other affairs such as RSS; @import belongs to the CSS category and can only load CSS.
When link refers to CSS, it is loaded at the same time when the page is loaded; @import requires the page to be loaded after the page is fully loaded.
link is an XHTML tag, and there is no compatibility problem; @import is proposed in CSS2.1, which is not supported by lower version browsers.
link supports using Javascript to control the DOM to change styles; @import does not.

8. The difference between the flow layout and the responsive layout The
flow layout
uses non-fixed pixels to define the content of the web page, that is, the percentage layout. The width of the box is set as a percentage
to , and it is not subject to fixed pixels. Limit, the content fills to both sides.
Responsive development
Use the Media Query in CSS3 to specify the web page layout of a certain width range by querying the width of the screen.

Ultra-small screen (mobile device) below 768px
Small -screen device 768px-992px
Medium screen 992px-1200px
Widescreen device 1200px or more

Because responsive development is cumbersome, generally use a third-party responsive framework, such as bootstrap to complete some of the work, of course You can also write your own responsive ones.
Difference

-
Streaming Layout
Responsive Development

Development Mode
Mobile Web Development + PC Development
Responsive Development

Application Scenario
Generally, when you already have a PC-side website, you only need to develop the mobile terminal separately when developing mobile.
For some new websites, adaptation is now required Mobile terminal, so only one set of

pages
is compatible with various terminals Development Strong alignment, high development efficiency
Compatible with various terminals, low efficiency

Adaptation
Only suitable for mobile devices, the experience on the pad is relatively poor
Can adapt to various terminals

Efficiency Simple
code , fast loading
Code relatively complex, slow loading

9. Progressive enhancement and graceful degradation The
key difference is what they focus on, and how Differences in Workflow Caused by Different

Graceful Downgrades Build full functionality from the beginning, and then make them compatible with older browsers. .
Progressive enhancement builds pages for low-version browsers to ensure the most basic functions, and then improves effects, interactions, and additional functions for advanced browsers to achieve a better user experience.

Differences:

Graceful degradation starts with a complex status quo and tries to reduce the user experience provision
Progressive enhancement starts with a very basic, functional version and continues to expand to meet the needs of future environments
Downgrade (feature decay) means looking back; progressive

enhancement means looking forward while keeping its foundation in a
safe

zone It will be occupied by other elements, which means that it will cause the browser to reflow and repaint. The difference between visibility:hidden and display:none that
does not trigger its click event is that the space occupied by the element will remain after the page disappears, so it will only cause the browser to redraw and not reflow. Its click event cannot be triggered. It is suitable for scenarios where the page layout is not expected to change after the element is hidden. opacity:0









After setting the transparency of the element to 0, the element is also hidden in the eyes of our users, which is a method of hiding the element.
One thing in common with visibility:hidden is that the element still occupies space after being hidden, but we all know that after setting the transparency to 0, the element is just invisible, and it still exists on the page.
Click events can be triggered.

Setting the box model properties such as height and width to 0

is simply to set the properties of the element's margin, border, padding, height and width that affect the element's box model to 0. If there are child elements or content in the element, also It should set its overflow:hidden to hide its child elements, which is a kind of trick.
If an element is set with attributes such as border and padding that are not 0, obviously, the element can still be seen on the page, and there is no problem in triggering the click event of the element. If all properties are set to 0, obviously, the element is equivalent to disappearing, that is, the click event cannot be triggered.
This method is neither practical, nor may there be some problems. But some page effects we usually use may be done in this way, such as jquery's slideUp animation, which is to set the element's overflow: hidden, and then continuously set the element's height and margin-top through the timer. , margin-bottom, border-top, border-bottom, padding-top, padding-bottom are 0, so as to achieve the effect of slideUp.

Other brain hole methods

Set the element's position and left, top, bottom, right, etc., and move the element out of the screen.
Set the element's position and z-index, and set the z-index to a negative number as small as possible.

11. Briefly describe src and href difference
href points to the location of the network resource, establishes a link to the current element (anchor) or the current document (link), and is used for hyperlinks.
src is the location that points to external resources, and the pointed content will be embedded in the location of the current tag in the document; when the src resource is requested, the resource pointed to by it will be downloaded and applied to the document, such as js script, img image and frame and other elements . When the browser parses the element, it will suspend the downloading and processing of other resources until the resource is loaded, compiled, and executed. The same is true for elements such as pictures and frames, which is similar to embedding the pointed resource in the current tag. This is also why put the js script at the bottom instead of the head.
12. What are the inline elements? What are block-level elements? What are the empty (void) elements?
When this question is occasionally asked in the interview, it is a bit confusing~~~ I usually don't care. . . .
Inline elements: a, b, span, img, input, strong, select, label, em, button, textarea
Block-level elements: div, ul, li, dl, dt, dd, p, h1-h6, blockquote
Empty elements: That is, HTML elements without content, such as: br, meta, hr, link, input, img
(end)
HTML and CSS basics, these are difficult to say, simple or simple, welcome to add or suggest different in the message area insights