Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "what are the important and difficult issues of HTML and CSS", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article, "what are the important and difficult problems of HTML and CSS?"

1. How to center a DIV with variable width and height vertically and horizontally?

Use Flex

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

Use CSS3 transform

Parent box settings: position:relative

Div setting: transform: translate (- 50% absolute;top 50%); position: 50% left: 50%

Use the display:table-cell method

Parent box settings: display:table-cell; text-align:center;vertical-align:middle

Div settings: display:inline-block;vertical-align:middle

The function of several attributes of 2.position

Four common attribute values for position: relative,absolute,fixed,static. It is generally used with the "left", "top", "right" and "bottom" attributes.

Static: default location. In general, we don't need to declare it specifically, but sometimes in the case of inheritance, we don't want to see the attribute inherited by the element affect itself, so we can use Position:static to cancel inheritance, that is, to restore the default value of element positioning. The element set to static, which is always in the position given by the page flow (the static element ignores any top, bottom, left, or right declarations). It's not usually used.

Relative: relative positioning. Relative positioning is relative to the default position of an element, and the value of its offset top,right,bottom,left is offset from its original position, regardless of what other elements will look like. Notice that the element moved by relative still occupies space in its original position.

Absolute: absolute positioning. An element set to absolute will be offset based on the parent container if its parent container has the position property set and the position attribute value is absolute or relative. If the parent container does not have the position property set, the offset is based on body. Note that the element that sets the absolute attribute does not occupy a place in the standard flow.

Fixed: fixed positioning. An element whose position is set to fixed, which can be positioned relative to the specified coordinates of the browser window. Regardless of whether the window is scrolled or not, the element remains in that position. It is always based on body. Note that the element that sets the fixed attribute does not occupy a place in the standard flow.

3. Float and clear float

The value of float attribute:

Left: element floats to the left.

Right: element floats to the right.

None: default value. The element does not float and appears where it appears in the text.

Floating properties:

Floating elements detach from the normal document stream, but they affect not only themselves, but also the alignment of surrounding elements.

Whether an element is an inline element or a block-level element, if a float is set, the floating element will generate a block-level box that can set its width and height, so float is often used to make horizontal alignment menus that can be resized and arranged horizontally.

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

When a floating element floats, its margin does not exceed the padding that contains the block. PS: if you want the element to exceed, you can set the margin attribute

If two elements float one to the left and the other to the right, the marginRight of the left floating element will not be adjacent to the marginLeft of the right floating element.

If there are multiple floating elements, the floating elements will be arranged in order without overlap.

If there is more than one floating element, the subsequent element will not exceed the height of the previous element and will not exceed the containing block.

If both non-floating elements and floating elements exist at the same time, and the non-floating element comes first, the floating element is not higher than the non-floating element.

Floating elements are aligned to the top, left, or right as much as possible

Overlap problem

The inline element overlaps with the floating element, and its border, background and content are displayed on top of the floating element

When a block-level element overlaps with a floating element, the border and background are displayed below the floating element, and the content is displayed above the floating element

Clear attribute

Clear attribute: make sure there are no floating elements on the left and right sides of the current element. Clear only works on the layout of the element itself.

Value: left, right, both

Why do you want to clear the float, the parent element is highly collapsed

Solve the problem of high collapse of parent elements: if a block-level element does not have height set, its height is stretched by child elements. When a float is used on a child element, the child element deviates from the standard document stream, that is, there is nothing in the parent element that can stretch its height, so the height of the parent element is ignored, which is called a high collapse.

Method 1: define the height for the parent div

Principle: defining a fixed height (height) for the parent DIV can solve the problem that the parent DIV cannot obtain the height.

Advantages: code simplicity

Disadvantages: the height is fixed, and it is suitable for the module with fixed content. (not recommended)

Method 2: use empty elements, such as

(.clear)

Principle: add a pair of empty DIV tags, use the clear:both attribute of css to clear the float, so that the parent DIV can get the height.

Advantages: good browser support

