蜂鸟跑腿

書名： Professional CSS3
作者名： Piotr Sikora
本章字數： 649字
更新時間： 2021-07-02 16:39:39

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:

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:

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;
}

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

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