1, create a triangle of principles with pure css:
.demo{
width:0;
height: 0;
border: 5px solid transparent;
border-left-color: red;
}
2, why should initialize css styles
Different default browser heap label is different, if not often appear between the browser page to initialize the display css difference.
Deprecated * {padding: 0; margin: 0;}
3, explain why you want to clear float? Clear floating way
1), to define the height of the parent div
2), using the conventional class
.clearfix before ::, :: After .clearfix {
Content: "";
the display: Table;
}
.clearfix {:: After
Clear: both;
}
.clearfix {
* zoom:. 1; // ie browser-specific properties is provided or scaling searched
}
. 3), Sass compile time, the parent div class defined pseudo-floating element: After
& After ::, &: : before {
content: "";
visibility: hidden;
the display: block; // make generated element of the display elements block level, fills the remaining space
height: 0;
Clear: both; // to avoid damage to the original contents generating layout height
}
4, display: the hidden differences: none and visiblity
display: none elements will completely disappear from the render tree, when rendering does not occupy any space; visibility: hidden elements will not let disappear from the render tree, elements continue to occupy space when rendering the contents are not visible.