Notes on "Writing High-Quality Code--The Way of Cultivating Web Front-End Development"-CSS

This is the second part of this note

Standards mode vs. quirks mode (simulates the behavior of older browsers)

If the DTD declaration is omitted, Firefox will still parse the webpage according to the standards mode, but in IE (including IE6, IE7, IE8) will trigger the quirks mode

Analysis of IE box model

Standard mode: The width of web elements is determined by the addition of padding, border, and width.
Weird mode: width itself includes the width of padding and border

Organizing CSS

base.css + common.css + page.css

base.css includes CSS reset, generic atomic classes

CSS reset: The label has a default style in the browser, and the default style of different browsers will be different. For example: ul has an indented style by default. Under IE, its indentation is realized by margin, while under Firefox, its indentation is realized by padding.
Generic atomic class: A series of commonly used basic classes, including: text, positioning, width and height, margin
text : font-size, line-height, text-align
positioning: float, clear, position
width and height: width, height
margin: margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom,padding-left

CSS naming

English is recommended, not Hanyu Pinyin
Common naming methods: hump naming, dash naming (two methods can be combined, where hump naming is used to distinguish different words, and dash is used to indicate affiliation)
It is not recommended to use sub-selectors easily, there will be conflicts when multiple people cooperate
In order to avoid conflicts of multi-person cooperation, each engineer on the page layer can be assigned a unique identifier as a prefix

More composition, less inheritance

Hang multiple classes to achieve the final style

Handling upper and lower margins

Adjacent margin-left and margin-right will not overlap
Adjacent margin-top and margin-bottom will overlap
, so it is best to use margin-top or margin-bottom for adjacent modules, and do not mix them.

Low Weight Principle - Avoid Abusing Subselectors

CSS selector weight rules:
label - 1
class - 10
id - 100
If the CSS selectors have the same weight, then the style will follow the proximity principle, whichever selector is defined last (instead of the class name hanging at the end), the style
of There is no difference between
Using sub-selectors will increase the weight of CSS selectors. The higher the weight of CSS selectors, the less likely the styles will be overwritten, and the easier it will be to affect other selectors.
In order to ensure that styles are easily overridden and improve maintainability, CSS selectors should keep the weight as low as possible

CSS sprite (image flipping technique)

Combine the background image of the website into a large image, reduce the number of HTTP requests on the web page, and reduce the pressure on the server
The merged image can only be used for the background, and the <img src="">set image cannot be merged
The coordinate value of each small image in the big image cannot be easily changed

CSS hack

IE conditional comments





selector prefix
*html .test{width:60px;}/*IE6*/
*+html .test{width:70px;}/*IE7*/
style attribute prefix
.test{ width:80px; *width:70px;/*IE6，IE7*/ _width:60px;/*IE6*/ }

4 state sorting of a tag

love hate原则：l（link）ov（visited）eh（hover）a（active）te

hasLayout

Trigger hasLayout to solve IE bug
zoom:1;
When zoom is invalid, you can set position:relative;, but there will be side effects

Block-level elements and inline elements

block level	In line
Exclusive line, by default, its width automatically fills the width of its parent element, even if the width is set, it is still an exclusive line	It will not occupy a single line. Adjacent elements are arranged in the same line, and the line will not be wrapped until one line cannot be arranged. Its width changes with the content of the element.
Margin and padding can be set normally	Margin and padding in the horizontal direction will have an effect, and margin and padding in the vertical direction will not produce a margin effect.

display:inline-block和hasLayout

In order to be compatible with IE, the only types that can be used for display are inline, block, and none. IE6 and IE7 do not support display:inline-block;
inline-block: You can set the length and width, you can set the margin and padding values, but it is not an exclusive line
If you trigger hasLayout on inline elements, you can simulate the
effect of display:inline-block Inline elements {display:inline-block;} can trigger hasLayout
only for inline elements

Both img tags and button tags have the feature of display:inline-block;, which can set the length and width but do not occupy a single line

relative，absolute和float

This I wrote a blog before, listed a table for comparison, the portal

Supplement a description of each value of position
position: static;

The default value of position, the element will be positioned to its normal position, in fact, it is equivalent to no positioning
The element occupies a position in the page
Can't use top, right, bottom, left to move element position

position: relative;

Relative positioning, positioning relative to the normal position of the element
The element occupies a position in the page
Element position can be moved using top, right, bottom, left

position: absolute;

Absolute positioning, relative to the nearest parent element whose positioning is not static
The element does not occupy a position in the page
Element position can be moved using top, right, bottom, left

position: fixed;

Absolute positioning, positioning relative to the browser window, the rest are the same as absolute, which is equivalent to a special absolute

position: inherit;

Inherit the value of the position property from the parent element

Centered

Centered horizontally

Horizontal centering of inline elements Set
to parent elementtext-align: center;
Determines the horizontal centering of the width of the block-level element
setting margin-left: auto;andmargin-right: auto;
Horizontal centering of block-level elements of indeterminate width
1. Include elements in the table tag, set margin-left: auto;and margin-right: auto;
  add non-semantic tags to the table, and deepen the nesting level of tags
  (table itself is not a block-level element, if its width is not set, its width is supported by the width of the inner element )
2. Change the display of block-level elements to inline type, and then use text-align: center;to achieve centering. but there are side effects
3. Set float to the parent element, then set the sum of the parent element, and set the position: relative;sum left: 50%;of the child element to achieve horizontal centering. but there are side effectsposition: relative;left: -50%;

Center vertically

The vertical centering of text, image, and block-level elements whose parent element height is uncertain is
achieved by setting the same upper and lower padding for the parent container ( padding-top, padding-bottom)
The vertical centering of a single line of text determined
by parent element line-heightis achieved by setting the line-heightparent element, the value is the same as the height value of the parent element
Vertical centering of multi-line text, images, and block-level elements whose parent element height is determined
1. vertical-align: middle;But it will only take effect when the parent element is td and th.
  Under Firefox and IE8, you can set the display type of the block-level element to table-cell to activate vertical-align.
  IE6 and IE7 do not supportdisplay: table-cell;
  it, so you can use table and td directly. , which is implicitly set by defaultvertical-align: middle;
2. Use hacks to achieve centering by setting sums for the parent and child elements respectively under
  unsupported display: table-cell;IE6 and IE7. If the sum is set , there will be side effects .top: 50%;top: -50%;
  position: relative;position: absolute;

z-index

After activating the z-index property, if you do not set its value, it defaults to 0, but it still floats above the body
If multiple elements have the same z-index value, the element that appears later in the HTML tag will float above the element that appears earlier.

Negative margins - does not activate z-index, but still overlaps the position of elements

When the browser parses the page, it will first judge the type of the element. If it is a window type, it will take precedence over the non-window type element and display it at the top of the page. If it is of the same non-window type, it will judge the size of the z-index. (The select element is displayed in window form under IE6)