Shulou(Shulou.com)05/31 Report--

This article mainly introduces "HTML and CSS use case analysis". In daily operation, I believe that many people have doubts about HTML and CSS use case analysis. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "HTML and CSS use case analysis". Next, please follow the editor to study!

1. How to center a p with an indefinite 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: display:relative

P 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

P setting: 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

3.1 floating related knowledge

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

3.2 problem of high collapse of parent element

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.

3.3 ways to clear floats

Method 1: define the height for the parent p

Principle: defining a fixed height (height) for the parent p can solve the problem that the parent p 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 {clear:both})

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

Advantages: good browser support

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

Method 3: let the parent p 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 p defines display:table

Principle: force the p attribute into 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 p defines pseudo classes: after and zoom

.clearfix: after {

Content:'.'

Display:block

Height:0

Clear:both

Visibility: hidden

}

.clearfix {zoom:1;}

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

.clearfix: after {

Content: "\ 200B"

Display:block

Height:0

Clear:both

}

.clearfix {* zoom:1;} just take care of IE6,IE7

For more information about floating, please refer to this article:

Http://luopq.com/2015/11/08/C...

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.

Difference

Streaming layout responsive development

Development mode: mobile Web development + PC development responsive development

Application scenarios are generally based on existing PC websites. When developing mobile sites, you only need to develop mobile sites separately for some newly built websites. Now you need to adapt to mobile sites, so one set of pages is compatible with all kinds of terminals.

Strong positive development, high development efficiency, compatible with all kinds of terminals, low efficiency

Adaptation only adapts to mobile devices, and relatively poor experience on pad can adapt to a variety of terminals.

The efficiency code is simple, the loading fast code is relatively complex, and the loading is slow.

9. Gradual enhancement and elegant degradation

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

The elegant downgrade point of view is that websites should be designed for the most advanced and perfect browsers.

The view of progressive enhancement is that we should focus on the content itself and give priority to the lower version.

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.

Unable to trigger its click event

It is suitable for scenarios where hidden elements 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.

At this point, the study on "HTML and CSS usage case analysis" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.