官术网_书友最值得收藏!

Display types

There are a few display types in CSS whose definition and behaviors are the foundation of frontend developers. The most known and basic display values are as follows:

  • Inline
  • Block
  • Inline-block
  • Table/table-cell
  • Flex (this will be described further in this book)

Block elements

Block elements always start from a new line. The most important properties of block elements are width and height, which can be changed from CSS code. For better understanding, let's check the following screenshot:

Block elements

It is easy to see that all the block elements are taking as much width as they can.

The mainly used HTML block-level elements are as follows:

  • address
  • article
  • aside
  • blockquote
  • canvas
  • div
  • footer
  • form
  • h1, h2, h3, h4, h5, h6
  • header
  • main
  • nav
  • ol
  • output
  • p
  • pre
  • section
  • table
  • ul
  • video

Inline elements

Inline elements can be described as elements that take as much space as they need. It can be best described using the following image:

Inline elements

The mainly used HTML inline-level elements are as follows:

  • acronym
  • cite
  • code
  • dfn
  • strong
  • samp
  • var
  • a
  • bdo
  • br
  • img
  • map
  • object
  • script
  • span
  • sub
  • sup
  • button
  • input
  • label
  • select
  • textarea

Inline-block display

Inline elements are elements that gather properties of inline and block elements. Inline elements take as much space as they need, but additionally you can set their width, height, and padding. On the following image which is added (after the code listings), you can see the following code:

<body>
<p> Block element </p>
<span>Inline element</span>
<p class="width300"> Block element width 300 </p>
<span class="width300">Inline element width 300</span>
<span class="width300 dib"> Block element width 300 </span>
</body>

Described with SASS code:

p, span
  background: red

&.width300
    width: 300px

.dib
  display: inline-block

Compiled to CSS:

p, span {
  background: red;
}
p.width300, 
span.width300 {
    width: 300px;
}

.dib {
  display: inline-block;
}
Inline-block display

As you can easily see, the first element is a block element and it takes as much width as it can. The second element is inline. The third is a block element with a set width (300 pixels). The fourth element is inline with a set width (300 pixels) but it is not applied to this element because it has no proper display type. In addition, the last element is a span whose normal display type is inline but is set in CSS to inline block. After this operation, you can set the width of the element, and, additionally, it naturally floats to the previous inline element.

Where can you use other types of elements – navigation

The most known problem related to types of display is inline navigations. For better understanding, let's create a markup as follows:

<nav class="main-navigation">
    <ul>
        <li>
            <a href="#">First element</a>
        </li>
        <li>
            <a href="#">Second element</a>
        </li>
        <li>
            <a href="#"> Third element</a>
        </li>
    </ul>
</nav>

The easiest way to make the elements in one line is to use float:left, for example:

.main-navigation
  ul
    +clear fix /* This will prevent problems of cleared float */
    list-style: none

  li
    float: left

The second idea is to use display: inline-block on the li element:

.main-navigation
  ul
    list-style: none

  li
    display: inline-block

Where can you use other types of elements – problem of equal boxes

There is a one problem, which is repeating on web pages, and you will need to append some JavaScript code to apply the same height. It was necessary to do that back in the days. Firstly, the heights of boxes were measured and then the bigger height was set as the height, which would be applied to another box. Finally, the height would be applied to all equalized boxes.

Nowadays, you can use a table-cell value of display.

HTML code:

<div class="equalizer">
    <div class="equalized">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="equalized">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="equalized">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, soluta voluptatem accusamus totam possimus corporis inventore consequuntur unde ut deserunt reiciendis quis aspernatur, ea quisquam numquam veniam illo, cum culpa.
    </div>
</div>

SASS code:

.equalizer
  display: table
  background: orange

.equalized
  display: table-cell
  width: 300px
  background: yellow

The effect in the browser is as shown in the following:

Where can you use other types of elements – problem of equal boxes
主站蜘蛛池模板: 沁阳市| 连山| 达拉特旗| 定陶县| 宜都市| 凌云县| 阜阳市| 林口县| 永宁县| 梁平县| 龙门县| 信宜市| 康平县| 青河县| 淮阳县| 安国市| 炉霍县| 石台县| 南皮县| 东莞市| 通榆县| 德安县| 清徐县| 日照市| 玛纳斯县| 内江市| 隆化县| 乐平市| 崇左市| 堆龙德庆县| 临清市| 祥云县| 大洼县| 惠东县| 玉溪市| 隆德县| 遂川县| 兖州市| 泸州市| 浦北县| 进贤县|