CSS浮动定位与背景样式

一、浮动

1. 浮动的基本概念

在CSS中，浮动（float）是一种元素定位的属性。
通过设置元素的浮动属性，可以使元素脱离正常文档流，并向左或向右浮动到其容器内的指定位置。

浮动元素会尽可能地靠近容器的左侧或右侧，并且其他内容会环绕在其周围。可以创建多列布局、图文混排等效果。

浮动元素常用的属性如下：

float: left; – 将元素向左浮动。
float: right; – 将元素向右浮动。
当元素浮动时，它会尽量靠近容器的边缘，并且周围的内容会被重新布局以适应浮动元素的位置。但需要注意的是，浮动元素不会占据正常文档流的空间，这可能导致浮动元素之后的元素与浮动元素重叠。

2. 使用浮动实现网页布局

当使用浮动实现网页布局时，通常可以遵循以下步骤：

1). 确定页面的整体结构： 首先，确定整个页面的结构，包括顶部导航栏、侧边栏、主要内容区域等。这有助于设计出合理的布局。

2). 创建布局容器： 创建一个容器元素，作为整个布局的容器。可以使用一个 div 元素或其他合适的 HTML 元素来充当布局容器。

3). 设置容器的样式： 给布局容器添加样式，设置容器的宽度、高度、背景色等属性，根据需要进行调整。

4). 将元素浮动： 将需要浮动的元素设置为浮动状态，以使其相对于布局容器浮动。比如使用 float: left; 或 float: right;。

5). 确定布局顺序： 根据需要，调整浮动元素在 HTML
结构中的顺序，以实现元素在页面上的显示效果。靠后的浮动元素可能会覆盖或堆叠在前面的元素之上。

6). 清除浮动： 在布局容器内的结尾处，添加一个元素或设置清除浮动的样式，以确保布局容器可以正确地包含浮动元素。比如使用 clear: both; 或其他清除浮动的技术。

7). 样式调整和布局优化： 根据需要进行样式调整和布局优化，如添加边距、设定宽度、调整元素的位置等，以达到所需的布局效果。

8). 响应式设计：
将浮动布局与媒体查询结合使用，使布局在不同屏幕尺寸下具有良好的响应性。可以根据屏幕大小调整布局容器的宽度、重新排列元素等。

示例:

<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规范和浏览器差异

1). BFC（Block Formatting Context）是一种页面渲染模式，用于管理和布局块级盒子。
2). BFC定义了块级盒子如何定位、相互影响以及与其他元素之间的关系。
3). BFC具有一些特性，如内部盒子垂直方向一个接一个地放置、边距重叠、不与浮动元素重叠等。
4). 不同浏览器对于BFC实现的细节可能存在差异，比如边距重叠处理、清除浮动规则和BFC生成条件等。
5). 可以使用CSS reset样式库来规范浏览器之间的行为，或者采用现代的CSS布局技术（如Flexbox和Grid）来减少对BFC的依赖。
6). 通过理解BFC的基本特性和浏览器差异，能够更好地处理网页布局并确保一致性和可靠性。

4. 清除浮动

1).使用clearfix类(通用)：
定义一个clearfix类，通过伪元素::after来清除浮动：

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

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

2). 使用overflow属性：
将包含浮动元素的容器设置为overflow: auto;或overflow: hidden;。这会触发BFC，自动清除浮动。

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

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

这种方法可通过添加额外的样式调整滚动条的显示方式。

3). 使用display属性：
将包含浮动元素的容器设置为display: flow-root;。这会创建一个新的块级格式上下文（BFC），并清除浮动。

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

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

二、定位

1. 相对定位

相对定位（Relative Positioning）是 CSS中一种常用的定位方式。在相对定位下，元素会相对于其原始位置进行偏移，但并不会影响其他元素的布局。

步骤：
1). 设置相对定位：
将元素的 position 属性设置为 relative，将元素转换为相对定位。

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

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

2). 原始位置保留：
相对定位的关键特点是，元素保持在文档流中，并且不改变其他元素的布局。它依然占据原来的空间，不会覆盖或影响其他元素。

3). 偏移调整：
通过设置相对定位元素的 top、right、bottom 和 left 属性，可以调整元素相对于其原始位置的偏移量。

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

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

4). 元素层级和文档流：
相对定位并不会改变元素的层级关系。它仍然保持在正常的文档流中，其他元素会根据正常的文档流进行布局和排列。

注:相对定位通常用于微调元素的位置，或为绝对定位元素提供参考点。它经常与绝对定位、浮动等其他定位方式结合使用，以实现更复杂的页面布局效果。

