CSS floating positioning and background style

1. Floating

1. The basic concept of floating

In CSS, float is an element positioning property.
By setting an element's float property, you can cause an element to break out of the normal document flow and float left or right to a specified position within its container.

Floated elements are placed as close to the left or right side of the container as possible, and other content wraps around them. You can create multi-column layouts, mixed graphics and text effects, etc.

The commonly used properties of floating elements are as follows:

float: left; – Floats the element to the left.
float: right; – Floats the element to the right.
When an element is floated, it will try to stay as close to the edge of the container as possible, and the surrounding content will be re-layouted to fit the position of the floated element. However, it should be noted that floating elements do not occupy the space of normal document flow, which may cause elements after the floating element to overlap with the floating element.

2. Use floating to achieve web page layout

When using floats to implement web page layout, the following steps can generally be followed:

1). Determine the overall structure of the page : First, determine the structure of the entire page, including the top navigation bar, sidebar, main content area, etc. This helps to design a logical layout.

2). Create a layout container : Create a container element as the container of the entire layout. A div element or other suitable HTML element can be used as the layout container.

3). Set the style of the container : Add a style to the layout container, set the width, height, background color and other attributes of the container, and adjust it as needed.

4). Floating elements : Set the elements that need to be floated to the floating state, so that they float relative to the layout container. For example, use float: left;or float: right;.

5). Determining the layout order : Adjust the order of the floating elements in the HTML structure as required
to achieve the display effect of the elements on the page. Later floated elements may cover or stack on top of previous elements.

6). Clear floating : At the end of the layout container, add an element or set the style of clear floating to ensure that the layout container can correctly contain floating elements. Such as using clear: both;or other techniques to clear floats.

7). Style adjustment and layout optimization : Perform style adjustment and layout optimization as needed, such as adding margins, setting width, adjusting element positions, etc., to achieve the desired layout effect.

8). Responsive design :
Combine floating layout with media query to make the layout have good responsiveness under different screen sizes. You can adjust the width of the layout container, rearrange elements, etc. according to the screen size.

Example:

<style>
.container {
      
      
  width: 800px;
  margin: 0 auto;
}

.header {
      
      
  height: 100px;
  background-color: #ccc;
}

.sidebar {
      
      
  width: 200px;
  float: left;
  background-color: #f2f2f2;
}

.content {
      
      
  width: 600px;
  float: right;
  background-color: #fff;
}

.footer {
      
      
  clear: both;
  height: 50px;
  background-color: #ddd;
}
</style>

<div class="container">
  <div class="header">
    <!-- 头部内容 -->
  </div>
  
  <div class="sidebar">
    <!-- 侧边栏内容 -->
  </div>
  
  <div class="content">
    <!-- 主要内容区域 -->
  </div>
  
  <div class="footer">
    <!-- 底部内容 -->
  </div>
</div>

3. BFC specification and browser differences

1). BFC (Block Formatting Context) is a page rendering mode for managing and laying out block-level boxes.
2). BFC defines how block-level boxes are positioned, interact with each other and the relationship with other elements.
3). BFC has some characteristics, such as the inner boxes are placed one after another in the vertical direction, margins overlap, do not overlap with floating elements, etc.
4). Different browsers may have differences in the details of BFC implementation, such as margin overlap processing, clear floating rules, and BFC generation conditions.
5). You can use the CSS reset style library to standardize the behavior between browsers, or use modern CSS layout techniques (such as Flexbox and Grid) to reduce the dependence on BFC.
6). By understanding the basic characteristics of BFC and browser differences, we can better handle web page layout and ensure consistency and reliability.

4. Clear float

1). Use the clearfix class (generic):
Define a clearfix class to clear the float through the pseudo-element::after:

<style>
.clearfix::after {
      
      
  content: "";
  display: table;
  clear: both;
}
</style>

<div class="clearfix">
  <!-- 需要清除浮动的内容 -->
</div>

2). Use the overflow attribute:
set the container containing the floating element to overflow: auto;or overflow: hidden;. This triggers the BFC, which automatically clears the float.

<style>
.container {
      
      
  overflow: auto;
}
</style>

<div class="container">
  <!-- 包含浮动元素的容器 -->
</div>

This method adjusts the way scrollbars are displayed by adding additional styles.

3). Use the display property:
set the container containing the floating element to display: flow-root;. This creates a new Block Formatting Context (BFC), and clears the floats.

<style>
.container {
      
      
  display: flow-root;
}
</style>

<div class="container">
  <!-- 包含浮动元素的容器 -->
</div>

2. Positioning

1. Relative positioning