Disadvantages: there are a lot of empty DIV tags, if there are many floating modules in the page, there will be a lot of vacant DIV, which does not seem to be very satisfactory. (not recommended)

Method 3: let the parent div float as well

This can initially solve the current floating problem. But it also makes the parent float, which will give rise to new floating problems. Not recommended

Method 4: parent div defines display:table

Principle: force the div attribute to a table

Advantages: do not understand

Disadvantages: new unknown problems will arise. (not recommended)

Method 5: the parent element sets overflow:hidden and auto

Principle: the key to this method is that it triggers BFC. You also need to trigger hasLayout (zoom:1) in IE6

Advantages: brief introduction of the code, no structural and semantic problems

Cons: unable to display elements that need to be overflowed (also not recommended)

Method 6: parent div defines pseudo classes: after and zoom

Principle: only supported by IE8 and non-IE browsers: after, the principle and method 2 are somewhat similar, zoom (IE to attribute) can solve the ie6,ie7 floating problem.

Advantages: correct structure and semantics, moderate amount of code, and repeatable utilization (it is recommended to define common classes)

Disadvantages: the code is not very concise (highly recommended)

Jingyi Qiu meticulous writing method

4.BFC related knowledge

Definition: BFC (Block formatting context) is literally translated as "block-level formatting context". It is a separate rendering area, with only the Block-level box reference, which specifies how the internal Block-level Box is laid out and has nothing to do with the outside of the area.

BFC layout rules

BFC is an isolated container on the page, and the child elements inside the container do not affect the outer elements. And vice versa.

The vertical margins of the element BFC will overlap, and the vertical distance is determined by margin, taking the maximum value.

The area of the BFC does not overlap with the floating box (clear the floating principle).

Floating elements also participate in the calculation when calculating the height of the BFC.

Which elements generate BFC

Root element

The float property is not none

Position is absolute or fixed

Display is inline-block, table-cell, table-caption, flex, inline-flex

Overflow is not visible

What is 5.box-sizing?

Set the CSS box model to the standard model or the IE model. The width of the standard model includes only content, while the two IE model includes border and padding.

The box-sizing property can be one of three values:

Content-box, the default value, only calculates the width of the content. Border and padding are not counted in width.

Padding-box,padding is calculated into the width

Border-box,border and padding are calculated into the width

6. The difference between pxrem and emrem

Px pixels (Pixel). Absolute unit. Pixel px is relative to the screen resolution of the display. It is a virtual unit of length and is the digital image length unit of the computer system. If px is to be converted into physical length, it is necessary to specify precision DPI.

Em is a unit of relative length relative to the font size of the text within the current object. If the current font size for inline text is not artificially set, it is relative to the default font size of the browser. It inherits the font size of the parent element, so it is not a fixed value.

Rem is a new relative unit of CSS3 (root em, root em). When you use rem to set the font size for an element, it is still the relative size, but the opposite is only the HTML root element.

What are the ways in which 7.CSS is introduced? What's the difference between link and @ import?

There are four types: inline (style attribute on element), embedded (style tag), outer chain (link), import (@ import)

The difference between link and @ import:

Link is a XHTML tag that can define other transactions such as RSS in addition to loading CSS; @ import belongs to the category of CSS and can only load CSS.

When link references CSS, it loads at the same time as the page loads; @ import requires the page page to be loaded after it is fully loaded.

Link is a XHTML tag and has no compatibility issues; @ import is proposed in CSS2.1 and is not supported by older browsers.

Link supports using Javascript to control DOM to change styles; @ import does not.

8. The difference between streaming layout and responsive layout

Streaming layout

Use non-fixed pixels to define web page content, that is, percentage layout, according to the width of the screen by setting the width of the box to a percentage.

The row is scalable, free from the restriction of fixed pixels, and the content is filled to both sides.

Responsive development

Using Media Query (Media query) in CSS3, the web page layout of a width interval is specified by querying the width of screen.

Ultra-small screen (mobile device) below 768px

Small screen device 768px-992px

