A few days ago to do adaptive skin to understand the meaning of blocks (block). Found such a problem.
What is the difference between a SPAN element and a DIV element
Solution Idea:
The most obvious difference is that Div is a block element and span is an inline element. A block element is equivalent to an inline element that adds a <br> newline to the front and back. In fact, block elements and inline elements are not immutable, as long as the block elements to define Display:inline, block elements become embedded elements, as well as the embedded elements defined Display:block is a block element.
Specific steps:
<style> div,span{border:1px solid #f00 Margin:2} </style> <div>div1</div><div>div2 </div> <span>span1</span><span>span2</span> <div >div3</div> <div > div4</div> <span >span3</span> <span >span4</span>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Tip: Some friends will say that Div is a layer tag, in fact, there is no layer in the HTML, but in order to be easy to understand, Dreamweaver wrote, each object can become "layer", only need to define position attributes ( Value is absolute or relavite). For example, to make a picture "layer," You can write code like this:
Special Tips
This example code runs as shown in the point run code, to better illustrate the problem, here to block elements and embedded elements are added 1 pixel wide red solid border, from the figure can be seen, div default to block elements, the definition of Display property value is inline after the embedded elements show, span defaults to inline elements, which are displayed as block elements when the display property value is defined.
Special Notes
This example mainly describes the use and significance of the two values block and inline of display properties.
