html, CSS "treasures"

Source: Internet
Author: User
<span id="Label3"></p><p><p></p></p><p><p><strong> <span style="color: #ff0000;">in-line Elements</span> </strong> <span style="color: #ff0000;">:</span> will be arranged horizontally, cannot contain block level element, set width is invalid, height is invalid (can set line-height), margin is invalid, padding up and down is INVALID.</p></p><p><p><strong> <span style="color: #ff0000;">block-level elements</span> </strong> :<em id="__mceDel" style="line-height: 1.5;"> each occupy one row, arranged in a vertical direction. Start at the beginning of the new line and then a Break. </em></p></p><p><p></p></p><p><p>Block-level elements <em style="line-height: 1.5;">: div, p, form, ul, li, ol, dl, form, address, fieldset, hr, menu, table<br></em></p></p>Inline elements: span, strong, em,<strong><strong>BR</strong></strong>, img, input, label, select, textarea, cite,<pre><pre> <strong> inline element (inline Element) inline Element </strong> <br> * A-anchor Point <br> * abbr-abbreviation <br> * Acronym-first Word <br> * b-bold (not recommended) <br> * BD O-bidi override <br> * Big-large Font <br> * br-line break <br> * cite-reference <br> * code-computer code (required when referencing source) <br> * dfn-define Field <br> * em-emphasize <br>* font-font Settings (not recommended) <br> * i-italic <br> * img-image <br> * input-input Box <br> * kbd-define keyboard text <br> * label-table label <br> * Q-short Reference <br> * s-medium Dash (not recommended) <br> * Samp-define Sample computer code <br> * Select-project Selection <br> * small-small text <br> * Span-common inline container, define text within chunks <br> * Strike-underline <br> * Stro Ng-bold Accent <br> * Sub-subscript <br> * Sup-superscript <br> * textarea-multiline text input Box <br> * tt-fax text <br> * U-underline <br> * var-define variable <br> <br> </pre></pre><pre><pre><strong>Block element</strong><br>* Address-addresses<br>* Blockquote-block Reference<br>* Center-align Block<br>* Dir-list of directories<br>* Div-common Block-level easy, is also the main tag of CSS layout<br>* Dl-definition List<br>* Fieldset-form control Group<br>* form-interactive Form<br>* H1-big Title<br>* H2-subtitle<br>* H3-3 level Title<br>* H4-4 level Title<br>* H5-5 level Title<br>* H6-6 level Title<br>* Hr-horizontal Divider Line<br>* Isindex-input Prompt<br>* Menu-list of Menus<br>* Noframes-frames Optional content, (for browsers that do not support frame, display this chunk content<br>* noscript-) Optional script content (this content is displayed for browsers that do not support script)<br>* Ol-sort Form<br>* P-paragraph<br>* pre-formatted Text<br>* Table-form<br>* ul-non-sorted List<br><br></pre></pre><pre><pre>Variable element<br>A mutable element is a block element or an inline element that determines whether the element is in Context.<br><br>* Applet-java Applet<br>* Button-buttons<br>* Del-delete Text<br>* Iframe-inline Frame<br>* ins-inserted Text<br>* Map-image Block (map)<br>* Object-object Object<br>* Script-client-side Scripting<br><br></pre></pre>2 difference: 1) block-level elements will be exclusive row, its width automatically fills its parent element width of the row elements will not be exclusive row, the adjacent rows of elements will be arranged in the same row, know that a row is not allowed to wrap, and its width varies with the content of the element 2) Block-level elements can be set Widt  h, height property, inline element set width, height invalid "note: block-level elements, Even if the width is set, are still exclusive lines of" 3 "block-level elements can be set margin and padding. The padding-left,padding-right,margin-left,margin-right of the horizontal direction of the element in the row produces a margin effect, but the vertical direction of the padding-top,padding-bottom, Margin-top,margin-bottom does not produce a margin effect.<strong><strong>(the Horizontal direction is valid, the vertical direction is Invalid)</strong></strong><p><p>html, CSS "treasures"</p></p></span>

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.