Good programmers web front face questions sharing achieved with a linear gradient slash
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>
Achieve a single line centered by 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>
Introduction of standard 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 = content (content) + border + padding + margin
IE version lower 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: a new CSS3 features for page layout, 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.