Medium screen 992px-1200px

Widescreen device 1200px or above

Because responsive development is more tedious, third-party responsive frameworks are generally used, such as bootstrap to complete part of the work, of course, you can also write your own responsive framework.

The difference

Streaming layout

Responsive development

Development mode

Mobile Web development + PC development

Responsive development

Application scenario

Generally speaking, when you already have a PC website, you only need to develop the mobile terminal separately when you develop the mobile.

For some newly built websites, it is now required to adapt to the mobile terminal, so one set of pages is compatible with all kinds of terminals.

Exploiting

Strong positivity and high development efficiency

Compatible with all kinds of terminals, low efficiency

Adaptation

Only adapts to mobile devices, and the experience on pad is relatively poor

Can be adapted to all kinds of terminals

Efficiency.

The code is simple and fast to load.

The code is relatively complex and slow to load.

9. Gradual enhancement and elegant degradation

The key difference is what they focus on, and the difference in workflow caused by this difference.

Elegant downgrade starts with building full functionality, and then it is compatible with lower-version browsers.

Progressive enhancement builds pages for low-version browsers to ensure the most basic functions, and then improves and adds functions for advanced browsers to achieve a better user experience.

Difference:

Elegant downgrade starts with a complex status quo and attempts to reduce the supply of user experience

Progressive enhancement starts with a very basic and functional version and continues to expand to meet the needs of the future environment.

Downgrading (functional decay) means looking back, while progressive enhancement means looking forward while ensuring that its roots are in a safe zone.

Several ways and differences of hiding elements in 10.CSS

Display:none

The element will disappear completely on the page, and the space occupied by the element will be occupied by other elements, that is, it will cause the browser to rearrange and redraw.

It will not trigger its click event.

Visibility:hidden

Unlike display:none, the element retains the space it occupies after the page disappears, so it only causes the browser to redraw rather than rearrange it. Cannot trigger its click event, which is suitable for scenarios where the elements are hidden and do not want the page layout to change.

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 way to hide the element. What we have in common with visibility:hidden is that the element still occupies space after it is hidden, but we all know that when the transparency is set to 0, the element is just invisible and it is still on the page. Can trigger a click event

Set the box model property such as height,width to 0

To put it simply, set the attributes of the element's margin,border,padding,height and width that affect the element box model to 0, and if there are child elements or content in the element, you should also set its overflow:hidden to hide its child elements.

If the border,padding and other attributes of the element are not set to 0, it is obvious that the element can still be seen on the page, and there is no problem triggering the click event of the element. If all properties are set to 0, it is obvious that this element is equivalent to disappearing, that is, the click event cannot be triggered.

This approach is not practical, and there may be some problems. But usually we use some page effects may be completed in this way, such as jquery slideUp animation, it is to set the overflow:hidden of the element, and then through the timer, constantly set the height,margin-top,margin-bottom,border-top,border-bottom,padding-top,padding-bottom of the element to 0, so as to achieve the effect of slideUp.

Other mental methods

Set the element's position, left,top,bottom,right, etc., and move the element off the screen

Set the position and z-index of the element, and set the z-index to a negative number as small as possible

A href is a link that points to the location of a network resource and establishes a link to the current element (anchor) or current document (link) for hyperlinks.

Src is the location that points to external resources, and the content pointed to will be embedded in the current tag location in the document; when a src resource is requested, the resource it points to will be downloaded and applied to the document, such as js scripts, img images, frame and other elements. When the browser parses to the element, it pauses the download and processing of other resources until the resource is loaded, compiled, and executed, as do elements such as pictures and frames, similar to embedding the pointed resource in the current tag. This is why the js script is placed at the bottom instead of the header.

Inline elements: a, b, span, img, input, strong, select, label, em, button, textarea

Block-level elements: div, ul, li, dl, dt, dd, p, h2-h7, blockquote

Empty elements: that is, HTML elements without content, such as br, meta, hr, link, input, img

The above is the content of this article on "what are the important and difficult issues of HTML and CSS". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.