Relative Positioning (Relative Positioning) is a commonly used positioning method in CSS. Under relative positioning, an element is offset relative to its original position, but it does not affect the layout of other elements.

Steps:
1). Set relative positioning: Set the attribute
of the element to convert the element to relative positioning.positionrelative

<style>
.box {
      
      
  position: relative;
}
</style>

<div class="box">
  <!-- 相对定位的内容 -->
</div>

2). Original position preservation:
The key feature of relative positioning is that the element remains in the document flow and does not change the layout of other elements. It still occupies the original space and does not cover or affect other elements.

3). Offset adjustment:
By setting the top, right, bottomand leftattributes of the relatively positioned element, the offset of the element relative to its original position can be adjusted.

<style>
.box {
      
      
  position: relative;
  top: 20px;
  left: 30px;
}
</style>

<div class="box">
  <!-- 相对定位的内容 -->
</div>

4). Element hierarchy and document flow:
Relative positioning does not change the hierarchical relationship of elements. It remains in the normal document flow, and other elements are laid out and arranged according to the normal document flow.

Note: Relative positioning is often used to fine-tune the position of an element, or to provide a reference point for absolutely positioned elements. It is often used in combination with other positioning methods such as absolute positioning and floating to achieve more complex page layout effects.

2. Absolute positioning

Absolute Positioning (Absolute Positioning) is a commonly used positioning method in CSS, which can accurately position an element relative to a document or container according to its nearest non-statically positioned ancestor element.

step:

1. Set the positioning of the ancestor element:
   In order to position the child element relative to the ancestor element, you first need to set positionthe attribute of the ancestor element to statica value other than . Usually choose relativeor other positioning methods.

2. Set absolute positioning: Set the attribute
   of the element that requires absolute positioning to .positionabsolute

3. Positioning offsets:
   Use topthe , right, bottomand leftattributes to adjust the position of an element relative to its ancestors. These properties can be in pixels (px), percentages (%), or other valid CSS units.

<style>
.container {
      
      
  position: relative;
  width: 400px;
  height: 300px;
}

.box {
      
      
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<div class="container">
  <div class="box">
    <!-- 绝对定位的内容 -->
  </div>
</div>

Precautions:

• Absolute positioning breaks out of the document flow, so other elements are not affected by it.
• Absolute positioning positions relative to the document when no non-static positioning exists for an ancestor element.
• Absolutely positioned elements may cover other elements during rendering, please use with caution.
• Absolute positioning is usually used for elements that require precise control of position, such as popup boxes, drop-down menus, etc.

3. Fixed positioning

Fixed Positioning (Fixed Positioning) is a commonly used positioning method in CSS, which can position elements relative to the viewport or browser window without changing the position as the page scrolls.

step:

1. Set the positioning method of the element: set the property
   of the element that needs fixed positioning to .positionfixed

2. Positioning offsets:
   Use the top, right, bottomand leftproperties to adjust the position of an element relative to the viewport or browser window. These properties can be in pixels (px), percentages (%), or other valid CSS units.

<style>
.box {
      
      
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<div class="box">
  <!-- 固定定位的内容 -->
</div>

Precautions:

• Fixed positioned elements are taken out of the document flow so other elements are not affected by them.
• Fixed positioned elements stay in a fixed position when the page is scrolled.
• Fixed positioning is usually used for elements that need to stay in a specific position on the screen, such as navigation bars, back to top buttons, etc.

3. Background style

1. Border and rounded corners

1) Three elements of the frame

A border is a line or area used in CSS to surround the content of an element. A border has three elements that describe the style, width and color of the border:

1. Border Style:
   The border style defines the appearance of the border lines. Common border styles include solid, dashed, dotted, double, etc.

.box {
    
    
  border-style: solid;
}

2. Border Width:
   The border width controls the thickness of the border lines. You can use pixels (px) as the unit, or use predefined values ​​such as thin, medium, thick.

.box {
    
    
  border-width: 2px;
}

3. Border Color:
   The border color determines the color of the border lines. Border colors can be specified using color names, hex codes, RGB values, etc.

.box {
    
    
  border-color: red;
}

The property can also be combined borderto set the style, width, and color of the border at the same time.

For example, the following code sample sets .boxthe border style of the element to solid, with a border width of 2 pixels, and with a red border color:

.box {
    
    
  border: 2px solid red;
}

2) Borders in four directions

Borders can be set in four directions of an element, namely top, right, bottom and left. Borders with different effects can be created by specifying an appropriate style, width, and color for each direction.

Example:

