1 Block-level elements and elements whose display is block are not the same concept, and display is list-item and table.
2 It is clear that floating pseudo-elements do not use display:list-item because IE is invalid, but setting display:list-item for non-pseudo-elements is valid in IE.
3 Single-line text is centered, and multi-line text is left-aligned.
<div class="box">
<p id="conMore" class="content">text content text content text content text content text content</p>
</div>
.box {
padding: 10px;
background-color: #cd0000;
text-align: center;
}
.content {
display: inline-block;
text-align: left;
}
4 If the parent element has height:auto, the height percentage will be ignored as long as the child element is in the document flow. Since the height value is not explicitly set, the computed value is auto, thus computing 'auto' * percent = NaN.
5 The width and height of absolute positioning are relative to padding-box, but non-absolute positioning is relative to content-box.
6 The initial values of min-width and min-height of all browsers are auto.
.box{
transition:min-height .3s;
}
.box:hover{
min-height:300px;
}
The above code has no animation effect, but if .box{min-height:0;} is added, it will appear, thus verifying that the initial values of min-width and min-height are auto.
7 The value of max-width overrides width, even if there is !important after width; the value of min-width exceeds max-width.
8 Ghost blank node: transparent, does not occupy the width.