HTML Practice--ife Task 02 (Box model)

Source: Internet
Author: User

1. Element classification

In CSS, tag elements in HTML are broadly divided into three different types: block elements , inline elements (also called inline elements) , and inline block elements .

(1) The commonly used block elements are:

<div>, <p>,

Block-level element features:

    • Each block-level element begins with a new row, and the subsequent element also starts another line. (True overbearing, one block-level element exclusive row)
    • The height, width, row height, and top and bottom margins of an element can be set.
    • The width of the element, if not set, is 100% of the parent container (and the width of the parent element), unless a width is set.
      A{display:block;} Inline elements can be changed to block-level elements

(2) The commonly used inline elements are:

<a>, <span>, <br>, <i>, <em>, <strong>, <label>, <q>, <var>, < Cite>, <code>

Inline element Features:

    • And the other elements are on one line;
    • The height, width and top and bottom margins of the element are not set;
    • The width of the element is the width of the text or Picture it contains, and it cannot be changed.
      A{display:inline;} You can turn block-level elements into inline elements

(3) commonly used Inline block Elements are:

, <input>

Inline block (inline-block) elements feature:

    • And the other elements are on one line;
    • The height, width, row height, and top and bottom margins of an element can be set.

2. Box Model Overview

The inner part of the element box is the actual content, and the content is directly surrounded by the padding. The inner margin renders the background of the element. The edge of the padding is a border. Outside the bounding rectangle is the margin, and the margin is transparent by default, so it does not obscure any subsequent elements.

3. CSS Padding

The inner margin of an element is between the border and the content area. The simplest property that controls the area is the Padding property.

The CSS padding property defines an empty area between the element's border and the element's content.

4. CSS Border

The bounding rectangle (border) of an element is one or more lines around the content and padding of the element.

The CSS border property allows you to specify the style, width, and color of the element's border.

5. CSS Margins

An empty area around the border of an element is the margin. Setting the margin creates an extra "blank" outside the element.

The simplest way to set the margin is to use the margin property, which accepts any length units, percentages, or even negative values.

Note

When two vertical margins meet, they form an outer margin.

The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.

HTML Practice--ife Task 02 (Box model)

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.