Home > Developer > Web Develop
These two days in preparation for an internship interview and written test, ready to review these basic concepts, to avoid oneself in a brain only understand the mouth can not be expressed in a state.
The concept of block elements and inline elements appears in the place of CSS page layouts. The main feature is to divide the HTML tags into 2 categories according to certain attributes: block elements and inline elements (inline elements).
Let's start with a conceptual understanding:
block elements:
block element, the literal understanding is a block, it is generally the other elements of the container element, can accommodate the block elements and inline elements, it is not the default and other elements of the same line, that is, the equivalent of two blocks to write a piece of a vertical layout. The most common block elements are div and p.
CSS styles just design the width and height of the div and the background color.The effect is as follows:Inline elements:
Inline elements are also known as inline elements, and individuals feel that the elements in the line can make people more comprehensible. Inline elements are generally based on semantic elements, which can only accommodate text and other inline elements. Common inline elements have hyperlinks A, span, picture element img (remember that the picture is an inline element, I've just started to put IMG into a block element, probably because the picture is a chunk of this will confuse me, but IMG is the inline substitution element (replace-inline elements), belongs to the inline element class.
The difference between the inline element and the block element is basically that the inline element does not start from the new line, and the horizontal direction is followed. Each block element will start from the new line.
<body><a href= "Http://www.cnblogs.com/magicgua" >www.cnblogs.com/magicgua</a><input type= "text"/> </body>The effect is as follows:Look where you are! They really don't have a newline!Emphasize that when CSS inline elements define one of these two properties, the inline elements will have block element attributes! For example, start with a new line, just like a newline character followed.
1, Display:block;
2, Float:left/right;
Small example:
<style>img{display:block;width:300px;height:300px;} a{display:block;border:2px solid red;width:300px;height:100px;} </style>The effect is as follows
When I add Display:block to IMG and a, they are like block elements, starting from the new line and having the Width,heigh property! Try it yourself, if it's just the inline element, you don't have to set it for Display:block; There is no way to set its width high, it displays the width and tells the picture is the height and width of the saved, as for the IMG is more inconvenient. So, this is a very useful attribute.
Distinguishing between block elements and inline elements in a CSS layout
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
