[Front-end] Necessary knowledge points for job hunting 2-CSS: priority, box model, standard flow, floating flow, positioning flow

CSS priority

• class class selector, attribute selector, the weight of the pseudo class is 10
• Element selector, pseudo-element selector weight is 1

Attribute selector: For example, turn the element with title into red.

[title]
{
    
    
color:red;
}

html：

<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

<hr />

<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>

Pseudo class:

:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素

Try the following effects here:

Pseudo element:

::first-letter ：用于选取指定选择器的首字母
::first-line ：选取指定选择器的首行
::before : 选择器在被选元素的内容前面插入内容
::after : 选择器在被选元素的内容后面插入内容

Pseudo-classes and pseudo-elements

• (:) for pseudo-classes, (::) for pseudo-elements
• Pseudo-element: Modify the style of the specified part of the selected element, the common ones are: before, :after, :first-line, first-letter, etc.
• Pseudo-class: modify the special state of the selected element , the common ones are :hover, :active, :checked, :focus, :first-child, etc.

Pseudo-classes: CSS pseudo-classes (w3school.com.cn)

Pseudo-Elements: CSS Pseudo-Elements | Rookie Tutorial (runoob.com)

Commonly used selectors:

CSS Selector Reference Manual (w3school.com.cn)

box model

Box Model (Box Model) can be used to layout elements, including inner margin Padding , border Border , outer margin Margin , and the actual content of these parts.

The box model is divided into:

• standard box model
• weird box model

The weird mode is "some browsers retain the original parsing mode while supporting the W3C standard", and the weird mode is mainly manifested in browsers with the IE kernel.

standard box model
width/height=width/height of content;

The size of the box under the standard box model = content + border + padding + margin

weird box model

width/height=（content + border + padding）

The size of the box under the weird box model = width (content + border + padding) + margin

How to choose a box model

If it is a standard document type that defines a complete doctype, no matter what the model is, it will eventually trigger the standard mode.
If the doctype protocol is missing, it will be defined by the browser itself. In IE browsers below IE9 (IE6.IE7.IE8 ) version triggers quirks mode, which defaults to W3c standards mode in other browsers.

box-sizing

Set the parsing mode of the box model through the property box-sizing.

box-sizing : defines how the engine calculates the total height and total width of the element

• content-box: the default value, the width/height of the element does not contain padding, border, consistent with the standard box model
• border-box: The width/height of the element contains padding and border , which is consistent with the weird box model
• padding-box: count padding into the width range
• inherit: Specifies the value of the box-sizing attribute, which should be inherited from the parent element

CSS Box Model | Cainiao Tutorial (runoob.com)
CSS Box Model and Weird Box Model- Cloud% - Blog Garden (cnblogs.com)

Standard stream, floating stream, positioned stream

standard stream

From top to bottom, left to right:

From the layout characteristics of elements, it can be divided into three types of elements: block-level elements, inline elements, and inline block elements.

block level element

• Exclusively in one line (width is 100% by default, height is 0)
• Width, height, inner and outer margins can be set
• Common block-level elements:div h1-h6 ul ol li dl dt dd form p

inline element

• Width and height are expanded by content , and multiple items can be placed in one line
• The width and height cannot be set , just like a rubber band wrapping a word
• Common inline elements:span b strong i em ins del u

inline-block element

• Width and height are expanded by content , and multiple items can be placed in one row
• Width, height, inner and outer margins can be set
• Common inline block elements:Img input a

Note: When inline elements and inline blocks are arranged horizontally, there will be a blank space of about 6px between the elements, which is caused by blank characters (newlines, spaces, or tabs) between elements.

floating flow

• Typesetting method of semi-standard flow
• Mainly used for horizontal layout of web pages
• After the element is set to float, setting the width and height will take effect . By default, it will be in the upper left row of the current containing block
• If there is a block-level element in front, it will be placed below the element
• Float is divided into left float: flaot:leftand right float:float:right

About why the floating stream is "half" out of the standard stream: because the position of the floating box will be affected by the previous standard stream.
You can see it here: Semi-off-marking of floating streams - XBQ0510Qi's Blog - CSDN Blog

4 features：

• Float : The element box added with float is floating , floating on top of other standard boxes
• Leakage : The original position of the floating box is leaked to the standard flow box
• Inline block feature : Floating can make the element display mode reflect the inline block feature (if the block-level element has no width and height set, after floating, the size is determined by the content; there is no gap in the middle of the floating box)
• Floating elements are often used in conjunction with standard flow parents : first arrange the upper and lower positions with the standard flow parent element , and then use the floating arrangement of the internal child elements to arrange the left and right positions

clear float

• Clear the impact of floating elements : the internal height of the parent element is 0 caused by the floating of the child element (the height of the parent box is 0 and it collapses)
• If the parent element has a height, there is no need to clear the float
• After clearing the float, the parent element will automatically detect the height according to the floated child box . With the height of the parent, it will not affect the standard flow below.

grammar:

选择器{
    
    clear:属性值;}

Attribute value:

• left: Clear the effect of floating on the left
• right: right side
• both: both sides

The strategy of clearing floating: closed floating , only affects inside the parent box, and does not affect other boxes outside.

4 Ways to Clear Float

• clearFix

