Good programmers web front-end share HTML5 common interview questions highlights three
1, implemented with a slash below linear gradient?
The answer: <div> </ div>
<style>
div{margin:50px auto; width:100px;height:100px;border:1px solid #333;
background:linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
}
</style>
2, with the realization of a single line centered CSS to display text, multi-line left home display, as shown:
The answer : <div> <p> Only when a line centered text, multi-line multi-line display Left Left display </ p> </ div>
<style>
body,p{ margin: 0; padding: 0;}
div{text-align: center;width: 400px;height: 400px; background: #ddd; margin: 30px auto; font-size: 20px;}
p{display: inline-block;text-align: left;}
</style>
3, tell us about the standard of the CSS box model? And lower versions of IE box model What is the difference?
Answer: The standard box model is based on the case doctype correctly written, and is higher than the IE6 browser will be some.
Standard box model: Width Width = content (content) + border + padding + margin
Low version IE box model: Width = width of the content (content + border + padding) + margin
4. What is the overlapping margins? The result is that what the overlap?
Answer: CSS among two adjacent boxes (possibly brotherhood possibly ancestral relationships) of margins can be combined into a single margins. This combination is referred to as margins folded manner, and thus bound to the outside from the called folded margins.
Folding Results follow these calculation rules:
1) two adjacent margins are positive numbers when folded result is a larger value between both of them.
2) two adjacent margins are negative, the result is a large folding absolute values of both.
3) when the two outside from a positive and negative, the result is both folded and additive.
5. Please explain the CSS3 Flexbox (elastic box layout model), and the applicable scene?
The answer: one for the new page layout CSS3 features, Flexbox list can be placed in the same direction (from top down, left to right), and can be extended to make a list of the available space is occupied.
The layout may also be more complex one telescoping nested container ( Flex Container) is achieved. Using Flex layout elements, called Flex container (flex container), referred to as "container." It's all child elements automatically become a member of a container, called a Flex project (flex item), referred to as "project." The layout is a conventional block-based and inline-flow direction, and the layout is based Flex flex-flow stream can be easily used for Bureau, can adaptation to different screen sizes. With more flexible than previous space in the layout.