10 HTML and CSS must know the key points of the problem

Front-end Journal

• Login

10 HTML and CSS must know the focus of the difficult issues 2018-02-26 read 2982 Favorites 6 original chain: Segmentfault.com share to:

Front-end Essential book, "in layman node. js" >> >>

1. How do I make an indefinite wide DIV, centered vertically?

Using Flex

• Only need to set in parent box: Display:flex; Justify-content:center;align-items:center;

Using CSS3 Transform

• Parent Box settings:display:relative
• Div settings:transform: translate(-50%，-50%);position: absolute;top: 50%;left: 50%;

Using 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 ;

Function of several properties of 2.position

Common four attribute values for position: relative,absolute,fixed,static. It is generally used with the "left", "Top", "right" and "bottom" properties.

• **static: Default location. * * In general, we do not need to declare it in particular, but sometimes we encounter inheritance, we do not want to comment to the element inherited by the property affect itself, so you can use Position:static to cancel the inheritance, that is, to restore the default value of the element positioning. An element that is set to static, which is always in the position given by the page stream (the static element ignores any top, bottom, left, or right declarations). Generally not used.
• **relative: relative positioning. * * Relative positioning is a position relative to the default position of the element, and the value of its offset top,right,bottom,left is offset by its original position, regardless of other elements. Note that the relative moved element still occupies space in its original position.
• **absolute: Absolute positioning. * * Element set to Absolute, if its parent container has the Position property set, and position's property value is absolute or relative, then the parent container will be offset. If the parent container does not have the Position property set, the offset is based on body. Note the element that sets the absolute property does not occupy a position in the standard stream.
• **fixed: fixed positioning. * * position is set to the fixed element and can be positioned relative to the specified coordinates of the browser window. The elements remain in that position, regardless of whether the window is scrolled or not. It is always based on the body. Note the element that sets the fixed property does not occupy a position in the standard stream.

3. Floating and clear floating 3.1 floating related knowledge

Value of the Float property:

• Left: the element floats to the left.
• Right: the element floats to the left.
• None: Default value. The element does not float and appears in its position in the text.

Characteristics of float:

• The floating element is detached from the normal document stream, but the floating element affects not only itself, it affects the surrounding element alignment.
• Whether an element is an inline element or a block-level element, if a float is set, the floating element generates a block-level box that can set its width and height, so float is often used to create a menu with horizontal columns that can be sized and arranged horizontally.

The display of floating elements will have different rules in different situations:

• When floating elements float, their margin does not exceed the padding of the containing block. PS: You can set the margin property if you want the element to be exceeded
• If two elements one floats to the left and one floats 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 are sorted sequentially without overlapping.
• If there are multiple floating elements, the subsequent element height does not exceed the preceding element and does not exceed the containing block.
• Floating elements are not higher than non-floating elements if there are non-floating elements and floating elements that are present at the same time, and non-floating elements are in front.
• Floating elements are aligned as far as possible to the top, left or right

Overlap Issues

• Inline elements overlap with floating elements, their borders, backgrounds, and content appear above the floating elements
• When a block-level element overlaps with a floating element, the border and background appear below the floating element, and the content is displayed above the floating element

Clear property Clear property: Ensures that there are no floating elements on the left or right side of the current element. Clear only works on the layout of the element itself. Value: Left, right, both

3.2 Parent Element Height collapse problem

Why to clear floating, parent element height collapse resolves parent element height collapse problem: A block-level element if no height is set, its height is stretched by a child element. When a pair element is floating, the child element is detached from the standard document flow, meaning that no content in the parent element can open its height so that the height of the parent element is ignored, which is called a height collapse.

3.3 How to clear floating

Method 1: Define the height principle for the parent div: Define a fixed height (height) for the parent Div to solve the problem that the parent div cannot get the height. Pros: Code Concise Disadvantage: The height is fixed dead, is suitable for the content fixed unchanged module. (Not recommended)

Method Two: The use of empty elements, such as the <div class="clear"></div> (.clear{clear:both}) principle: Add a pair of empty div tags, using the CSS Clear:both property to clear the float, so that the parent div can get the height. Pros: Browser Support Good disadvantage: more than a lot of empty div tags, if the number of floating modules on the page, there will be a lot of vacant div, so the feeling is not too satisfactory. (Not recommended)

Method Three: Let the parent Div also float together to do this can initially solve the current floating problem. But it also lets the parent float, and it creates a new floating problem. Not recommended for use

Method Four: The parent div definition display:table principle: Force the DIV attribute into a table advantage: No drawbacks: New unknown issues arise. (Not recommended)

Method Five: Parent element set Overflow:hidden, auto; principle: The key of this method is to trigger the BFC. There is also a need to trigger haslayout (zoom:1) benefits in IE6: code introduction, no structural and semantic problems disadvantage: Unable to display elements that need to overflow (also not recommended)

