Comprehensive list of CSS layout properties: display, position and float-CSS Tutorial-php.cn

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

WBOY

Release： 2023-10-20 17:36:25

Original

879 people have browsed it

CSS 布局属性大全：display，position 和 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.

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

element is a typical block element.

div {
  display: block;
}

Copy after login

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

span {
  display: inline;
}

Copy after login

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

img {
  display: inline-block;
}

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!