CSS tag Knowledge

Source: Internet
Author: User
Tags html comment

One, the difference between the inline label and The Block label

inline, inline, in-line attribute tags:
1, the default peer can continue to follow the same type of label;
2, the content open width
3, does not support the width of the high
4, does not support the upper and lower margin and padding
5. Code wrapping is parsed

Block attribute Tags:
1, the default exclusive line display;
2, no width, the default is full of a row
3. Support all CSS Commands

Second, display

Display:block; Show as Block
Display:inline; Display as inline

Display:inline-block
Characteristics:
1, block in a row display;
2, in-line attribute tags support wide-height;
3, no width when the content open width

Problem:
1, code line is parsed (a space size);
2, IE6 IE7 does not support the block attribute tag Inline-block;

Solution with float label

Three,float label

Floating: Left/right/none

The element is floated, moves out of the document stream, travels in a specified direction until it touches the parent's boundary or another floating element stops

1. Make the block elements appear on one line

2. Make the inline support wide and high

3. Width is not set when width is open by content

4. Out of document Flow

5. Upgrade level half (the contents of the tag will be squeezed out)

Document flow is the position in the document where objects are placed in the arrangement

Clear Left/right/both/none element cannot have floating elements in one Direction

iv. Cursor Type

Cursor:text (text type) |pointer (cursor rendered as a pointer indicating a link (one hand)) |default (the default cursor (usually an arrow))

Change the mouse graph of the current page: body{height:1500px; Cursor:url (hand.cur), pointer;}  

Note: There is no compatibility issue with picture cur.

Five, the front-end specification

1. All writing is lowercase in the English half-angle state;

2, Id,class must start with a letter;

3, all labels must be closed;

4, the HTML tag is indented with the TAB key;

5, the attribute value must be quoted number;

6, <!--HTML comment--(note: There are spaces between the symbols, which is responsible for compatibility issues)

7,/* CSS comments */(note: There are spaces between the symbols, responsible for compatibility issues, especially IE6)

8, UL,LI/OL,LI/DL,DT,DD has a parent-child relationship label;

9, p,dt,h tag inside can not nest block attribute tag;

10, a label can not nest A;

11, inline elements can not be nested blocks;

CSS tag Knowledge

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.