.box {
    
    
  border-top: 2px solid red;    /* 上部边框:宽度为2像素、红色边框线条 */
  border-right: 1px dashed blue; /* 右侧边框:宽度为1像素、虚线样式、蓝色边框线条 */
  border-bottom: 3px dotted green; /* 下部边框:宽度为3像素、点线样式、绿色边框线条 */
  border-left: 1px solid yellow; /* 左侧边框:宽度为1像素、实线样式、黄色边框线条 */
}

The border properties of these four directions can be set individually, or they can be borderset together using the property. When using borderthe attribute, the order of its values ​​corresponds to the borders in the four directions of top, right, bottom, and left.

For example:

.box {
    
    
  border: 2px solid red;    /* 设置所有方向的边框:2像素、实线样式、红色边框线条 */
}

3) Fillet

Border Radius is a commonly used style property in CSS, which can create a rounded corner effect for the border of an element. Use rounded corners to smooth and round the corners of borders or elements.

The size and shape of the rounded corners can be controlled by setting border-radiusthe property. This property accepts one value or four values ​​specifying the horizontal and vertical radii of the corners.

Example:

1. Set the same horizontal and vertical radius:

.box {
    
    
  border-radius: 10px; /* 将 `.box` 元素的四个角都设置为相同的水平和垂直半径，即创建出一个相对于边框厚度的圆角
 */
}

2. Set the horizontal and vertical radii separately:

.box {
    
    
  border-radius: 10px 20px;/* 左上角和右下角设置为10像素的水平半径，右上角和左下角设置为20像素的水平半径
 */
}

Sets .boxthe top-left and bottom-right corners of the element to a horizontal radius of 10 pixels, and the top-right and bottom-left corners to a horizontal radius of 20 pixels.

3. Set the horizontal and vertical radii for each corner separately:

.box {
    
    
  border-radius: 10px 20px 30px 40px;
  /* 左上角设置为 10 像素的水平半径和垂直半径，右上角设置为 20 像素的水平半径和垂直半径，右下角设置为 30 像素的水平半径和垂直半径，左下角设置为 40 像素的水平半径和垂直半径
 */
}

If only one value is specified, all four corners have the same horizontal and vertical radii. At the same time, you can also use percentages or other effective length units to define the size of the fillet.

4) Box Shadow

Box Shadow (Box Shadow) is a CSS property used to create shadow effects on elements. By setting box-shadowproperties, you can add shadows to elements to make them appear to float or have a three-dimensional effect.

Use box-shadowthe properties to control the shadow's position, blur, extension size, and color.

The general format of a box-shadow property:

box-shadow: h-shadow v-shadow blur spread color;

• h-shadow: The position of the horizontal shadow, which can be positive (offset to the right) or negative (offset to the left).
• v-shadow: The position of the vertical shadow, which can be positive (offset down) or negative (offset up).
• blur: The blur radius of the shadow, the larger the value, the more blurred.
• spread: The expanded size of the shadow, which can be positive or negative.
• color: The color of the shadow.

Example:

.box {
    
    
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
   /* .box元素的阴影位于右下方，水平偏移量为2px，垂直偏移量为2px，模糊半径为4px，颜色为透明黑色（ RGBA 值为 `rgba(0, 0, 0, 0.2)`）
 */
}

2. Backgrounds and Gradients

• background basics
  1. background color

Example:

.box {
    
    
  background-color: #ff0000;     /* 使用十六进制值 */
}

.box {
    
    
  background-color: rgb(255, 0, 0);     /* 使用RGB值 */
}

.box {
    
    
  background-color: rgba(255, 0, 0, 0.5);    /* 使用RGBA值（带透明度） */
}

.box {
    
    
  background-color: white;      /* 使用颜色名称 */
}

By adjusting background-colorthe value, you can set a different background color for the element. Background colors can be used to separate elements, highlight them, beautify a design, and create visual effect and style.

• • 2. Background picture

In CSS, background-imagebackground images are applied to elements using properties. By setting this property, choose an image as the element's background.

Example:

.box {
    
    
  background-image: url("image.jpg");
}

The path of the background image can be a relative path or an absolute path. If the image and the CSS file are in the same directory, the file name can be used directly. Otherwise, a correct relative or absolute path needs to be provided.

• Background Image Advanced Properties

1. background-attachment: Controls the scrolling behavior of the background image. Default is scroll(background will scroll with page), can also be set to fixed(background fixed to viewport), or local(background fixed relative to element).

2. background-origin: Define the starting position of the background positioning area. Default is yes padding-box, can also be set to content-box(position relative to content box) or border-box(position relative to border box).

3. background-clip: Define the range of background drawing. Default is yes border-box, can also be set to padding-box(draw to padding box) or content-box(draw to content box).

