display elements of attribute type box should generate rules.
display of more of the description
Here the main focus display:block;and display:inline-block, well width, height, margin, paddingexpand
The basic code is as follows
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
}
.block {
background: red;
}
.inline {
background: yellow;
}
.block,
.inline {
width: 200px;
height: 50px;
margin: 10px;
padding: 10px;
}
</style>
</head>
<script>
</script>
<body>
<div class="block">
display:block
</div>
<div class="block">
display:block
</div>
<span class="inline">
display:inline
</span>
<span class="inline">
display:inline
</span>
</body>
</html>
复制代码Html and css standards of proficiency => see conceivable interface style code
The above code as better than the blunt face questions asked: "display: block; and display: inline; what difference"
divTag, block-level elements, the display attribute is the default block, spanthe label, the line elements, the display attribute defaultsinline
Label refers to the HTML element refers to the browser
Class packet selector and the selector
.blockSelector is a class, except that in front of the symbol ., the label may be used by a class attribute.
.block, .inline a packet selector, except that the front of the symbol ,, expressed .blockand .inlineshared style
Can be viewed through the Developer Tools
width, height, margin, paddingDifferent appearances
divAnd spanuseful for the same width, height, margin,padding
However , spanthe width, heightit is a complete failure.
margin Only horizontal work
Orange represents margin, green representspadding
And paddingthe spanrepresentation is different from divthe
Write temporary inline styles for elements with developer tools
Developer Tools can element.styletry as equivalent to write an inline style on the label
Enter pafter the prompt, it comes with its own filtering. Can be selected by the vertical direction keys of the keyboard, blue background represents the currently selected, pressing the tab key rapid filling property, then enter 100px
The vertical direction can be adjusted by the size of the key attribute value, while holding down the ctrlamplitude is 100, while holding shiftan amplitude of 10, while holding down the altamplitude 0.1
100px and padding can click again to completely remove any will delete the entire statement.
The same change in role divfor the
About paddingto see www.w3school.com.cn/cssref/pr_p...
Egg
<div style="text-align: center">
<span class="inline" style="padding:10px">
display:inline;
</span>
</div>
复制代码Developer Tools by changing paddingthe value of
The last chapter - 3 document.body Why is null
Next chapter - border attribute in 5 css