2. 绝对定位

绝对定位（Absolute Positioning）是在 CSS中一种常用的定位方式，可以根据其最近的非静态定位祖先元素，将元素相对于文档或容器进行精确定位。

步骤：

1. 设置祖先元素的定位：
   为了让子元素相对于祖先元素进行定位，首先需要设置祖先元素的 position 属性为非 static 的值。通常会选择 relative 或者其他定位方式。

2. 设置绝对定位：
   将需要进行绝对定位的元素的 position 属性设置为 absolute。

3. 定位偏移量：
   使用 top、right、bottom 和 left 属性来调整元素相对于祖先元素的位置。这些属性可以采用像素（px）、百分比（%）或其他有效的 CSS 单位。

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

注意事项：

• 绝对定位会脱离文档流，因此其他元素不会受到其影响。
• 当祖先元素不存在非静态定位时，绝对定位会相对于文档进行定位。
• 绝对定位的元素在渲染过程中可能会覆盖其他元素，请谨慎使用。
• 绝对定位通常用于需要精确控制位置的元素，如弹出框、下拉菜单等。

3. 固定定位

固定定位（Fixed Positioning）是 CSS中一种常用的定位方式，可以将元素相对于视口或浏览器窗口进行定位，而不会随页面滚动而改变位置。

步骤：

1. 设置元素的定位方式：
   将需要进行固定定位的元素的 position 属性设置为 fixed。

2. 定位偏移量：
   使用 top、right、bottom 和 left 属性来调整元素相对于视口或浏览器窗口的位置。这些属性可以采用像素（px）、百分比（%）或其他有效的 CSS 单位。

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

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

注意事项：

• 固定定位的元素会脱离文档流，因此其他元素不会受到其影响。
• 固定定位的元素在页面滚动时会保持在固定位置不动。
• 固定定位通常用于需要保持在屏幕上某个特定位置的元素，如导航栏、回到顶部按钮等。

三、背景样式

1. 边框与圆角

1) 边框的三要素

边框（Border）是在 CSS 中用于围绕元素内容的线条或区域。边框具有三个要素，描述了边框的样式、宽度和颜色：

1. 边框样式（Border Style）：
   边框样式定义了边框线条的外观。常见的边框样式包括实线（solid）、虚线（dashed）、点线（dotted）、双线（double）等。

.box {
    
    
  border-style: solid;
}

2. 边框宽度（Border Width）：
   边框宽度控制了边框线条的粗细程度。可以使用像素（px）作为单位，或者使用预定义的值，如 thin、medium、thick。

.box {
    
    
  border-width: 2px;
}

3. 边框颜色（Border Color）：
   边框颜色决定了边框线条的颜色。可以使用颜色名称、十六进制代码、RGB 值等方式来指定边框颜色。

.box {
    
    
  border-color: red;
}

还可以结合使用 border 属性来同时设置边框的样式、宽度和颜色。

例如，下面的代码示例将.box 元素的边框样式设置为实线、边框宽度为2像素、边框颜色为红色：

.box {
    
    
  border: 2px solid red;
}

2) 四个方向的边框

边框（Border）可以在元素的四个方向上设置，即上部、右侧、下部和左侧。通过为每个方向指定相应的样式、宽度和颜色，可以创建具有不同效果的边框。

示例：

.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像素、实线样式、黄色边框线条 */
}

这四个方向的边框属性可以单独设置，也可以一起使用 border 属性来设置。使用 border 属性时，其值的顺序分别对应上、右、下、左四个方向的边框。

例如：

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

3) 圆角

圆角（Border Radius）是 CSS中一种常用的样式属性，可以为元素的边框创建圆角效果。使用圆角可以让边框或元素的角变得平滑和圆润。

可以通过设置 border-radius 属性来控制圆角的大小和形状。这个属性接受一个值或四个值，用于指定圆角的水平半径和垂直半径。

示例：

1. 设置相同的水平和垂直半径：

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

2. 分别设置水平和垂直半径：

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

将 .box 元素的左上角和右下角设置为10像素的水平半径，右上角和左下角设置为20像素的水平半径。

3. 分别设置每个角的水平和垂直半径：

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

如果只指定一个值，则四个角都采用相同的水平和垂直半径。同时，还可以使用百分比或其他有效的长度单位来定义圆角的尺寸。

4) 盒子阴影

盒子阴影（Box Shadow）是 CSS 中一种用于创建元素阴影效果的属性。通过设置 box-shadow属性，可以向元素添加阴影，使其看起来浮起来或具有立体感。

使用 box-shadow 属性来控制阴影的位置、模糊度、扩展大小和颜色。

