The details of HTML and CSS applications in the Web front end

1, the center of the N method:
①, margin:0 20%;
--Set the margin value to 0, the left and right margin set to the same percentage, to center the box.

②, margin:0 Auto;
width:1000px;
--Set the margin value to 0, the left and right margins are set to auto, and then set the width of the box to center the box.

③, #outer_div
{
padding:30px;
Text-align:center;
}
#inner_div
{display:inline-block;/* Inline block element */
padding:50px;
background-color:red;}
--Using a nested implementation of two boxes, it is only necessary to set the value of text-align in the parent box to center, and then set the value of the child box display to Inline-block (inline block Element) to be centered.

2, about the margin merger problem:
①, the vertical margin adjacent to 2 or more block-level box models is merged in a regular document flow. The final margin value is calculated as follows:
A, all are positive, take the largest person;
b, not all positive values, then the absolute value is taken, and then minus the maximum with a positive number;
C, without a positive value, take absolute values and subtract the maximum by 0.
②, adjacent box models, if one of them is floating (floated), the vertical margin is not merged, even between a floating box model and its child elements.
The margin between ③, the element that sets the overflow property, and its child elements is not merged (except for the overflow value of visible).
④, the box model with absolute positioning (Position:absolute) is set, and the vertical margin is not merged, even between their child elements.
⑤, the Display:inline-block element is set, and the vertical margin is not merged, even between their child elements.
⑥, if the upper and lower margin of a box model is adjacent, then its margin may be combined to cover (collapse through) it. In this case, the position of the element (position) depends on whether the margin of its neighboring elements is merged.
A, if the margin of the element and the margin-top of its parent element are folded together, the bounding definition of the box model Border-top is the same as its parent element.
b, in addition, the parent element of any element does not participate in the merge of the margin, or only the margin-bottom of the parent element is involved in the calculation. If the element's border-top is nonzero, then the element's border-top boundary position is the same as the original.
A margin-top of an element that has a purge operation applied will never merge with the Margin-bottom of its block-level parent element.
Note that the position of those elements that have been merged has no effect on the position of the other elements that have been merged, and the Border-top boundary position is required only if the child elements of those elements are positioned.
Vertical margin of ⑦, root element will not be merged.

Solution:
L in the parent div plus: overflow:hidden;
L Change the outer margin of the margin-top into the padding-top inner margin;
L The parent element produces a margin that overlaps an edge with a padding of not 0 or a width not 0 and the style is not the border of none
Parent-level div plus: padding-top:1px;
Let the parent element generate a block formating context, the following properties can be implemented
L * Float:left/right
L * Position:absolute
L * Display:inline-block/table-cell (or other table type)
L * Overflow:hidden/auto
L Parent Div Plus: position:absolute;

3, the elimination of the Float property:
①, clear Floating method one: (Clear:both;)
Ul{list-style:none;}
UL li{float:left; margin:5px;}
. Clear{clear:both;overflow:hidden;}

②, clear Floating Method two: (Overflow:auto)
Ul
{
List-style:none;
Overflow:auto;
_zoom:1;
/*zoom is for compatibility with IE6, triggering the Haslayout attribute under IE6 */
}
UL Li
{
Float:left;
margin:5px;
}

③, clear Floating Method three: (: After Pseudo-class element)
#after Ul:after
{
Content: ".";
Display:block;
height:0;
line-height:0;
Clear:both;
Visibility:hidden;
}
④, using display:table to turn an object into a table Form
⑤, using div tags, and the clear property of CSS
⑥, using BR tags, and the clear properties of CSS
⑦, using the BR tag, and its own HTML's clear property

4. Browser Compatibility:

①, browser compatibility issue one: different browser tags default external patches and internal patches are different
Problem symptom: Write a few labels casually, do not add style control case, each margin and padding difference is big.
Hit frequency: 100%
Solution: CSS in *{margin:0;padding:0;}

Note: This is the most common and the most easy to solve a browser compatibility problem, almost all of the CSS file starts with a wildcard * to set the internal and external patches of each tag is 0.

②, browser compatibility issue two: block attribute label float, and there are rows of margin, in the IE6 show the margin ratio set the large
Problem symptom: A common symptom is that the next piece in IE6 is top to bottom row
Frequency: 90% (a slightly more complex page will encounter, float layout most common browser compatibility issues)
Solution: Add Display:inline to the label style control of float and convert it into inline properties
Note: Our most commonly used is div+css layout, and Div is a typical block attribute tag, horizontal layout when we are usually implemented with div float, horizontal spacing setting if using margin to achieve, this is a must encounter compatibility problem.

③, browser compatibility problem three: set a smaller height label (generally less than 10px), in the Ie6,ie7, the height of the tour beyond its own set height
Symptoms: IE6, 7, and the height of this label are uncontrolled, exceeding the height of your own settings
Hit frequency: 60%
Solution: Set Overflow:hidden for labels that are out of height, or set line height line-height less than you set.
Note: This usually occurs in the label where we set the small rounded background. This problem occurs because the browser before IE8 will give the label a minimum height of the row height. Even if your label is empty, the height of the label will still reach the default row height.

④, browser compatibility issues four: in-line attribute tags, set display:block after the use of float layout, and the situation of horizontal margin, IE6 pitch bug
Problem symptom: The spacing in IE6 is more than the spacing set
Chance to hit: 20%
Solution: Add display:inline;display:table after Display:block;
Note: In-line property labels, in order to set the width, we need to set display:block; (except that the input tag is special). With float layout and horizontal margin, under IE6, he has a bug of horizontal margin after the Block property float. However, because it is the inline attribute tag itself, so if we add display:inline, its aspect will not be set. We also need to add display:talbe behind Display:inline.

⑤, browser compatibility issue five: Image default spacing
Problem symptom: When several IMG tags are put together, some browsers will have default spacing, and adding the wildcard character mentioned in the question does not work.
Chance to hit: 20%
Solution: Use the Float property for the IMG layout
NOTE: Because the IMG tag is an inline attribute tag, the img tag is lined up on a single line as long as the container width is not exceeded, but there is a gap between the IMG tags in some browsers. Removing this spacing using float is the right path. (using negative margin, although it can be solved, but the negative margin itself is prone to the use of browser compatibility issues, so it is not recommended)

⑥, browser compatibility question six: Label minimum height setting min-height incompatible
Problem symptom: Because Min-height itself is an incompatible CSS property, setting Min-height is not very well compatible with each browser.
Chance to hit: 5%
Solution: If we want to set a minimum height of 200px for a label, you need to set the setting to:
{
min-height:200px;
Height:auto!important;
height:200px;
overflow:visible;
}

⑦, browser compatibility question VII: Compatible CSS settings for transparency
The way to do a compatible page is to write a small piece of code (a line or a piece of the layout) we have to see in different browsers is compatible, of course, proficiency to a certain degree is not so troublesome. It is recommended that you often encounter compatibility issues with novice users. Many compatibility issues are caused by the browser's default attribute resolution for the label, as long as we can easily fix these compatibility issues with a little bit of setup. If we are familiar with the default properties of tags, we can understand why compatibility issues arise and how to resolve them.

The details of HTML and CSS applications in the Web front end