Method Six: Parent div definition Pseudo-class: After and zoom

 . Clearfix:after{ content : '. '  Display:block; height :0; Clear: both; Visibility:; }.{zoom:1   

Principle: IE8 above and non-IE browser support :after , the principle and method 2 a bit similar, zoom (ie turn to have attributes) can solve the ie6,ie7 floating problem advantages: The structure and semantics are completely correct, the code is moderate, repeatable utilization (recommended definition of public class) Cons: Code is not very concise (highly recommended)

How to be refined by the benefit

.Clearfix:After{Content\200b:block; Height : 0; Clear:both }.{ *zoom:1;}  take care of ie6ie7 It's OK.             

For more information on floating, see this article: [Http://luopq.com/2015/11/08/C ...] (Http://luopq.com/2015/11/08/C ...)

4.BFC Related knowledge

Definition: BFC (block formatting context) literal translation is "chunk-level formatting context". It is a separate rendering area that only block-level box participates in, which specifies how the internal block-level box is laid out and irrelevant to the outside of the area.

BFC Layout Rule BFC is a separate, isolated container on the page, and the child elements inside the container do not affect the outer elements. The reverse is true.

• BFC the vertical margin of this element will overlap, the distance from the vertical direction is determined by the margin maximum value
• The BFC area does not overlap with the floating box ( 清除浮动原理 ).
• When calculating the height of the BFC, floating elements are also involved in the calculation.

Which elements will generate BFC

• root element
• The Float property is not none
• Position for absolute or fixed
• Display for Inline-block, Table-cell, Table-caption, Flex, Inline-flex
• The overflow is not visible

What is 5.box-sizing?

Set the CSS box model to the standard model or IE model. The width of the standard model includes only content , the two IE models include border and the padding box-sizing attribute can be one of three values:

• Content-box, default value, only calculates the width of the content, border and padding do not count into width
• Padding-box,padding Calculation in width
• Border-box,border and padding are calculated into the width

The difference between 6.px,em,rem

px Pixels (Pixel). Absolute units. Pixel px is 相对于显示器屏幕分辨率 the case, is a virtual length unit, is the digital image length unit of the computer system, if PX to be converted to physical length, you need to specify the accuracy DPI. EM is a unit of relative length 相对于当前对象内文本的字体尺寸 . If the font size of the current inline text is not artificially set, the default font size is relative to 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) that uses REM to set the font size for the element, still relative size, but 相对的只是 HTML 根元素 .

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

There are four kinds: inline (the style attribute on the element), inline (style label), outer chain, import (@import) The difference between link and @import:

• linkis the XHTML tag, in addition to loading CSS, you can also define other transactions such as RSS @import , which belongs to CSS category 只能加载CSS .
• linkWhen referencing CSS, in 页面载入时同时加载 ; @import需要页面网页完全载入以后加载 .
• linkis the XHTML tag, which 无兼容问题 @import is presented in CSS2.1 低版本的浏览器不支持 .
• linkSupport for using JavaScript to control the DOM 改变样式 @import is not supported.

8. The difference between a streaming layout and a responsive layout

Flow layouts use non-fixed pixels to define the content of the Web page 也就是百分比布局 , and the width of the box is set as a percentage to scale according to the width of the screen, without the restriction of fixed pixels, and the content is padded to both sides.

The response uses media query in CSS3 to specify the page layout of a width range by querying the width of screen.

• Ultra small screen (mobile device) 768px or less
• Small screen Device 768px-992px
• Medium Screen 992px-1200px
• Widescreen Device 1200px or more

Since responsive development is cumbersome, it is common to use a third-party response framework, such as Bootstrap, to complete part of the work and, of course, to write the response yourself.

Difference

-	Flow Layout	Responsive Development
Development method	Mobile Web Development +PC Development	Responsive development
Application Scenarios	Generally in the PC-side web site, the development of mobile only need to develop the mobile side alone	For some new sites, it is now required to adapt the mobile side, so a set of pages compatible with a variety of terminals
Development	Positive and strong, high efficiency of development	Compatible with a variety of terminals, low efficiency
Fitting	Relatively poor experience on pad with mobile device only	Can be adapted to a variety of terminals
Efficiency	Simple code, fast loading	Relatively complex code, slow loading

9. Progressive enhancement and graceful demotion

The key difference is the content they focus on, and the differences in the work processes that result from this difference

• The elegant downgrade point of view is that Web sites should be designed for the most advanced and sophisticated browsers.
• The progressive enhancement point of view is that the focus should be on the content itself, giving priority to low versions.

Several ways and differences of 10.CSS hidden elements

Display:none

• The element disappears completely on the page, and the space that the element originally occupies is occupied by other elements, which means that it causes the browser to reflow and redraw.
• Does not trigger its Click event

Visibility:hidden

• And display:none the difference is that 元素在页面消失后，其占据的空间依旧会保留着 , so it 只会导致浏览器重绘 does not reflow.
• Cannot trigger its Click event
• For scenarios where elements are hidden and do not want the page layout to change

opacity:0

• When you set the transparency of an element to 0, the element is hidden in the eyes of our users, which is a way of hiding elements.
• And visibility:hidden one thing in common is that the element is hidden and still occupies space, but we all know that after setting the transparency to 0, the element is just invisible, it still exists in the page.
• Can trigger a click event

Set the Height,width box model property to 0

• Simply put, the elements,,, and other elements of the margin border padding height width element Box model properties set to 0 , if the element has child elements or content, it should also be set overflow:hidden to hide its child elements, which is a kind of artifice.
• If the element is set to an attribute other than 0, it is clear that the element is still visible on the page, and the click event of the triggering element is completely border,padding. If all properties are set to 0, it is clear that this element is the equivalent of disappearing, which means that the Click event cannot be triggered.
• This approach is neither practical nor likely to have some problems. But usually we use some of the page effect may be done in this way, such as jquery slideup animation, it is set elements of the Overflow:hidden, and then through the timer, constantly set the element height,margin-top, The Margin-bottom,border-top,border-bottom,padding-top,padding-bottom is 0, which achieves the slideup effect.

Other Brain hole methods

• Set elements position and left,top,bottom,right, etc. to move elements out of the screen
• Set the position and Z-index of the element and set the Z-index to a small negative number as little as possible

HTML5 CSS Collectionrelated articles

• CSS Grid System
• "CSS Basics" flex Flexible layout
• CSS Layout solution (end version)
• "CSS Basics" CSS Common concepts
• 5 min To learn about CSS variables

Advertising RSS/About

? 2017-2018 Front-end Journal

10 HTML and CSS must know the key points of the problem