css block and inline

wang xiao bo 's photo
wang xiao bo
·

3 min read

Block features:

-Always on a line alone, it appears to start on a new line, and the following elements must also be displayed on a new line; -Width (width), height (height), inner margin (padding) and outer margin (margin) can all be controlled;

Inline element (inline) features: -On the same line as the adjacent inline element; -The width, height, top/bottom of the inner margin (padding-top/padding-bottom) and top/bottom (margin-top/margin-bottom) of the outer margin cannot be changed, that is, the text or The size of the picture;

The block-level elements mainly include: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li

The main inline elements are: a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup ,textarea, tt, u, var

Variable element (determine whether the element is a block element or an inline element according to the context): applet ,button ,del ,iframe, ins ,map ,object, script

Application of block-level and inline elements in CSS: Using CSS, we can get rid of the restriction of HTML tag classification in the above table, and freely

apply the attributes we need on different tags/elements. There are three main CSS styles:

  • display:block - display as a block-level element
  • display:inline - display as an inline element
  • display:inline-block - Display as an inline block element, which is displayed in the same line and can modify attributes such as width and height, inner and outer margins, etc.

We often add the display:inline-block style to all

  • elements, so that the originally vertical list can be displayed horizontally.

    • For the visibility property in CSS, its value is usually set to visible or hidden. visibility: hidden is equivalent to display: none, which can hide the element, but the difference between the two is:

      1. The display: none element no longer takes up space.
      1. Visibility: hidden makes the element invisible on the web page, but still takes up space. However, visibility may also be collapsed.

    When the element visibility: collapse is set, the general element behaves the same as visibility: hidden, that is, it will take up space. But if the element is a table-related element, such as table row, table column, table column group, etc., its performance is the same as display: none, that is, the space occupied by it will be released.

    Under different browsers, visibility: collapse is handled differently:

      1. The above feature of visibility: collapse only works under Firefox.
      1. Even if visibility: collapse is set in IE, the element will still be displayed.
        1. In Chrome, even if the element is hidden, whether it is an element related to the table or not, there is no difference between visibility: collapse and visibility: hidden, that is, it still takes up space.
    CSS