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中一种常用的定位方式，可以根据其最近的非静态定位祖先元素，将元素相对于文档或容器进行精确定位。
步骤：
-
设置祖先元素的定位：
为了让子元素相对于祖先元素进行定位，首先需要设置祖先元素的position属性为非static的值。通常会选择relative或者其他定位方式。 -
设置绝对定位：
将需要进行绝对定位的元素的position属性设置为absolute。 -
定位偏移量：
使用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中一种常用的定位方式，可以将元素相对于视口或浏览器窗口进行定位，而不会随页面滚动而改变位置。
步骤：
-
设置元素的定位方式：
将需要进行固定定位的元素的position属性设置为fixed。 -
定位偏移量：
使用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 中用于围绕元素内容的线条或区域。边框具有三个要素，描述了边框的样式、宽度和颜色：
- 边框样式（Border Style）：
边框样式定义了边框线条的外观。常见的边框样式包括实线（solid）、虚线（dashed）、点线（dotted）、双线（double）等。
.box {
border-style: solid;
}
- 边框宽度（Border Width）：
边框宽度控制了边框线条的粗细程度。可以使用像素（px）作为单位，或者使用预定义的值，如 thin、medium、thick。
.box {
border-width: 2px;
}
- 边框颜色（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 属性来控制圆角的大小和形状。这个属性接受一个值或四个值，用于指定圆角的水平半径和垂直半径。
示例：
- 设置相同的水平和垂直半径：
.box {
border-radius: 10px; /* 将 `.box` 元素的四个角都设置为相同的水平和垂直半径，即创建出一个相对于边框厚度的圆角
*/
}
- 分别设置水平和垂直半径：
.box {
border-radius: 10px 20px;/* 左上角和右下角设置为10像素的水平半径，右上角和左下角设置为20像素的水平半径
*/
}
将 .box 元素的左上角和右下角设置为10像素的水平半径，右上角和左下角设置为20像素的水平半径。
- 分别设置每个角的水平和垂直半径：
.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. 背景与渐变
- 背景基础知识
- 背景颜色
示例：
.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 的值，可以给元素设置不同的背景颜色。背景颜色可以用于分隔元素、突出显示、美化设计，以及创建视觉效果和风格。
-
-
- 背景图片
-
在CSS中，使用
background-image属性将背景图片应用到元素上。通过设置该属性，选择一个图片作为元素的背景。
示例：
.box {
background-image: url("image.jpg");
}
背景图片的路径可以是相对路径或绝对路径。如果图片与 CSS 文件在同一目录下，可以直接使用文件名。否则，需要提供正确的相对或绝对路径。
- 背景图片高级属性
-
background-attachment：控制背景图片的滚动行为。默认值是scroll（背景会随页面滚动），还可以设置为fixed（背景固定在视口），或local（背景相对于元素固定）。 -
background-origin：定义背景定位区域的起始位置。默认值是padding-box，也可以设置为content-box（相对于内容框定位）或border-box（相对于边框框定位）。 -
background-clip：定义背景绘制的范围。默认值是border-box，也可以设置为padding-box（绘制到内边距框）或content-box（绘制到内容框）。 -
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中，可以使用线性渐变和径向渐变来创建各种渐变背景效果。
-
线性渐变（Linear Gradient）：
线性渐变从一个点到另一个点之间进行渐变，可以沿着水平、垂直或对角线方向进行。使用
linear-gradient()函数来定义线性渐变背景。
示例：
.box {
background: linear-gradient(red, blue);
/* 从红色渐变到蓝色的线性渐变 */
}
- 径向渐变（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变形方法：
- 平移（Translate）：通过指定水平和垂直方向上的位移值，将元素沿着X轴和Y轴进行平移。
.box {
transform: translate(50px, 100px); /*向右平移50像素，向下平移100像素 */
}
- 旋转（Rotate）：通过指定旋转角度，以度数为单位，对元素进行旋转。
.box {
transform: rotate(45deg);/* 被顺时针旋转45度 */
}
- 缩放（Scale）：通过指定缩放比例，对元素进行放大或缩小。
.box {
transform: scale(1.5); /* 放大到原始大小的1.5倍 */
}
- 倾斜（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变形方法：
- 平移（Translate3D）：通过指定沿X轴、Y轴和Z轴的位移值，将元素沿相应轴进行平移。
.box {
transform: translate3d(50px, 100px, 0);/* 向右平移50像素，向下平移100像素，Z轴的位移值设置为0，表示在二维平面上进行平移*/
}
- 旋转（Rotate3D）：通过指定绕指定轴的旋转角度对元素进行旋转。
.box {
transform: rotate3d(1, 1, 1, 45deg);/* 围绕向量 (1, 1, 1) 旋转，并以45度的角度执行旋转操作 */
}
- 缩放（Scale3D）：通过指定沿X轴、Y轴和Z轴的缩放比例对元素进行缩放。
.box {
transform: scale3d(1.5, 1.5, 1.5);/* 三个轴上进行1.5倍等比例缩放 */
}
- 透视（Perspective）：通过指定透视距离来创建3D效果，使元素具有更真实的空间感。
.container {
perspective: 500px;/* 透视距离被设置为500像素 */
}
.box {
transform: rotateY(45deg);/* 绕Y轴旋转45度 */
}