The classification properties specify how an element is displayed and whether it is visible.
display
The display property determines the kind of box that surrounds an element. It can make any element appear as inline, block, or any other type. Every element has a default display value that depends on what type of element it is.
Most HTML elements display as either inline or block; others have special display properties, such as list-item for the <li> element and table-cell for the <td> and <th> elements. By using the display property, any element can be changed to be rendered as these or any other element type. For instance, the following link is rendered as a block element instead of an inline element:
One of the more useful values for display is inline-block, which combines features of both block and inline. An inline-block element is like an inline element, except that it can also manipulate the width, height, and vertical margin properties of the box model as a block element does. These features are the same as those of replaced inline elements, such as <img> and <button>. As such, these elements were formally redefined as inline-block elements in HTML 5.
A common application of inline-block is to make list item elements (<li>) suitable for horizontal navigation menus. Note that changing the display type of the list item element from list-item to inline-block automatically removes the list marker.
li {
display: inline-block;
width: 100px;
background: #ccc;
}
With this rule in place, the following markup renders three boxes with gray backgrounds next to each other, as illustrated in Figure 22-1.
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
Figure 22-1
The inline-block value demonstrated
Another useful display value is none. It completely hides an element, making the page render as if the element did not exist.
.removed { display: none; }
visibility
The visibility property can hide an element without removing the space it occupies by setting the property’s value to hidden.
The collapse value is meant to be used only on certain table elements: rows (<tr>), columns (<col>), column groups (<colgroup>), and row groups (<thead>, <tbody>, and <tfoot>). According to specification, collapse should remove the hidden element (same as display: none) and make the space available for other elements to claim. Regrettably, not all major browsers follow the specification for this value. Setting the display property to none results in more consistent browser behavior and should be used instead.
opacity
The opacity property can make an element and its content transparent.
opacity : <number>
A decimal value between 0.0 and 1.0 is used to set the transparency. With a value of 1, the element is opaque; 0 renders the element fully transparent, or invisible.
.half-transparent { opacity: 0.5;}
Support for this CSS 3 property is included in Chrome 1+, Firefox 1+, Safari 1.2+, Opera 9+, and IE 9+. IE support can be enhanced using the following filter:
.half-transparent {
filter: alpha(opacity=50); /* IE 5-8 */
opacity: 0.5;
}
float
The float property detaches an element from its containing element and makes it float on top of it, either to the left or right side. It is intended for wrapping text around images and was also commonly used for making layouts before more modern layout methods became available. Floating an inline element automatically changes it into a block element.
float : none | left | right
To have text and other inline content wrap around an image, you can float it to the left or right.
Floats allow block. elements to be lined up horizontally. For instance, a grid of boxes can be created with the following class:
.box {
float: left;
width: 100px;
height: 100px;
margin: 0 1em;
background: #ccc;
border-radius: 10px;
}
This class makes boxes stack up horizontally instead of vertically, which is the normal behavior for block elements (see Figure 22-2).
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
Figure 22-2
Floated boxes
A side effect of using floats. is that any element that follows these floated boxes also lines up horizontally. The clear property is designed to stop this behavior.
clear
The clear property is used to clear floating elements from the left, right, or both sides of an element.
clear (block) : none | left | right | both
This property is commonly given its own class that has the same name as the property.
.clear { clear: both; }
An empty div container with the clear class is typically placed after the floated elements. This cleared element is moved below the floating elements instead of appearing next to them.
<div class="clear"></div>
Because floated layouts tend to be complex and fragile they have largely been superseded by other more modern layout methods, such as the flexbox and grid modules.
cursor
The cursor property specifies what cursor users see when they hover over an element. The default value is auto, meaning that the browser decides what cursor to use. Standard cursor values and their appearance can be seen in Table 22-1.
Table 22-1
Standard cursor values
In addition to these values, custom cursors can be defined using the url function. If this cursor is not available, a generic cursor can be specified after the custom one, separated by a comma.
