Replace elements and irreplaceable elements in CSS

Source: Internet
Author: User

  1. Replacement and irreplaceable elements  
can be divided into replacement and irreplaceable elements in terms of the elements themselves. &NBSP

A) replaces element  
Replace element is the browser based on the element's label and attributes to determine the concrete display of the element. &NBSP
For example, the browser reads the picture information based on the value of the SRC attribute of the label and displays it, and if you view (x) The HTML code, the actual contents of the picture are not visible; For example, according to <input> The Type property of the label determines whether to display an input box, a radio button, and so on. &NBSP
(x) HTML , <input>, <textarea>, <select>, <object> are replacement elements. These elements often have no actual content, that is, an empty element, such as:  
<input type= "Submit" name= "Submit" value= "submitted"/> &NBSP
Browsers display these elements based on the element's label type and properties. Replaceable elements also generate boxes in their display.

B) is not replaceable element  , and most elements of
(x) HTML are not replaceable elements, meaning that their content is represented directly to the client (for example, a browser). For example:  
<p> paragraph content </p> 
Paragraph <p> is an irreplaceable element, and the text "Paragraph content" is displayed. &NBSP

2. Display element  
In addition to the categories of replaceable and irreplaceable elements, CSS The elements in 2.1 are also categorized in a different way: block-level elements (block-level) and inline elements (Inline-level, also translated as "inline" elements). &NBSP

A) block-level element  
The element that is visually formatted as a block, the most obvious characteristic being that it defaults to a content area that is horizontally filled with its parent element, and that there are no other elements on the left and right sides of the block-level element, which is exclusive by default. &NBSP
Typical block-level elements are:<div>, <p>, Sets the float (float property, floating left or right) with CSS, and the elements that set the display property to "block" or "list-item" are blocks-level elements. &NBSP
But the floating element is special, and there may be other elements next to it because of the float. The "List-item" (list item <li>) generates a dot symbol, or a numeric ordinal, before it. &NBSP

B) inline element  
Inline element does not form a new content block, that is, there can be other elements around it, such as <a>, <span>, <strong>, etc., are typical inline-level elements. &NBSP
The Display property equals "inline" elements are inline elements. Almost all replaceable elements are inline elements, such as , <input>, and so on. &NBSP
But the type of the element is also not fixed, by setting the display property of the CSS, you can make the inline elements into block-level elements, or you can make the block-level elements into inline elements. &NBSP

Substitution elements are the same as block-level elements in many places in the format, such as vertical boundary compression while horizontal boundaries are uncompressed, and border and padding defaults to 0. &NBSP
All substitution elements can be scaled with the height and width properties, such as the label, if a picture is wide and high to 100px, the picture remains the same size when the height and width are set to auto. However, when set to a different value, scaling occurs.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.