4. background-blend-mode: Specifies the blending mode of the background image and the background color. Various blending modes are available, such as normal, multiply, , overlayetc.

These properties can be background-imageused together with to achieve more complex and personalized background image effects by adjusting their values. For example:

.box {
    
    
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-origin: content-box;
  background-clip: padding-box;
  background-blend-mode: multiply;
}

• background comprehensive property

In CSS, backgroundproperties can be used to comprehensively set multiple background-related properties. It is more convenient to set multiple background properties such as background image, color, repeat method, and position at one time.

Format:

.box {
    
    
  background: background-color background-image background-repeat background-position / background-size background-origin background-clip background-attachment;
}

Example:

.box {
    
    
  background: red url("image.jpg") no-repeat center center / cover content-box padding-box fixed;
  /* `.box` 元素的背景被设置为红色背景颜色，使用名为 "image.jpg" 的图片作为背景图片，不进行平铺重复，居中显示，调整大小以覆盖整个元素的背景区域，背景定位区域从内容框开始，绘制范围为内边距框，背景图片被固定在视口 */
}

• gradient background

Gradient Background refers to the use of gradient effects in the background to transition from one color or value to another. In CSS, you can use linear gradients and radial gradients to create various gradient background effects.

1. Linear Gradient:

   Linear gradients transition from one point to another, either horizontally, vertically, or diagonally. Use linear-gradient()functions to define linear gradient backgrounds.

Example:

.box {
    
    
  background: linear-gradient(red, blue);
  /* 从红色渐变到蓝色的线性渐变 */
}

2. Radial Gradient (Radial Gradient):
   The radial gradient spreads from a central point to the surrounding gradient, which can create a radial, elliptical or circular gradient effect. Use radial-gradient()the function to define a radial gradient background.

example:

.box {
    
    
  background: radial-gradient(circle at center, red, blue);
  /* 以中心点为圆心、红色渐变到蓝色的径向渐变 */
}

3. Conversion between 2D and 3D

1) 2D deformation

2D Transformations (2D Transformations) refer to operations such as translation, rotation, scaling, and tilting of elements in CSS to change the shape, position, and size of elements.
In CSS, use transformthe property to achieve 2D transformations.

Common 2D deformation methods:

1. Translate: Translate the element along the X and Y axes by specifying displacement values ​​in the horizontal and vertical directions.

.box {
    
    
  transform: translate(50px, 100px);  /*向右平移50像素，向下平移100像素 */
}

2. Rotate: Rotate the element by specifying the rotation angle, in degrees.

.box {
    
    
  transform: rotate(45deg);/* 被顺时针旋转45度 */
}

3. Scale: Zoom in or out the element by specifying the zoom ratio.

.box {
    
    
  transform: scale(1.5); /* 放大到原始大小的1.5倍 */
}

4. Skew: Skews an element by specifying the horizontal and vertical skew angles, in degrees.

.box {
    
    
  transform: skew(30deg, -10deg);/* 水平方向倾斜30度，垂直方向倾斜-10度 */
}

transformThe above are just some basic examples of 2D deformations using the attribute. You can further control and customize the element's transformation effect by combining different transformation methods, or adding other properties such as transform-originand . transform-originBy adjusting transformthe value in , various interesting 2D deformation effects can be created.

2) 3D deformation

3D Transformations (3D Transformations) refer to operations such as depth, rotation, and perspective on elements in CSS, so that elements can undergo three-dimensional transformations in three-dimensional space.
In CSS, use transformthe property to achieve 3D deformation.

Commonly used 3D deformation methods:

1. Translate (Translate3D): By specifying displacement values ​​​​along the X-axis, Y-axis, and Z-axis, the element is translated along the corresponding axis.

.box {
    
    
  transform: translate3d(50px, 100px, 0);/* 向右平移50像素，向下平移100像素，Z轴的位移值设置为0，表示在二维平面上进行平移*/
}

2. Rotate (Rotate3D): Rotate the element by specifying the rotation angle around the specified axis.

.box {
    
    
  transform: rotate3d(1, 1, 1, 45deg);/* 围绕向量 (1, 1, 1) 旋转，并以45度的角度执行旋转操作 */
}

3. Scale (Scale3D): Scales the element by specifying the scale along the X, Y, and Z axes.

.box {
    
    
  transform: scale3d(1.5, 1.5, 1.5);/* 三个轴上进行1.5倍等比例缩放 */ 
}

4. Perspective: Create a 3D effect by specifying a perspective distance, giving elements a more realistic sense of space.

.container {
    
    
  perspective: 500px;/* 透视距离被设置为500像素 */
}

.box {
    
    
  transform: rotateY(45deg);/* 绕Y轴旋转45度 */
}