Novice to learn the display properties of CSS simply

Source: Internet
Author: User
Tags header visibility
Css

The trick to manipulating HTML elements is to understand that the way they work is not in a specific form. Some of the pages made up of labels can be set to any style. Most HTML elements in the browser default style are made up of font styles, margin,padding, and are essentially display types.

The display property is basically divided into Inline,block, and none.

Inline as it was meant to be--the element shown as inline is a row. Strong,anchor anchors and EM accent elements are rows by default.
The block element wraps around the line. The caption and paragraph elements are block elements.

None, meaning does not show elements, in usability can achieve beautiful effect, alternating style or hover effect of advanced application.

Set performance can be better used in Web page production.

H1 {
Display:inline;
Font-size:2em;
}
#header p {
Display:inline;
Font-size:0.9em;
Padding-left:2em;
}

The set caption H1 is a row element and can be on the same line as the following element.

#navigation, #seeAlso, #comments, #standards {
Display:none;
}

The code above can be used in print styles, such as navigation, which does not display navigation when printed.

The difference between Display:none and Visibility:hidden is that Display:none completely cancels the display of the element, Visibility:hidden keeps the element position but the visual content is not visible. For example, if the second paragraph in 3 is set to Display:none, the first paragraph will only follow the third paragraph, and if set to Visibility:hidden, the paragraphs will be empty.

  Form

Understand table-related performance attribute values best method imagine HTML table. Table is the initial performance and you can use Table-row analog Table-cell to simulate TD.

Display properties go further by using Table-column, Table-row-group, Table-column-group, Table-header-group, Table-footer-group, and Table-caption. You can now build a table directly using columns, faster than using row constructs in HTML.

Finally, inline-table set the table before and after the line.

Using CSS tables can severely impair usability. HTML should be used to convey semantics, so if you have tabular data, you can use HTML tables. Using CSS tables can only produce bad data if no CSS data will be unreadable.

  Other forms of expression

List-item list items, just like the LI element in the HTML. They need to be nested inside the element to display.

The representation of a run-in element is determined by its parent element. Neither IE nor Mozilla supports it.

Compat according to up and down Arvin decision manifestation, the same IE and Mozilla do not support.

Maker only use in: Before and: After pseudo element, set the performance of the content attribute. The Content property defaults to maker, so it is only useful if the original attribute is overwritten.

The Content property, which defaults to maker, so it is only used when overwriting the original property.



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.