Why 1.CSS Style To initialize
Because the browser compatibility issues, different browser the default value of some labels are different, if not often appear on CSS Initialization page displays differences between browsers.
Of course, style initialization SEO will have some impact, but the fish and can not have both, but in the case sought to initialize minimal impact.
Different browsers default margin and padding, plus a global solution is the * {margin: 0; padding: 0;} to unify.
The easiest method is to initialize: * {padding: 0; margin: 0;}
Style initialization:
A simple example: * {padding: 0; margin: 0;}
<style type="text/css">
*{margin:0;padding:0;}
div{
border:1px solid;
margin:20px auto;
height:100px;
width:100px;
box-shadow:5px 8px 5px 3px red inset ;
}
</style>
</head>
<body>
<div></div>
</body>
The effect achieved is as follows:
* {Margin: 0; padding: 0;}: the difference between preventing page display browser.
2.display values:
- the same block as the block type display element.
- none default. Inline elements like the same type of display.
- inline-block elements displayed inline like, but the contents of the same elements as block type display.
- list-item image display block type, like elements, and add style list mark.
relative and absolute positioning Origin:
- absolute: generating absolute positioning element relative to the first parent element is positioned outside the static positioning.
- relative: generating element relative positioning, positioning relative to its normal position.
relative: generating element relative positioning, positioning relative to its normal position.
A simple example:
- *{margin:0;padding:0;}
- .pubuliu {
- position:relative;
- width:708px;
- height: auto; / * centering * /
- margin:20px auto;
- }
- .pubuliu>ul>li{
- list-style:none;
- position:absolute;
}
3.iframe some disadvantages:
- iframe will block Onload event of the main page;
- iframe shared connection pool and the main page, and the browser is limited to connecting the same domain, it will affect the parallel load the page.
These two shortcomings need to be considered before using iframe. If you need to use iframe, the best is dynamically added to the iframe src attribute value by JavaScript, so these two problems can be bypassed.
4.CSS weighting rules defined methods:
The following are the rules the weight: weight on the label is 1, class a weight of 10, id a weight of 100, the following examples demonstrate various weights are weight values defined:
/ * * Weight of 1 /
div{
}
/ * The weight is 10 * /
.class1{
}
/ * 100 * Weight /
# {Id1
}
/ * A weight of 100 + 1 = 101 * /
# ID1 div {
}
/ * Weight of 10 + 1 = 11 * /
.class1 div{
}
/ * Weight of 10 + 1 = 10 + 21 * /
.class1 .class2 div {
}
If the weights are the same, the last defined style will work, but should avoid such a situation.
5. centered div, a float center:
(1) div to a set width and then add margin: 0 auto Properties
div{
width:200px;
margin:0 auto;
}
(2) a floating element centrally
Determining the width and height of the container, such as width 500, higher layer 300, the layer is provided from the outside:
.div {
Width: 500px; height: 300px; // height can be no
Margin: -150px 0 0 -250px;
position: relative; relative positioning
background-color: pink; // easy to see the effect
left:50%;
top:50%;
}
Conclusion: The main analysis of why CSS style initialization value display, a number of shortcomings iframe, way to define the weight of CSS rules, centered div, center a floating element.