Add a clearFixclass name to the parent of all floated elements. When an element needs to clear the float, clearFixjust set the class name directly

.clearFix::after{
    
    
    content:"";  /*必须拥有content属性   内容为空*/
    display: block; /*必须块标签才能清浮动 */
    clear: both; /*清除浮动*/
    height: 0;/*高度为0 不占用空间*/
}
/*兼容ie*/
.clearFix{
    
      
    *zoom:1; 
}

• double pseudo element

.clearfix::before,
.clearfix::after {
    
    
	content: "";
	display: table;
}
.clearfix:after {
    
    
	clear: both;
}
/* ie6 7 专门清除浮动的样式*/
.clearfix {
    
    
	*zoom:1;
}

• parent settingsoverflow：hidden

After the child element floats, because the parent element has no height, the elements below will go up, causing the page to collapse. Therefore, you need to add an overflow:hidden attribute to the parent , so that the height of the parent will adapt to the height of the child container and child content

About the role of overflow:hidden (overflow hiding, clearing floating, solving margin collapse, etc.)_overflow: hidden;

• Add an empty tag at the end of the floating element (recommended by W3C), must be a block element

There are two cases where floats do not need to be cleared:

• The parent box itself has height
• The parent box itself has floatattributes (triggers the parent element BFC)

An example of clear clearing floating: The principle of clear "clearing floating" in CSS_The principle of using the clear attribute to clear floating?

The principle of clearing floating:

The elements with the clear attribute set will be arranged on both sides according to the style of no floating elements, so they will not be affected by the floating elements, so as to realize the clear floating

Different effects of floating on inline elements and block-level elements

Stream saving:

• Inline elements are added with floating: out of the document flow, the label without width and height has width and height
• Block-level elements are added with floating: out of the document flow, the effect is display: inline-blocksimilar to that of a row, and the width and height are the width and height of the content

Detailed example: Inline elements and block-level elements change after adding floating

positioning flow

Out of standard flow (referred to as "off standard")

• Relative positioning (not off-label)
• Absolute positioning (off-label)
• Fixed positioning (off label)

relative positioning

• position:relative
• Move relative to original position
• Will not leave the standard stream (will continue to occupy a space in the standard stream)

Since relative positioning does not depart from the standard document flow, and relatively positioned elements will occupy the position in the standard flow, when setting margin padding and other attributes for relatively positioned elements, it will affect the layout in the standard flow, that is, margin padding, etc. The attribute takes effect first , and then the position is relatively positioned after it takes effect again

An example of relative positioning without leaving the mark:
CSS position relative positioning and absolute positioning | rookie tutorial (runoob.com)

absolute positioning

• position:absolute
• Position relative to body by default
• (If a positioned element has an ancestor element, and the ancestor element is also a positioning flow, then this absolutely positioned element will use the ancestor element of the positioning flow as a reference point, where the positioning flow refers torelative/absolute/fixedpositioning, static positioning does not work)
• If there are multiple positioned elements in the ancestor element, then the nearest ancestor element will be used as the reference point
• If an absolutely positioned element uses the body as the reference point, then it actually takes the width and height of the first screen of the webpage as the reference point, not the width and height of the entire webpage as the reference point
• off label
• There is no distinction between block-level elements/inline elements/inline-block-level elements, and the width and height can be set for elements that are set to absolute positioning
• Absolutely positioned elements ignore the padding of ancestor elements

Examples of absolute positioning: CSS position relative positioning and absolute positioning | rookie tutorial (runoob.com)

Absolutely positioned elements ignore the padding of ancestor elementsAn example of:

<div class="box3">
	<div class="box4"></div>
</div>

.box3 {
    
    
	width: 200px;
	height: 200px;
	background-color: green;
	padding: 10px;
}

.box4 {
    
    
	width: 50px;
	height: 50px;
	background-color: yellow;
	position: absolute;
}

Effect:

After F12, the mouse clicks on the content of the box3 box, obviously the outer circle is padding, and box4 uses the content of box3 as a reference for absolute positioning.

fixed positioning

• position:fixed
• The set element will not change position as the scroll bar scrolls (the reference point is the browser window)
• off label
• Regardless of block-level elements/inline elements/inline-block-level elements, width and height can be set (same as absolute positioning)

mind Mapping

[CSS] Elaborate on the standard flow, floating flow and positioning flow in web page layout - Nuggets (juejin.cn)
Standard document flow and off-label (departing from standard document flow) in CSS (6) - Short Book (jianshu.com )
Standard flow and characteristics of off-label elements - Nuggets (juejin.cn)
[CSS] 7 Page Layout: Floating - Zhihu (zhihu.com)
The working principle of clear "clearing floating" in CSS_Use the clear attribute to clear floating Principle?_Piracy_A good doctor and a good cutting blog-CSDN blog
About the role of overflow:hidden (overflow hiding, clearing floating, solving margin collapse, etc.)_overflow: hidden;_Xingxingzhihuo M's blog-CSDN blog floating
flow Semi-off-marking_XBQ0510Qi's blog-CSDN blogInline
elements and block-level elements change after adding floating_Inline elements add floating_Guta front-end blog-CSDN blog
positioning flow and floating positioning-ilovetesting-博客园(cnblogs.com )
CSS position relative positioning and absolute positioning | rookie tutorial (runoob.com)