| Article Introduction: inline (inline) elements, block-level element differences. |
A: Within the line is within a line of elements, can only be placed in the row, block-level elements, is a square block, you can put anywhere on the page.
B: Plainly, inline elements are like a word; block-level elements are like a paragraph, and if not added to the definition, it will appear on its own line.
C: General block-level elements such as paragraph <p>, title D: The salient feature of block-level elements is that each block-level element is displayed from a new row, and that the following non-element also needs to be displayed on a separate line.
E:<span> belongs to an inline element in the CSS definition, while <div> is a block-level element.
For those who have learned CSS, one can understand it. But for the novice is not easy to understand, I mainly to the novice said familiar point bar!
The term "container" will make it easier to visualize their existence and use, in which the elements of the line are quite a small container, while the <div> is the equivalent of a large container, and a large container can of course be placed in a small container. <span> is a small container, so you may have a preliminary impression in your mind, if we want to fill a large container with some water. But what if I want to put some ink in it? Very simply, we put the small containers out of the ink and put it into the large container in the water is not it.
Let me give you a simple practical example:
| <div>abcdefg</div> |
| <div>ab<span>c</span>defg</div> |
Problem causes:
We've been in the book. A very simple example of using a to make a web menu is essentially setting the height, width, and border properties of a element. For example, the following code:
<html>
<head>
<style>
a {
width: 200px;
line-height: 40px;
border: 1px solid red;
background-color: #CCC;
text-decoration: none;
text-align: center;
}
</ style>
</ head>
<body>
<a href="#"> Link text </a>
</ body>
</ html>
Obviously, we want to set the above hyperlink to 200 pixels wide and 40 pixels high, with a red border and a gray background, without underlining.
So what is the effect in the browser? The left picture below is the effect in IE 6, and the right picture is the effect in Firefox.
CSS web page production tutorial: display attributes inline elements and block-level elements-
As you can see, the effect in IE 6 is exactly what we want. In Firefox, the effect is not what we want, and the width and width are not correct. What is the reason?
Dispel doubt
The reason here is that, according to the CSS specification, each web element has a display attribute, which is used to determine the type of the element, and each element has a default display attribute value, such as a div element, and its default display attribute value For "block", it becomes a "block-level" element; the default display attribute value of the span element is "inline", which is called an "inline" element.
Block-level elements such as div will automatically occupy a certain rectangular space, and you can adjust the appearance of this rectangle by setting attributes such as height, width, inner and outer margins, etc. In contrast, inline elements like "span", then It does not have its own independent space, it is dependent on other block-level elements, so it is invalid to set attributes such as height, width, inner and outer margins for elements in the row.
So what is the element of the link a by default? The answer is "inline elements", so setting the attributes such as height and width on the a element, as in the code above, is invalid, which explains the reason why it looks like this in Firefox.
So in IE6, why did we wait for the desired effect? The answer is that IE does not follow the CSS specification by default, and it also sets the height and width properties for the a element. Therefore, it should be said that Firefox is in compliance with the regulations, and IE is not the standard interpretation method by default.
What needs to be explained here is that if we add a DOCTYPE directive to the web page to limit the type of HTML document, then in IE, he will also interpret this code according to the standard CSS specification.
For example, change the first line in the above code to:
<! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
At this time, the effect seen in IE will be the same as in Firefox, indicating that when the DOCTYPE instruction is used, IE will interpret the above code in a standard way, so as to obtain the same effect as in Firefox.
So what if you want to make the a element get the effect we want in the standard way, in Friefox and IE browsers?
Solution
The method is very simple, just use the display attribute to force the a element from the inline element to block-level. The method is to add one to the CSS style of the a element:
display: block;
At this time, we can get the effect we want in IE and Firefox. You can set various geometric properties such as height and width at will.
Summary and improvement
Through the display attribute, you can easily change the type of an element, so if the reader understands this, you will know that in fact div elements and span elements, only need to pass the display attribute, you can convert each other.
Therefore, no matter what kind of HTML tags a web page has, such as div, ul, li, p, etc., they are essentially just boxes. In the eyes of browsers, a web page is a lot of boxes. Your task is to put these boxes in the right place according to your requirements. It doesn't matter whether the box is ul, li, p or div.
For example, the p tag can be understood as a div with some preset attribute values. For example, if you replace the p tag on the web page with a div, and then set some CSS properties on the div, it will be exactly the same as p. It's as if we were studying addition and subtraction in elementary school. Later we learned that the essence of addition and subtraction is the same. 1-1 is equal to 1 + (-1). Similarly, multiplication and division are the same.
After a thorough understanding of the principles, it is possible to achieve freedom like the sky and the sky when designing.
Similarly, for a web page, as a designer, when defining the structure and content of a web page, the focus is on the structure and content of the web page, and when typesetting, how the browser concerned displays this page.
We said that the p tag and the div tag are actually boxes, which emphasizes one aspect of the problem. On the other hand, in terms of structure and content, it is of course completely different, and it should not and should not be replaced.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
