Comprehensive list of CSS layout properties: display, position and float

CSS layout properties: display, position and float

CSS is a markup language used to control the style of web pages. Layout properties are very important when designing web page layout. CSS provides a variety of layout properties, the most commonly used of which are display, position and float. In this article, we will introduce these three layout properties in detail and provide specific code examples.

1. display attribute
   The display attribute is used to specify the display type of the element. Common display attribute values ​​are as follows:

1.1. block
The block element occupies an exclusive line, always starts from a new line, and fills the width of the parent element. For example, the dc6dce4a544fdca2df29d5ac0ea9906b element is a typical block element.

div {
  display: block;
}

1.2. inline
The inline element will not occupy a line by itself, but only takes up the space it needs. For example, the 45a2772a6b6107b401db3c9b82c049c2 element is a typical inline element.

span {
  display: inline;
}

1.3. inline-block
The inline-block element will not occupy a row, but the width and height can be set. For example, the a1f02c36ba31691bcfe87b2722de723b element is a typical inline-block element.

img {
  display: inline-block;
}

1.4. none
none elements will not be displayed and will be removed from the document flow. For example, you can hide an element by setting display: none.

.hidden {
  display: none;
}

2. position attribute
   The position attribute is used to specify how an element is positioned. Common position attribute values ​​are as follows:

2.1. static
static is the default positioning method, and elements are laid out in the order of the document flow.

div {
  position: static;
}

2.2. relative
relative Position relative to its own initial position. The position of an element can be adjusted by using the top, bottom, left and right properties.

div {
  position: relative;
  top: 10px;
  left: 20px;
}

2.3. absolute
absolute Positioning relative to the parent element, or positioning relative to the nearest ancestor element with positioning attributes (position is not static).

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.4. fixed
fixed is positioned relative to the browser window and will not change position as the scroll bar scrolls.

div {
  position: fixed;
  top: 0;
  right: 0;
}

3. float attribute
   The float attribute is used to specify how the element floats. When an element is set to float, it is taken out of the normal document flow and floated as far left or right as possible. Other elements will be laid out around the floated element.

img {
  float: left;
}

The above is the introduction and code examples of the three common layout properties of display, position and float. In practice, we can choose which layout attribute to use based on specific needs to achieve web page layout design. I hope this article can provide readers with some help in CSS layout.

The above is the detailed content of Comprehensive list of CSS layout properties: display, position and float. For more information, please follow other related articles on the PHP Chinese website!