Getting started with CSS layout

Source: Internet
Author: User
Document directory
  • Elements and boxes
  • Box Model
  • Normal stream
  • Block level and intra-row level
  • Format the context
Elements and boxes

Elements are often used in HTML, while in CSS, the basic unit of layout is box, and the box is always rectangular.

Elements do not have a one-to-one relationship with the box. One element may generate multiple boxes. pseudo elements in CSS rules may also generate boxes. elements whose display attribute is none do not generate boxes.

In addition to elements, text nodes in HTML may also generate boxes.

Box Model

A box includes content, border, padding, and margin ). Demonstrate the intuitive meaning of the Box Model:

The box size (width and height) is affected by the box-sizing attribute. You can select content-box (default), padding-box, and border-box modes for box-sizing.

Normal stream

Normal streams are pages, and most boxes are arranged in normal streams. The box in the normal stream must be located in a formatting context. There are two formatting contexts in the normal stream: block-level formatting context (BFC) and inline formatting context (IFC ).

In the block-level formatting context, the box is vertically arranged. In the row-level formatting context, the box is horizontally arranged.

The normal stream root container contains block-level formatting contexts. Different boxes may generate intra-row formatting contexts or block-level formatting contexts.

Block level and intra-row level

A normal stream contains two types of boxes: block-level and intra-row-level. No intra-row box can be directly put into block-level formatting context. If an HTML element generates a line box and its context is block-level, an anonymous block-level box should be generated for it, the anonymous block-level box will generate an internal row to format the context.

The display attribute of the element determines whether the box is in-row or block-level:

  • Block, table, flex, grid, list-item are block-level
  • Inline, inline-block, inline-table, inline-flex, and inline-grid are row-level

 

Format the context

Display may also determine how the elements are displayed internally. The boxes generated by some container elements will generate formatting contexts other than BFC and IFC.

One type of boxes is called block containers, which can contain block-level boxes. A block container either creates a block-level formatting context, so that it only contains a block-level box, or creates a row-level formatting context, so that it only contains row-level elements. (That is to say, a block container cannot contain both a block-level box and a row-level box. Once its sub-box contains a block-level box, all in-row boxes are automatically created with anonymous box packages ).

In a non-block-level formatting context, the block container always creates a new block-level formatting context, such as the boxes generated by display as inline-blocks, table-cells, and table-captions. While the block container is also in the block-level formatting context, a new block-level formatting context will be created only when overflow is not visible.

Block containers that are absolutely positioned and floating always create block-level formatting contexts.

The elements whose display value is table or inline-table will generate a table. The table uses a special format to arrange its internal elements.

The element whose display value is grid or inline-grid will generate a grid element. Similar to the table scenario, it also uses a special format to label non-internal elements,

If the display value is flex or inline-flex, an adaptive container is generated, and the adaptive container generates an adaptive formatting context inside it ).

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.