盒子阴影属性的一般格式：

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

• h-shadow：水平阴影的位置，可以为正值（向右偏移）或负值（向左偏移）。
• v-shadow：垂直阴影的位置，可以为正值（向下偏移）或负值（向上偏移）。
• blur：阴影的模糊半径，值越大越模糊。
• spread：阴影的扩展大小，可以为正值或负值。
• color：阴影的颜色。

示例：

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

2. 背景与渐变

• 背景基础知识
  1. 背景颜色

示例：

.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;      /* 使用颜色名称 */
}

通过调整 background-color 的值，可以给元素设置不同的背景颜色。背景颜色可以用于分隔元素、突出显示、美化设计，以及创建视觉效果和风格。

• • 2. 背景图片

在CSS中，使用 background-image属性将背景图片应用到元素上。通过设置该属性，选择一个图片作为元素的背景。

示例：

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

背景图片的路径可以是相对路径或绝对路径。如果图片与 CSS 文件在同一目录下，可以直接使用文件名。否则，需要提供正确的相对或绝对路径。

• 背景图片高级属性

1. background-attachment：控制背景图片的滚动行为。默认值是 scroll（背景会随页面滚动），还可以设置为 fixed（背景固定在视口），或 local（背景相对于元素固定）。

2. background-origin：定义背景定位区域的起始位置。默认值是 padding-box，也可以设置为 content-box（相对于内容框定位）或 border-box（相对于边框框定位）。

3. background-clip：定义背景绘制的范围。默认值是 border-box，也可以设置为 padding-box（绘制到内边距框）或 content-box（绘制到内容框）。

4. background-blend-mode：指定背景图片与背景颜色混合的模式。可以使用各种混合模式，如 normal、multiply、overlay 等。

这些属性可以与 background-image 一起使用，通过调整其值来实现更复杂、个性化的背景图片效果。例如：

.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综合属性

在 CSS 中，可以使用 background属性将多个背景相关的属性进行综合设置。可以更方便地一次性设置背景图片、颜色、重复方式、位置等多个背景属性。

格式：

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

示例：

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

• 渐变背景

渐变背景（Gradient Background）是指在背景中使用渐变效果，从一个颜色或值过渡到另一个颜色或值。在 CSS中，可以使用线性渐变和径向渐变来创建各种渐变背景效果。

1. 线性渐变（Linear Gradient）：

   线性渐变从一个点到另一个点之间进行渐变，可以沿着水平、垂直或对角线方向进行。使用 linear-gradient()函数来定义线性渐变背景。

示例：

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

2. 径向渐变（Radial Gradient）：
   径向渐变从一个中心点向周围扩散进行渐变，可以创建辐射状、椭圆状或圆形的渐变效果。使用 radial-gradient() 函数来定义径向渐变背景。

例：

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

3. 2D与3D的转换

1) 2D变形

2D变形（2D Transformations）是指在CSS中对元素进行平移、旋转、缩放和倾斜等操作，以改变元素的形状、位置和大小。
在CSS中，使用 transform 属性来实现2D变形。

常见的2D变形方法：

1. 平移（Translate）：通过指定水平和垂直方向上的位移值，将元素沿着X轴和Y轴进行平移。

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

2. 旋转（Rotate）：通过指定旋转角度，以度数为单位，对元素进行旋转。

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

3. 缩放（Scale）：通过指定缩放比例，对元素进行放大或缩小。

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

4. 倾斜（Skew）：通过指定水平和垂直方向上的倾斜角度，以度数为单位，对元素进行倾斜。

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

以上只是使用 transform 属性进行2D变形的一些基本示例。可以通过组合使用不同的变换方法，或添加其他属性（如 transform-origin 和 transform-origin）来进一步控制和定制元素的变形效果。通过调整 transform 中的值，可以创建出各种有趣的2D变形效果。

2) 3D变形

3D变形（3DTransformations）是指在CSS中对元素进行深度、旋转和透视等操作，以使元素能够在三维空间中进行具有立体感的变换。
在CSS中，使用 transform 属性来实现3D变形。

常用的3D变形方法：

1. 平移（Translate3D）：通过指定沿X轴、Y轴和Z轴的位移值，将元素沿相应轴进行平移。

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

2. 旋转（Rotate3D）：通过指定绕指定轴的旋转角度对元素进行旋转。

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

3. 缩放（Scale3D）：通过指定沿X轴、Y轴和Z轴的缩放比例对元素进行缩放。

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

4. 透视（Perspective）：通过指定透视距离来创建3D效果，使元素具有更真实的空间感。

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

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