You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- strike: if it represents deleted content, use del instead.
125
125
- In all other cases use s
126
126
127
+
## br: The Line Break element
128
+
129
+
- The HTML `<br>` element produces a line break in text (carriage-return).
130
+
- Do not use `<br>` to create margins between paragraphs;
131
+
- wrap them in `<p>` elements and use the CSS `margin` property to control their size.
132
+
- The `<br>` element has a single, well-defined purpose — to create a line break in a block of text.
133
+
- As such, it has no dimensions or visual output of its own
134
+
- You can set a margin on `<br>` elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the `line-height` property that was designed for that purpose.
135
+
127
136
## `<a>` : The Anchor element
128
137
129
138
- The HTML `<a>` element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
- sets how an element is positioned in a document.
116
+
- The top, right, bottom, and left properties determine the final location of positioned elements.
117
+
118
+
-**values**
119
+
- static
120
+
- 默认值
121
+
- The element is positioned according to the normal flow of the document.
122
+
- The top, right, bottom, left, and z-index properties have no effect.
123
+
- relative
124
+
- The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
125
+
- The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
126
+
- This value creates a new stacking context when the value of `z-index` is not `auto` . Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
127
+
- absolute
128
+
- The element is removed from the normal document flow, and no space is created for the element in the page layout.
129
+
- It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
130
+
- This value creates a new stacking context when the value of `z-index` is not `auto` . The margins of absolutely positioned boxes do not collapse with other margins.
131
+
- An element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist.
132
+
- The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).
133
+
- If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also the W3C definition), which is the containing block of the document's root element.
134
+
- If you want an element to remain in its static position (where it would normally be if it were not positioned) but simply take it out of normal flow, simply specifying position: absolute is perfectly acceptable. The behavior is as described in sections 10.3.7 and 10.6.4 of the spec, and every browser behaves correctly.
135
+
- the main purpose of relatively positioning some ancestor of an absolutely-positioned element is for designating its containing block.
136
+
- fixed
137
+
- The element is removed from the normal document flow, and no space is created for the element in the page layout.
138
+
- It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a `transform` , `perspective` , or `filter` property set to something other than `none` (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block.
139
+
- Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.
140
+
- Its final position is determined by the values of top, right, bottom, and left.
141
+
- This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.
142
+
- This can be used to create a "floating" element that stays in the same position regardless of scrolling.
143
+
- sticky
144
+
- The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left.
145
+
- The offset does not affect the position of any other elements.
146
+
- This value always creates a new stacking context.
147
+
- Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.
148
+
- This effectively inhibits(阻止) any "sticky" behavior (see the GitHub issue on W3C CSSWG).
149
+
- Sticky positioning can be thought of as a hybrid of relative and fixed positioning.
150
+
- A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.
151
+
- A common use for sticky positioning is for the headings in an alphabetized list.
152
+
- You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
153
+
154
+
-**A positioned element** is an element whose computed position value is either relative, absolute, fixed, or sticky.
155
+
- In other words, it's anything except `static` .
156
+
- A relatively positioned element is an element whose computed position value is `relative` .
157
+
- The top/b/left/r properties specify the vertical/horizontal offset from its normal position
158
+
- An absolutely positioned element is an element whose computed position value is `absolute` or `fixed` .
159
+
- The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)
160
+
- If the element has margins, they are added to the offset.
161
+
- The element establishes a new block formatting context (BFC) for its contents.
162
+
- A stickily positioned element is an element whose computed position value is `sticky` .
163
+
- It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.
164
+
- Most of the time, absolutely positioned elements that have height and width set to `auto` are sized so as to fit their contents.
165
+
- However, non-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying both top and bottom and leaving height unspecified (that is, `auto` ).
166
+
- They can likewise be made to fill the available horizontal space by specifying both left and right and leaving width as auto.
167
+
168
+
- Scrolling elements containing `fixed` or `sticky` content can cause performance and accessibility issues.
169
+
- As a user scrolls, the browser must repaint the sticky or fixed content in a new location.
170
+
- Depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone.
171
+
- One solution is to add `will-change: transform` to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.
0 commit comments