CSS核心功能手册:从熟悉到精通
CSS核心功能代码
文章目录
- CSS核心功能代码
- @[toc]
- 参考HTML代码
- 尺寸操作
- 设置元素尺寸
- 内边距
- 外边距
- 设置默认布局边距
- 用途和使用场景:
- 背景设置
- **背景颜色 (`background-color`)**:
- **背景图像 (`background-image`)**:
- **背景重复 (`background-repeat`)**:
- **背景位置 (`background-position`)**:
- **背景附着 (`background-attachment`)**:
- **背景大小 (`background-size`)**:
- **背景简写属性 (`background`)**:
- **背景图像的多个背景**:
- **背景添加阴影效果:**
- **多重阴影:**
- 文本处理
- 1. `text-align` - 文本对齐方式
- 基本语法:
- 示例:
- 2. `text-decoration` - 文本装饰
- **示例:**
- 3. `text-transform` - 文本转换
- **基本语法:**
- **示例:**
- 4. `letter-spacing` - 字母间距
- **基本语法:**
- **示例:**
- 5. `word-spacing` - 单词间距
- **基本语法:**
- **示例:**
- 6. `line-height` - 行高
- **基本语法:**
- **示例:**
- 7. `text-indent` - 文本缩进
- 基本语法:
- 示例:
- 8. `font` - 字体设置
- 基本语法:
- 示例:
- 9. `text-shadow` - 文本阴影
- 基本语法:
- 示例:
- 10. `writing-mode` - 写作模式
- 基本语法:
- 示例:
- 11. `text-orientation` - 文本方向
- 基本语法:
- 示例:
- 元素定位
- 1. `position` - 定位属性
- 基本语法:
- 示例:
- 2. `top`, `right`, `bottom`, `left` - 偏移属性
- 基本语法:
- 示例:
- CSS核心布局技术
- 布局的引入
- Flexbox (弹性布局)
- Flex弹性布局
- 基本语法:
- 容器属性:
- 项目属性:
- 示例:
- 2. align-items
- 基本语法:
- 可选值:
- 示例:
- 3. justify-content
- 基本语法:
- 可选值:
- 示例:
- 4. flex
- 基本语法:
- 可选值:
- 示例:
- flex-direction
- flex-wrap
- align-content
- flex-flow
- align-self
- flex-basis
- flex-shrink
- flex-grow
- order
- Grid Layout (网格布局)
- Grid网格布局
- 基本语法:
- 容器属性:
- 项目属性:
- 示例:
- 1. **display**
- 示例:
- 2. **grid-template-columns / grid-template-rows**
- 示例:
- 3. **grid-column / grid-row**
- 示例:
- 4. **grid-gap**
- 示例:
- 5. **justify-items / align-items**
- 示例:
- 6. **grid-auto-columns / grid-auto-rows**
- 示例:
- 过渡与变化
- `translate`, `translateX`, `translateY`
- `rotate`
- `transform-origin`
- `scale`
- `skew`
- `transform-style: preserve-3d`
- `perspective`
- 3D变换: `translate3d`, `rotate3d`
- 动画 (Animation)
- keyframes
- 基本语法:
- 示例:
- 多个阶段的动画:
- `@-webkit-keyframes`
- `animation-name`
- `animation-duration`
- `animation-timing-function`
- `animation-delay`
- `animation-iteration-count`
- `animation-direction`
- 综合项目: 立体旋转相册
- 综合项目:2栏布局
- 综合项目:三栏布局
- 综合项目:CSS动画版轮播图
文章目录
- CSS核心功能代码
- @[toc]
- 参考HTML代码
- 尺寸操作
- 设置元素尺寸
- 内边距
- 外边距
- 设置默认布局边距
- 用途和使用场景:
- 背景设置
- **背景颜色 (`background-color`)**:
- **背景图像 (`background-image`)**:
- **背景重复 (`background-repeat`)**:
- **背景位置 (`background-position`)**:
- **背景附着 (`background-attachment`)**:
- **背景大小 (`background-size`)**:
- **背景简写属性 (`background`)**:
- **背景图像的多个背景**:
- **背景添加阴影效果:**
- **多重阴影:**
- 文本处理
- 1. `text-align` - 文本对齐方式
- 基本语法:
- 示例:
- 2. `text-decoration` - 文本装饰
- **示例:**
- 3. `text-transform` - 文本转换
- **基本语法:**
- **示例:**
- 4. `letter-spacing` - 字母间距
- **基本语法:**
- **示例:**
- 5. `word-spacing` - 单词间距
- **基本语法:**
- **示例:**
- 6. `line-height` - 行高
- **基本语法:**
- **示例:**
- 7. `text-indent` - 文本缩进
- 基本语法:
- 示例:
- 8. `font` - 字体设置
- 基本语法:
- 示例:
- 9. `text-shadow` - 文本阴影
- 基本语法:
- 示例:
- 10. `writing-mode` - 写作模式
- 基本语法:
- 示例:
- 11. `text-orientation` - 文本方向
- 基本语法:
- 示例:
- 元素定位
- 1. `position` - 定位属性
- 基本语法:
- 示例:
- 2. `top`, `right`, `bottom`, `left` - 偏移属性
- 基本语法:
- 示例:
- CSS核心布局技术
- 布局的引入
- Flexbox (弹性布局)
- Flex弹性布局
- 基本语法:
- 容器属性:
- 项目属性:
- 示例:
- 2. align-items
- 基本语法:
- 可选值:
- 示例:
- 3. justify-content
- 基本语法:
- 可选值:
- 示例:
- 4. flex
- 基本语法:
- 可选值:
- 示例:
- flex-direction
- flex-wrap
- align-content
- flex-flow
- align-self
- flex-basis
- flex-shrink
- flex-grow
- order
- Grid Layout (网格布局)
- Grid网格布局
- 基本语法:
- 容器属性:
- 项目属性:
- 示例:
- 1. **display**
- 示例:
- 2. **grid-template-columns / grid-template-rows**
- 示例:
- 3. **grid-column / grid-row**
- 示例:
- 4. **grid-gap**
- 示例:
- 5. **justify-items / align-items**
- 示例:
- 6. **grid-auto-columns / grid-auto-rows**
- 示例:
- 过渡与变化
- `translate`, `translateX`, `translateY`
- `rotate`
- `transform-origin`
- `scale`
- `skew`
- `transform-style: preserve-3d`
- `perspective`
- 3D变换: `translate3d`, `rotate3d`
- 动画 (Animation)
- keyframes
- 基本语法:
- 示例:
- 多个阶段的动画:
- `@-webkit-keyframes`
- `animation-name`
- `animation-duration`
- `animation-timing-function`
- `animation-delay`
- `animation-iteration-count`
- `animation-direction`
- 综合项目: 立体旋转相册
- 综合项目:2栏布局
- 综合项目:三栏布局
- 综合项目:CSS动画版轮播图
参考HTML代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>example</title><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head>
<body><div><h1>1. CSS</h1><p class="box">CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。</p><span>测试span</span></div><div><h1>2. CSS</h1><p>CCSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。</p></div><div><h1>3. CSS</h1><p>CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。</p></div><div><h1>4. CSS</h1><p>CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。CSS(Cascading Style Sheets,层叠样式表)是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式,包括布局、颜色、字体和响应式设计等。通过CSS,可以将设计和内容分离,使得网页更易于维护和访问。</p></div>
</body>
</html>
尺寸操作
设置元素尺寸
通常用在块级元素内,width
和height
属性是用来设置元素的宽度和高度的。这些属性定义了元素的尺寸,即宽度(水平方向)和高度(垂直方向)的大小。
默认情况下,浏览器会让元素自动适应浏览器的尺寸和屏幕尺寸,但是你可以使用这两个参数去设置它的具体数值。
-
width:
width
属性用于设置元素的宽度。在你的代码中,它被设置为500px
,意味着该元素的宽度是500像素。- 示例:
.box {width: 500px; /* 设置元素的宽度为500像素 */ }
-
height:
height
属性用于设置元素的高度。在你的代码中,它被设置为280px
,意味着该元素的高度是280像素。- 示例:
.box {height: 280px; /* 设置元素的高度为280像素 */ }
这些属性允许你明确地控制元素的大小,以适应你的设计需求。在CSS中,你可以使用不同的单位来指定宽度和高度,例如像素(px)、百分比(%)、em单位、rem单位等。像素是固定的尺寸单位,而百分比、em和rem则是相对的尺寸单位,它们的大小是相对于其他元素或屏幕尺寸而定的。
-
border:
- 此属性设置元素的边框样式。
- 示例
.box {border: 3px dotted grey; }
3px
是边框宽度。dotted
表示边框是点状的。grey
是边框颜色。
-
border-radius:
-
此属性设置元素边框的圆角半径,使得边框拐角处呈现为圆角,而非默认的直角。值会是圆角的半径。
-
示例
.box {border-radius: 8px; }
-
内边距
内边距(Padding): 内边距是**元素边框与元素内容之间的空间**。它是元素内部的空白区域,用于创建元素内容和元素边框之间的缓冲空间。在CSS中,内边距通过padding
属性来设置。
- 属性:
padding-top
: 设置元素的上内边距。padding-right
: 设置元素的右内边距。padding-bottom
: 设置元素的下内边距。padding-left
: 设置元素的左内边距。padding
: 同时设置元素的上、右、下、左内边距。
- 示例代码:
/* 单独设置内边距 */
.element {padding-top: 10px;padding-right: 20px;padding-bottom: 10px;padding-left: 20px;
}/* 使用一个值来设置所有的内边距 */
.element {padding: 10px;
}/* 使用两个值来设置内边距:第一个值为上下内边距,第二个值为左右内边距 */
.element {padding: 10px 20px;
}/* 使用四个值来分别设置上、右、下、左内边距 */
.element {padding: 10px 20px 30px 40px;
}
外边距
外边距(Margin): 外边距是元素边框外侧到相邻元素边框的空间。它是元素周围的空白区域,用于在元素之间创建空间,以保持页面的清晰和组织良好的布局。在CSS中,外边距通过margin
属性来设置。
-
属性:
margin-top
: 设置元素的上外边距。margin-right
: 设置元素的右外边距。值设置为auto的时候可以实现元素垂直居中显示。margin-bottom
: 设置元素的下外边距。margin-left
: 设置元素的左外边距。值设置为auto的时候可以实现元素垂直居中显示。margin
: 同时设置元素的上、右、下、左外边距。设置为0 auto
可以实现垂直居中显示
-
示例代码:
/* 单独设置外边距 */ .element {margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 20px; }/* 使用一个值来设置所有的外边距 */ .element {margin: 10px; }/* 使用两个值来设置外边距:第一个值为上下外边距,第二个值为左右外边距 */ .element {margin: 10px 20px; }/* 使用四个值来分别设置上、右、下、左外边距 */ .element {margin: 10px 20px 30px 40px; }
特殊处理:%百分比布局
-
width: 100%
的意义:
当你设置一个元素的width
属性为100%
时,你是在告诉浏览器将该元素的宽度设置为其父元素的宽度。这意味着,元素会尽可能地扩展以填充其父元素的水平空间。.element {width: 100%; }
-
与父容器的宽度计算:
在默认情况下,一个元素的宽度是由其内容区的宽度、内边距、边框和外边距组成的。当你设置width: 100%
时,你只是设置了元素内容区的宽度等于父元素的宽度,而不是整个元素(包括内边距和边框)的宽度。 -
可能出现溢出屏幕的情况:
如果元素具有内边距或边框,那么即使设置了width: 100%
,元素的总宽度也会超过其父元素的宽度,可能导致元素溢出其父元素或溢出屏幕。.element {width: 100%;padding: 10px;border: 5px solid black; }
-
解决方法 (
box-sizing: border-box;
):
box-sizing
属性允许你更改浏览器计算元素宽度和高度的方式。通过设置box-sizing: border-box;
,你可以告诉浏览器包括内边距和边框在内,但不包括外边距在内,来计算元素的宽度和高度。.element {width: 100%;padding: 10px;border: 5px solid black;box-sizing: border-box; }
这样,即使有内边距和边框,元素的总宽度也会与其父元素的宽度相匹配,防止溢出。
-
为什么这样能解决:
box-sizing: border-box;
是因为它改变了浏览器计算元素宽度的方式。在这种模式下,元素的width
和height
属性包括了内边距和边框,而不仅仅是内容区域。这意味着,即使元素有内边距和边框,其宽度也会保持为100%
,与父元素的宽度相匹配,从而防止了溢出的问题。
设置默认布局边距
*{ padding: 0; margin: 0;}
是一种CSS重置(CSS Reset)的简单形式。让我们逐一解释:
-
通配符
*
:
通配符*
是一个全局选择器,它匹配页面上的所有元素。 -
padding: 0;
和margin: 0;
:
这两条样式规则分别将所有元素的内边距(padding)和外边距(margin)设置为0。
* {padding: 0;margin: 0;
}
用途和使用场景:
-
消除浏览器默认样式:
不同浏览器有不同的默认样式。例如,某些浏览器可能会为<body>
、<h1>
、<p>
等元素提供默认的margin
和padding
值。通过使用* { padding: 0; margin: 0; }
,你可以重置所有元素的margin
和padding
值,确保在不同浏览器中的一致性。 -
创建清晰的布局:
在开始创建网站布局之前重置margin
和padding
值是一个好习惯,我们可以放在css布局里的首行。这样做可以确保你的布局不会受到未预期的空间影响,使布局过程更为清晰和可预测。 -
减少样式冲突:
在大型项目或使用第三方库时,重置margin
和padding
值可以帮助减少样式冲突,使样式更容易管理和维护。
背景设置
在CSS中,背景属性用于为元素设置背景内容。你可以设置颜色、图像、重复、位置和滚动等属性来配置背景。以下是背景属性及其用法的概述:
背景颜色 (background-color
):
设置元素的背景颜色。
.element {background-color: #ff0000; /* 红色 */
}
背景图像 (background-image
):
设置元素的背景图像。
.element {background-image: url('background.jpg');
}
背景重复 (background-repeat
):
设置背景图像是否以及如何重复。
.element {background-repeat: no-repeat; /* 不重复 */
}
背景位置 (background-position
):
设置背景图像的位置。
.element {background-position: center center; /* 水平垂直居中 */
}
背景附着 (background-attachment
):
设置背景图像是固定的,还是随着页面的其余部分滚动。
.element {background-attachment: fixed;
}
背景大小 (background-size
):
设置背景图像的大小。
.element {background-size: cover; /* 覆盖整个元素 */
}
背景简写属性 (background
):
你可以使用 background
属性将所有这些值组合到一个声明中。
.element {background: #ff0000 url('background.jpg') no-repeat center center fixed;
}
背景图像的多个背景:
你还可以为元素设置多个背景图像,每个背景图像之间用逗号分隔。
.element {background-image: url('overlay.png'), url('background.jpg');
}
背景添加阴影效果:
box-shadow
属性是用于向框(即元素的边框外边缘)添加阴影效果。这个属性可以创建出立体效果,或者强调某个元素。box-shadow
属性可以接受多个值,用于控制阴影的水平偏移、垂直偏移、模糊半径、扩展半径和颜色。这里是 box-shadow
属性的基本结构和用法:
基本语法:
box-shadow: h-offset v-offset blur spread color;
h-offset
(水平偏移): 水平方向上阴影的偏移量。正值向右偏移,负值向左偏移。v-offset
(垂直偏移): 垂直方向上阴影的偏移量。正值向下偏移,负值向上偏移。blur
(模糊半径): 阴影的模糊度。值越大,阴影越模糊。值为0时,阴影为硬边。spread
(扩展半径): 阴影的扩展大小。正值会使阴影扩大,负值会使阴影缩小。color
(颜色): 阴影的颜色。
示例:
.element {box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, 0.5);
}
在这个示例中,元素具有一个向右和向下偏移10px的阴影,模糊半径为5px,没有扩展半径(因为它是0),并且阴影的颜色是半透明的黑色。
多重阴影:
你还可以应用多重阴影,只需用逗号分隔每个阴影值即可:
.element {box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3), -3px -3px 5px 0 rgba(255, 255, 255, 0.3);
}
在这个示例中,元素具有两个阴影:一个向右和向下偏移,另一个向左和向上偏移。
文本处理
在处理文本时,CSS提供了多种属性来控制文本的显示和格式。以下是一些常用的文本处理属性及其用法和示例。
1. text-align
- 文本对齐方式
此属性用于设置文本的水平对齐方式。
基本语法:
text-align: left | right | center | justify;
left
: 文本左对齐(默认值)。right
: 文本右对齐。center
: 文本居中对齐。justify
: 文本两端对齐。
示例:
p {text-align: center;
}
2. text-decoration
- 文本装饰
此属性用于设置文本的装饰,如下划线、横线等。
基本语法:
text-decoration: none | underline | overline | line-through | blink;
none
: 无装饰(默认值)。underline
: 下划线。overline
: 上划线。line-through
: 删除线。blink
: 闪烁(不推荐使用,因为它可能导致可用性和可访问性问题)。
示例:
p {text-decoration: underline;
}
3. text-transform
- 文本转换
此属性用于控制文本的大小写。
基本语法:
text-transform: none | uppercase | lowercase | capitalize;
none
: 无转换(默认值)。uppercase
: 全部大写。lowercase
: 全部小写。capitalize
: 每个单词的首字母大写。
示例:
p {text-transform: uppercase;
}
4. letter-spacing
- 字母间距
此属性用于设置字符之间的间距。
基本语法:
letter-spacing: normal | length-value;
normal
: 正常间距(默认值)。length-value
: 自定义间距值(例如2px
、0.1em
等)。
示例:
p {letter-spacing: 2px;
}
5. word-spacing
- 单词间距
此属性用于设置单词之间的间距。
基本语法:
word-spacing: normal | length-value;
normal
: 正常间距(默认值)。length-value
: 自定义间距值(例如4px
、0.2em
等)。
示例:
p {word-spacing: 4px;
}
6. line-height
- 行高
此属性用于设置行之间的间距。
基本语法:
line-height: normal | number | length-value | percentage;
normal
: 正常行高(默认值)。number
: 相对于字体大小的倍数(例如1.5
)。length-value
: 固定行高值(例如20px
、1.5em
等)。percentage
: 相对于字体大小的百分比(例如150%
)。
示例:
p {line-height: 1.5;
}
7. text-indent
- 文本缩进
text-indent
属性用于设置文本的首行缩进。
基本语法:
text-indent: length-value | percentage;
length-value
: 固定缩进值(例如20px
、2em
等)。percentage
: 相对于包含块宽度的百分比值。
示例:
p {text-indent: 2em;
}
在这个示例中,p
元素的首行将缩进相当于当前字体大小的2倍。
8. font
- 字体设置
font
属性是一个复合属性,它允许您在一个声明中设置多个字体属性。
基本语法:
font: font-style font-variant font-weight font-size/line-height font-family;
font-style
: 字体样式 (normal
,italic
,oblique
)。font-variant
: 字体变体 (normal
,small-caps
)。font-weight
: 字体粗细 (normal
,bold
,bolder
,lighter
,100
to900
)。font-size
: 字体大小 (medium
,xx-small
,x-small
,small
,large
,x-large
,xx-large
, 或者使用长度值例如12px
,1.5em
等)。line-height
: 行高(同上面的line-height
属性)。font-family
: 字体系列(例如"Helvetica, Arial, sans-serif"
)。
示例:
p {font: italic small-caps bold 1em/1.5 Arial, sans-serif;
}
在这个示例中,p
元素将有斜体、小型大写字母、粗体、1em字体大小、1.5的行高,以及Arial或sans-serif字体。
9. text-shadow
- 文本阴影
text-shadow
属性用于给文本添加阴影效果。
基本语法:
text-shadow: h-offset v-offset blur-radius color;
h-offset
(水平偏移): 水平方向上阴影的偏移量。正值向右偏移,负值向左偏移。v-offset
(垂直偏移): 垂直方向上阴影的偏移量。正值向下偏移,负值向上偏移。blur-radius
(模糊半径): 阴影的模糊度。值越大,阴影越模糊。值为0时,阴影为硬边。color
(颜色): 阴影的颜色。
示例:
p {text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
在这个示例中,p
元素的文本将有一个向右和向下偏移2px,模糊半径为2px,颜色为半透明的黑色的阴影。
10. writing-mode
- 写作模式
writing-mode
属性用于定义文本方向和布局方向。
基本语法:
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
horizontal-tb
(水平从上到下): 文字水平显示,并从上到下排列。vertical-rl
(垂直从右到左): 文字垂直显示,并从右到左排列。vertical-lr
(垂直从左到右): 文字垂直显示,并从左到右排列。
示例:
p {writing-mode: vertical-rl;
}
在这个示例中,p
元素的文本将垂直显示,并从右向左排列。
11. text-orientation
- 文本方向
text-orientation
属性用于设置文字在垂直模式下的方向。
基本语法:
text-orientation: mixed | upright | sideways;
mixed
: 文字的方向根据单个字符的默认方向来确定。upright
: 所有字符都保持直立,不旋转。sideways
: 所有字符都侧面显示,旋转90度。
示例:
p {writing-mode: vertical-rl;text-orientation: upright;
}
在这个示例中,p
元素的文本将垂直显示,并且所有字符都保持直立,不旋转。
这两个属性通常一起使用,以实现特定的文本布局和方向效果,特别是对于需要垂直文本布局的语言和设计。
元素定位
1. position
- 定位属性
position
属性用于设置元素的定位类型,它决定了元素如何在页面上定位。
基本语法:
position: static | relative | absolute | fixed | sticky;
static
(静态定位): 默认值,元素按照正常的文档流定位。relative
(相对定位): 元素相对于其正常位置进行定位。可以使得子容器按照父容器的位置进行定位,也就是让子容器的定位始终以父容器的尺寸进行活动。absolute
(绝对定位): 元素相对于最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的初始包含块进行定位。fixed
(固定定位): 元素相对于浏览器窗口进行定位,即使页面滚动,它也始终保持在相同的位置。可以做返回顶部的方式快捷方式实现。sticky
(粘性定位): 是相对定位和固定定位的混合类型,元素在跨越特定点时会切换为固定定位。
示例:
.element {position: absolute;top: 50px;left: 100px;
}
2. top
, right
, bottom
, left
- 偏移属性
这些属性用于设置定位元素的偏移量,它们的效果会受到 position
属性的影响。
基本语法:
top: auto | <length> | <percentage>;
right: auto | <length> | <percentage>;
bottom: auto | <length> | <percentage>;
left: auto | <length> | <percentage>;
auto
: 自动计算偏移量。<length>
: 指定偏移量,例如50px
。<percentage>
: 相对于包含块的百分比偏移。
示例:
.element {position: absolute;top: 10%;left: 20%;
}
在这个示例中,.element
元素被绝对定位,其顶部偏移了包含块高度的 10%,左侧偏移了包含块宽度的 20%。
这些属性允许你精确控制元素的位置,通常与 position
属性一起使用来实现各种布局效果。
CSS核心布局技术
布局的引入
- 把页面分成一块一块,按左中右、上中下等排列
布局分类
两种
- 固定宽度布局,一般宽度为960/1000/1024 px
- 不固定宽度布局,主要靠文档流的原理来布局
文档流本来就是自适应的(响应式的),不需要加额外的样式
第三种布局
- 响应式布局(旧内容新名字)
- 意思就是PC上固定宽度,手机上不固定宽度
- 也就是一种混合布局
布局的两种思路
-
从大到小
- 先定下大局
- 然后完善每个部分的小布局
-
从小到大
- 先完成小布局
- 然后组合成大布局
两种均可
- 新人推荐用第二种,因为小的简单
- 老手一般用第一种,因为有大局观
布局需要用到什么属性?
- DIV+CSS布局(过时说法)
- CSS布局 √{main,header,fotter等等}
- 一图流
Flexbox (弹性布局)
Flexbox 是 CSS3 引入的一种新的布局模式,旨在提供一个更加高效的方式来对容器中的项进行对齐、方向和顺序的控制。
Flex弹性布局
基本语法:
display: flex | inline-flex;
容器属性:
flex-direction
(方向): 定义主轴的方向(即项目的排列方向)。可选值有row
(水平方向),row-reverse
(水平反向),column
(垂直方向),column-reverse
(垂直反向)。flex-wrap
(换行): 定义如果一条轴线排不下,如何换行。可选值有nowrap
(不换行),wrap
(换行),wrap-reverse
(反向换行)。flex-flow
: 是flex-direction
和flex-wrap
的简写形式,默认值为row nowrap
。justify-content
(主轴对齐): 定义项目在主轴上的对齐方式。可选值有flex-start
(头部对齐),flex-end
(尾部对齐),center
(居中对齐),space-between
(两端对齐,项目之间的间隔相等),space-around
(每个项目两侧的间隔相等)。align-items
(交叉轴对齐): 定义项目在交叉轴上如何对齐。可选值有flex-start
,flex-end
,center
,baseline
,stretch
。align-content
(多行对齐): 定义多轴线的对齐方式。该属性对单行 flex 容器无效。
项目属性:
order
: 定义项目的排列顺序,数值越小,排列越靠前,默认为0。flex-grow
: 定义项目的放大比例,默认为0。flex-shrink
: 定义项目的缩小比例,默认为1。flex-basis
: 定义项目的原始大小。flex
: 是flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。align-self
: 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。
示例:
.container {display: flex;flex-direction: row;justify-content: space-between;
}.item {flex-grow: 1;
}
2. align-items
align-items
属性是用于在 Flexbox(弹性布局)或 Grid(网格布局)容器中对齐交叉轴上的项目。
基本语法:
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end | safe center | unsafe center;
可选值:
stretch
(默认值): 项目被拉伸以适应容器。flex-start / start
: 项目位于容器的开头。flex-end / end
: 项目位于容器的末尾。center
: 项目位于容器的中心。baseline
: 项目的基线对齐。first baseline
: 对齐到容器的第一个项目的基线。last baseline
: 对齐到容器的最后一个项目的基线。self-start
: 对齐到项目自己的开始位置。self-end
: 对齐到项目自己的结束位置。safe center
: 当对齐项目可能溢出容器时,将它们安全地对齐在容器的中心。unsafe center
: 忽略溢出,强制将项目对齐在容器的中心。
示例:
.container {display: flex;align-items: center;
}
3. justify-content
justify-content
属性用于在 Flexbox(弹性布局)或 Grid(网格布局)容器中对齐主轴上的项目。
基本语法:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right | safe center | unsafe center;
可选值:
flex-start / start / left
: 项目位于容器的开头。flex-end / end / right
: 项目位于容器的末尾。center
: 项目位于容器的中心。space-between
: 项目均匀分布在容器里,第一个项目位于容器的开始位置,最后一个项目位于容器的结束位置。space-around
: 项目均匀分布在容器里,项目之间的间隔是相同的。space-evenly
: 项目均匀分布在容器里,项目之间和容器边缘的间隔是相同的。
示例:
.container {display: flex;justify-content: space-between;
}
4. flex
flex
属性是 flex-grow
, flex-shrink
, 和 flex-basis
的简写属性。它是用于在 Flexbox(弹性布局)中设置弹性项目的放大、缩小和基础大小。
基本语法:
flex: flex-grow flex-shrink flex-basis | auto | initial | none;
可选值:
flex-grow
: 定义项目的放大比例。flex-shrink
: 定义项目的缩小比例。flex-basis
: 定义项目的原始大小。auto
: 根据容器和项目的大小自动计算flex-grow
,flex-shrink
, 和flex-basis
。initial
: 设置flex
的初始值为0 1 auto
。none
: 设置flex
的值为0 0 auto
。
示例:
.item {flex: 1 0 auto;
}
flex-direction
该属性用于定义主轴的方向,即项目的排列方向。
row
(default): 从左到右排列。row-reverse
: 从右到左排列。column
: 从上到下排列。column-reverse
: 从下到上排列。
<div style="display: flex; flex-direction: row;"><div>Item 1</div><div>Item 2</div><div>Item 3</div>
</div>
flex-wrap
该属性定义了项目在主轴上如何换行。
nowrap
(default): 不换行。wrap
: 换行,第一行在上方。wrap-reverse
: 换行,第一行在下方。
<div style="display: flex; flex-wrap: wrap;"><div>Item 1</div><div>Item 2</div><div>Item 3</div>
</div>
align-content
该属性定义了多轴线的对齐方式。
flex-start
: 各行向起点对齐。flex-end
: 各行向终点对齐。center
: 各行居中对齐。space-between
: 与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
: 轴线之间的间隔平均分布。
<div style="display: flex; flex-wrap: wrap; align-content: flex-start;"><div>Item 1</div><div>Item 2</div><div>Item 3</div>
</div>
flex-flow
flex-flow
是flex-direction
和flex-wrap
的简写形式,默认值为row nowrap
。
<div style="display: flex; flex-flow: row wrap;"><div>Item 1</div><div>Item 2</div><div>Item 3</div>
</div>
align-self
该属性允许默认对齐方式被覆盖,用于单个项目。
auto
: 继承容器的align-items
属性,如果没有父容器则为stretch
。flex-start
: 交叉轴的起点对齐。flex-end
: 交叉轴的终点对齐。center
: 交叉轴的中点对齐。baseline
: 项目的第一行文字的基线对齐。stretch
: 如果项目未设置高度或设为auto,将占满整个容器的高度。
<div style="display: flex;"><div style="align-self: flex-start;">Item 1</div><div>Item 2</div><div>Item 3</div>
</div>
flex-basis
该属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。它的默认值为auto
,即项目的本来大小。
<div style="display: flex;"><div style="flex-basis: 200px;">Item 1</div><div>Item 2</div><div>Item 3</div>
</div>
flex-shrink
该属性定义了项目的缩小比例,默认为1
,即如果空间不足,该项目将缩小。
<div style="display: flex;"><div style="flex-shrink: 2;">Item 1</div><div>Item 2</div><div>Item 3</div>
</div>
flex-grow
该属性定义了项目的放大比例,默认为0
,即如果存在剩余空间,也不放大。
<div style="display: flex;"><div style="flex-grow: 1;">Item 1</div><div>Item 2</div><div>Item 3</div>
</div>
order
该属性定义了项目的排列顺序。数值越小,排列越靠前,默认为0
。
<div style="display: flex;"><div style="order: 2;">Item 1</div><div style="order: 1;">Item 2</div><div style="order: 3;">Item 3</div>
</div>
Grid Layout (网格布局)
CSS Grid Layout 是一个基于网格的布局系统,它可以处理两维布局,行和列。
Grid网格布局
基本语法:
display: grid | inline-grid;
容器属性:
grid-template-columns
/grid-template-rows
: 定义列 / 行的大小。grid-template-areas
: 定义区域。grid-template
: 是grid-template-rows
,grid-template-columns
和grid-template-areas
的简写。grid-column-gap
/grid-row-gap
: 定义列 / 行的间隔。grid-gap
: 是grid-row-gap
和grid-column-gap
的简写。justify-items
/align-items
: 定义项目在单元格中的位置。justify-content
/align-content
: 定义整个网格在容器中的位置。
项目属性:
grid-column-start
/grid-column-end
/grid-row-start
/grid-row-end
: 定义项目的位置和区域。grid-column
/grid-row
: 是grid-column-start
/grid-column-end
,grid-row-start
/grid-row-end
的简写形式。grid-area
: 定义项目所在的区域或位置。
示例:
.container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;
}.item {grid-column: span 2;
}p
1. display
display
属性用于设置元素的显示模式。在 Grid 布局中,它可以设置为 grid
或 inline-grid
。
grid
: 此值将元素设置为块级网格容器。inline-grid
: 此值将元素设置为内联网格容器。
示例:
.container {display: grid;
}
在此示例中,.container
元素被设置为块级网格容器。
2. grid-template-columns / grid-template-rows
这两个属性用于定义网格的列和行的大小。
<track-size>
: 可以是长度值、百分比、分数值或者auto
。<line-name>
: 自定义线名,可以用于更好地定位网格项。
示例:
.container {display: grid; /* 设置容器为网格布局 */grid-template-columns: repeat(3, 1fr); /* 设置三列,每列宽度为容器宽度的三分之一 */grid-template-rows: 100px 200px; /* 设置两行,第一行高度为100px,第二行高度为200px *//* grid-template-columns: 200px 300px 200px; */ /* 设置三列,宽度分别为200px, 300px, 200px *//* grid-template-columns: 1fr 1fr 1fr*/ /* 设置三列,每列宽度为容器宽度的三分之一 *//* grid-template-columns: repeat(3, 1fr); */ /* 设置三列,每列宽度为容器宽度的三分之一,与上面的代码相同 *//* grid-template-columns: repeat(auto-fill, 200px);*/ /* 自动填充尽可能多的200px宽的列 */grid-template-columns: 300px auto 200px; /* 设置三列,宽度分别为300px, 自动, 200px,中间的列宽度自适应 */height: 600px; /* 设置容器高度为600px */grid-template-rows: 1fr 2fr; /* 设置两行,第二行的高度是第一行的两倍 */
}.container_item {padding: 10px; /* 设置内边距为10px */border: 1px solid #ccc; /* 设置1px宽的实线边框,颜色为#ccc */border-radius: 5px; /* 设置边框圆角为5px */background-color: #f9f9f9; /* 设置背景颜色为#f9f9f9 */overflow: hidden; /* 设置溢出内容为隐藏 */
}
在此示例中:
- 在
.container
选择器下的代码是用于设置网格容器的布局和尺寸。 - 在
.container_item
选择器下的代码是用于设置网格项的样式,包括内边距、边框、边框圆角、背景颜色和溢出处理。
3. grid-column / grid-row
这两个属性用于指定网格项的位置。
<start-line>
/<end-line>
: 指定网格项的起始和结束位置。
示例:
.item {grid-column: 1 / 3;grid-row: 2 / 4;
}
在此示例中,.item
元素的列位置从第1列线开始到第3列线结束,行位置从第2行线开始到第4行线结束。
4. grid-gap
grid-gap
属性是 row-gap
和 column-gap
的简写,它用于设置行和列之间的间隙。
<grid-row-gap>
: 行间隙的大小。<grid-column-gap>
: 列间隙的大小。
示例:
.container {grid-gap: 10px 15px;
}
在此示例中,设置了10px的行间隙和15px的列间隙。
5. justify-items / align-items
这两个属性用于控制网格容器中的项如何对齐。
start
: 项对齐到网格的起始边。end
: 项对齐到网格的结束边。center
: 项在网格中居中对齐。stretch
: 项拉伸以填充网格区域。
示例:
.container {justify-items: center;align-items: stretch;
}
在此示例中,所有项在其网格区域中水平居中,垂直方向上拉伸以填充网格区域。
6. grid-auto-columns / grid-auto-rows
当你有超出你明确定义的网格的项时,这些属性为自动创建的网格轨道设置大小。
<track-size>
: 轨道的大小,可以是长度值、百分比、分数值或者auto
。
示例:
.container {grid-auto-columns: 100px;grid-auto-rows: 100px;
}
在此示例中,任何超出明确定义网格的项都会在一个100px宽的列和100px高的行中放置。
Grid 布局是非常强大的,它可以用于创建复杂的布局,而不需要额外的 HTML 元素或复杂的 CSS。它特别适用于构建具有复杂结构的应用程序界面或网页。
过渡与变化
过渡是指元素从一个状态逐渐改变为另一个状态的效果。在CSS中,我们通过transition
属性来实现过渡效果。
变换是指通过CSS改变元素的形状和位置。transform
属性提供了多种方法来控制元素的变换,包括移动、旋转、缩放和倾斜等。
translate
, translateX
, translateY
translate(x, y)
: 沿x和y轴移动元素。translateX(x)
: 沿x轴移动元素。translateY(y)
: 沿y轴移动元素。
<div style="transform: translate(50px, 50px);">Translate me
</div>
rotate
rotate(angle)
: 旋转元素。参数是旋转的角度,可以是deg, rad, grad 或turn。
<div style="transform: rotate(45deg);">Rotate me
</div>
transform-origin
transform-origin
: 改变元素的变换原点。
<div style="transform: rotate(45deg); transform-origin: 20% 40%;">Change my origin
</div>
scale
scale(x, y)
: 缩放元素的大小。
<div style="transform: scale(1.5, 1.5);">Scale me
</div>
skew
skew(x-angle, y-angle)
: 倾斜元素。
<div style="transform: skew(30deg, 20deg);">Skew me
</div>
transform-style: preserve-3d
transform-style
: 设置嵌套元素是位于3D空间还是平面。preserve-3d
: 表示嵌套元素位于3D空间。
<div style="transform-style: preserve-3d;">3D space
</div>
perspective
perspective
: 定义3D元素距视点的距离。
<div style="perspective: 500px;">3D perspective
</div>
3D变换: translate3d
, rotate3d
translate3d(x, y, z)
: 沿x, y和z轴移动元素。rotate3d(x, y, z, angle)
: 围绕一个3D向量旋转元素。
<div style="transform: translate3d(50px, 50px, 50px);">Translate me in 3D
</div>
<div style="transform: rotate3d(1, 1, 1, 45deg);">Rotate me in 3D
</div>
这些属性和方法可以单独使用,也可以组合使用,创建丰富多彩的动画和效果。在3D变换中,preserve-3d
和perspective
属性是非常重要的,它们控制了3D空间的表现和视觉效果。
动画 (Animation)
CSS动画是使元素从一种样式逐渐变为另一种样式的效果。
keyframes
@keyframes
是 CSS 动画的基础,允许你创建动画序列,定义动画过程中的每个阶段。通过 @keyframes
, 你可以在不同的时间点指定元素的样式。这些时间点以百分比表示,0% 代表动画开始,100% 代表动画结束,而中间的百分比表示动画过程中的各个阶段。
基本语法:
@keyframes animationName {0% {/* 动画开始时的样式 */}50% {/* 动画中间时的样式 */}100% {/* 动画结束时的样式 */}
}
animationName
: 是你为此动画定义的名称,它在animation
属性中使用。- 百分比(
0%
,50%
,100%
等):代表动画的各个阶段,你可以在每个阶段定义元素的不同样式。
示例:
假设你想创建一个简单的动画,使元素在 2 秒内从左移动到右。你可以如下定义一个 @keyframes
动画:
@keyframes moveRight {0% {left: 0;}100% {left: 200px;}
}/* 应用动画到元素 */
.element {position: relative;animation: moveRight 2s forwards;
}
HTML代码:
<div class="element">我是一个会移动的元素</div>
在这个示例中:
- 首先,定义了一个名为
moveRight
的@keyframes
动画,该动画在 0%(开始)时具有left
值为0
,在 100%(结束)时具有left
值为200px
。 - 然后,在
.element
类中使用animation
属性应用了moveRight
动画,设置动画持续时间为2s
,并使用forwards
保留动画结束时的样式。
多个阶段的动画:
你可以在 @keyframes
中定义多个阶段,以创建更复杂的动画。例如,如果你想让元素在动画过程中先变大,然后变小,你可以如下定义动画:
@keyframes growShrink {0% {transform: scale(1);}50% {transform: scale(1.5);}100% {transform: scale(1);}
}/* 应用动画到元素 */
.element {animation: growShrink 2s infinite;
}
HTML代码:
<div class="element">我是一个会变大变小的元素</div>
在这个示例中:
@keyframes growShrink
动画在 0% 和 100% 时保持原始大小(scale(1)
),在 50% 时变大到 1.5 倍(scale(1.5)
)。.element
类中的animation
属性应用了growShrink
动画,设置动画持续时间为2s
,并使用infinite
使动画无限次循环。
@-webkit-keyframes
@-webkit-keyframes
是一个专为WebKit浏览器引擎(如Safari和旧版的Chrome)准备的前缀版本的 @keyframes
规则。它的语法和用法与 @keyframes
完全相同,但是加了 -webkit-
前缀以确保兼容性。
在早期,当 CSS 动画刚刚推出时,不同的浏览器需要不同的前缀来支持 CSS 动画。为了确保动画能在所有浏览器上运行,你需要为 @keyframes
规则提供多个版本。
下面是一个使用 @-webkit-keyframes
的示例:
@-webkit-keyframes myAnimation {0% { transform: translateX(0); }50% { transform: translateX(100px); }100% { transform: translateX(0); }
}@keyframes myAnimation {0% { transform: translateX(0); }50% { transform: translateX(100px); }100% { transform: translateX(0); }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebKit Animation Example</title>
<style>@-webkit-keyframes myAnimation {0% { transform: translateX(0); }50% { transform: translateX(100px); }100% { transform: translateX(0); }}@keyframes myAnimation {0% { transform: translateX(0); }50% { transform: translateX(100px); }100% { transform: translateX(0); }}.animate {width: 100px;height: 100px;background-color: blue;animation-name: myAnimation;animation-duration: 3s;animation-iteration-count: infinite;}
</style>
</head>
<body><div class="animate">Animate me
</div></body>
</html>
在上述示例中,我们为 @keyframes
规则提供了两个版本 - 一个普通的版本和一个带有 -webkit-
前缀的版本。这样,无论用户是使用WebKit浏览器还是其他浏览器,动画都能正常运行。但请注意,现代浏览器通常不再需要使用这种前缀版本。
animation-name
指定@keyframes动画的名称。
<div style="animation-name: mymove;">Animate me
</div>
animation-duration
指定动画完成一个周期所花费的时间。
<div style="animation-duration: 5s;">Animate me
</div>
animation-timing-function
指定动画的速度曲线。
<div style="animation-timing-function: ease-in;">Animate me
</div>
animation-delay
指定动画何时开始。
<div style="animation-delay: 2s;">Animate me
</div>
animation-iteration-count
指定动画应该播放多少次。
<div style="animation-iteration-count: infinite;">Animate me
</div>
animation-direction
指定动画是否在下一周期逆向播放。
<div style="animation-direction: alternate;">Animate me
</div>
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Example</title>
<style>@keyframes myAnimation {0% { transform: translateX(0); }50% { transform: translateX(100px); }100% { transform: translateX(0); }}.animate {width: 100px;height: 100px;background-color: blue;animation-name: myAnimation;animation-duration: 3s;animation-iteration-count: infinite;}
</style>
</head>
<body><div class="animate">Animate me
</div></body>
</html>
在这个示例中,我们创建了一个简单的来回移动的动画。动画的名字是myAnimation
,总时长是3秒,会无限次重复播放。
综合项目: 立体旋转相册
立体旋转方块
HTML代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>example</title><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head>
<body><!--/*外层最大容器*/--><div class="wrap">
<!-- /*包裹所有元素的容器*/--><div class="cube"><!--前面图片 --><div class="out_front"><div class="pic" id="out_front"> </div> </div><!--后面图片 --><div class="out_back"><div class="pic" id="out_back"> </div> </div><!--左图片 --><div class="out_left"><div class="pic" id="out_left"> </div> </div><div class="out_right"><div class="pic" id="out_right"> </div> </div><div class="out_top"><div class="pic" id="out_top"> </div> </div><div class="out_bottom"><div class="pic" id="out_bottom"> </div> </div><!--小正方体 --> <span class="in_front"><div class="in_pic" id="in_front"> </div> </span><span class="in_back"><div class="in_pic" id="in_back"> </div> </span><span class="in_left"><div class="in_pic" id="in_left"> </div> </span><span class="in_right"><div class="in_pic" id="in_right"> </div> </span><span class="in_top"><div class="in_pic" id="in_top"> </div> </span><span class="in_bottom"><div class="in_pic" id="in_bottom"> </div> </span></div></div>
</body>
</html>
CSS代码
html {background: #000;height: 100%;
}
/*最外层容器样式*/
.wrap{position: relative;position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 200px;height: 200px;margin: auto;/*改变左右上下,图片方块移动*/}
/*包裹所有容器样式*/
.cube{width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 20s infinite;animation: rotate 20s infinite;/*匀速*/animation-timing-function: linear;
}
@-webkit-keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}
}
@keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{position: absolute;width: 200px;height: 200px;opacity: 0.8;transition: all .4s;
}
/*定义所有图片样式*/
.pic{width: 200px;height: 200px;
}
.cube .pic#out_front {background-color: blueviolet;
}
.cube .pic#out_back {background-color: rgb(47, 49, 180);
}
.cube .pic#out_left {background-color: rgb(255, 230, 1);
}
.cube .pic#out_right {background-color: rgb(255, 94, 0);
}
.cube .pic#out_top {background-color: rgba(43, 226, 58, 0.651);
}
.cube .pic#out_bottom {background-color: rgb(5, 255, 213);
}.cube .in_pic#in_front {background-color: blueviolet;
}
.cube .in_pic#in_back {background-color: rgb(47, 49, 180);
}
.cube .in_pic#in_left {background-color: rgb(255, 230, 1);
}
.cube .in_pic#in_right {background-color: rgb(94, 65, 49);
}
.cube .in_pic#in_bottom {background-color: steelblue;
}.cube .out_front{transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span{display: bloack;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;
}
.cube .in_pic{width: 100px;height: 100px;/* background-color: aqua; */
}
.cube .in_front{transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px);
}
综合项目:2栏布局
常见的两栏布局方式是一侧定宽,另一侧自适应宽度,例如左侧栏定宽,右侧自适应宽度,或者右侧栏定宽,左侧自适应宽度。
HTML代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>example</title><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head>
<body><div class="container"><div class="sidebar"><p class="title">Sidebar content</p><div class="footer" id="sidebar">Sidebar Footer</div></div><div class="main"><p class="title" id="f_title">Main content</p><div class="footer" id="footer">Main Footer</div></div></div>
</body>
</html>
CSS代码
/*
全局重置:
margin: 0; 将所有元素的外边距设置为0,以消除浏览器默认的外边距。
padding: 0; 将所有元素的内边距设置为0,以消除浏览器默认的内边距。
*/
* {margin: 0;padding: 0;
}/*
.container样式:
display: flex; 将.container元素设置为弹性布局容器,使其子元素可以使用弹性布局属性。
height: 100vh; 将.container元素的高度设置为视口高度的100%,使其填充整个视口。
*/
.container {display: flex;height: 100vh;
}/*
.sidebar和.main样式:
display: flex; 将.sidebar和.main元素设置为弹性布局容器,使其子元素可以使用弹性布局属性。
flex-direction: column; 将.flex容器的主轴方向设置为从上到下,使其子元素垂直排列。
*/
.sidebar, .main {display: flex;flex-direction: column;
}/*
.sidebar样式:
justify-content: center; 在.sidebar元素的主轴方向上居中对齐其子元素。
width: 200px; 设置.sidebar元素的宽度为200像素。
background-color: #554646; 设置.sidebar元素的背景颜色为#554646。
*/
.sidebar {justify-content: center;width: 200px; background-color: #554646;
}/*
.main样式:
flex-grow: 1; 允许.main元素在主轴方向上占用剩余空间。
background-color: #b37777; 设置.main元素的背景颜色为#b37777。
*/
.main {flex-grow: 1; background-color: #b37777;
}/*
.footer样式:
margin-top: auto; 将.footer元素的顶部外边距设置为自动,使其始终保持在其容器的底部。
padding: 10px; 设置.footer元素的内边距为10像素。
text-align: center; 将.footer元素中的文本居中对齐。
*/
.footer {margin-top: auto; padding: 10px;text-align: center;
}/*
.footer#sidebar样式:
background-color: #b0b0b0; 设置ID为sidebar的.footer元素的背景颜色为#b0b0b0。
*/
.footer#sidebar {background-color: #b0b0b0;
}/*
.footer#footer样式:
background-color: #5b9db8; 设置ID为footer的.footer元素的背景颜色为#5b9db8。
*/
.footer#footer {background-color: #5b9db8;
}/*
.title样式:
background-color: #bb4e4e; 设置.title元素的背景颜色为#bb4e4e。
padding: 20px; 设置.title元素的内边距为20像素。
border: 1px solid #ccc; 设置.title元素的边框宽度为1像素,样式为实线,颜色为#ccc。
*/
.title {background-color: #bb4e4e;padding: 20px;border: 1px solid #ccc;
}/*
.title#f_title样式:
margin: auto 0; 使ID为f_title的.title元素在其容器中垂直居中。
*/
.title#f_title {margin: auto 0;
}
综合项目:三栏布局
三栏布局类似于两栏布局,它的具体表现形式为,左侧和右侧两栏定宽,中间区域自适应宽度。
实现效果:
HTML代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>example</title><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head>
<body>
<!-- 容器元素 -->
<div class="container"><!-- 左侧栏 --><div class="left-sidebar"><p>Left Sidebar Content</p></div><!-- 中间栏 --><div class="main-content"><p>Main Content</p></div><!-- 右侧栏 --><div class="right-sidebar"><p></p></div>
</div>
</body>
</html>
CSS代码
/* 全局样式重置 */
* {margin: 0;padding: 0;
}
/* 容器样式 */
.container {display: grid;grid-template-columns: 200px auto 200px;height: 100vh;
}
/* 左侧栏、右侧栏和主内容公共样式 */
.left-sidebar, .main-content, .right-sidebar {display: flex;flex-direction: column;justify-content: center; /* 垂直居中对齐 */align-items: center; /* 水平居中对齐 */
}
/* 主内容特定样式,重置垂直对齐 */
.main-content {justify-content: flex-start; /* 垂直顶部对齐 */
}
/* 左侧栏、右侧栏和主内容公共样式 */
.left-sidebar, .main-content, .right-sidebar {padding: 20px;
}
/* 左侧栏和右侧栏背景颜色 */
.left-sidebar, .right-sidebar {background-color: #554646;
}
/* 主内容背景颜色 */
.main-content {background-color: #b37777;
}
综合项目:CSS动画版轮播图
使用CSS动画来实现轮播图。这通常需要使用@keyframes
规则来定义动画,并使用animation
属性来应用这些动画。
HTML代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>example</title><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head>
<body><div class="slider"><div class="slides"><div class="slide" style="background-color: red;"></div><div class="slide" style="background-color: green;"></div><div class="slide" style="background-color: blue;"></div></div></div></body>
</html>
CSS代码
.slider {position: relative;width: 300px;height: 200px;overflow: hidden;
}
.slides {display: flex;animation: slide-animation 15s infinite; /* 5s的持续时间 * 3个幻灯片 = 15s */
}
.slide {width: 300px;height: 200px;flex-shrink: 0;transition: transform 1s;margin: 0 auto;display: flex;
}@keyframes slide-animation {0% { transform: translateX(0); }20% { transform: translateX(0); }33.33% { transform: translateX(-300px); }53.33% {transform: translateX(-300px); }66.66% { transform: translateX(-600px); }86.66% { transform: translateX(-600px); }100% { transform: translateX(0); }
}
- 我们首先创建了一个外部容器(
.slider
),它的overflow
属性设置为hidden
,以确保只显示一个幻灯片。 - 我们然后创建了一个内部容器(
.slides
),它包含所有的幻灯片。我们为这个容器应用了一个无限的动画(slide-animation
),其持续时间为15秒(每个幻灯片的显示时间为5秒,总共有3个幻灯片,所以总持续时间为15秒)。 - 我们使用
@keyframes
规则定义了一个动画(slide-animation
),它在不同的时间点将.slides
容器向左平移,以显示不同的幻灯片。 - 最后,我们为每个幻灯片(
.slide
)设置了宽度、高度和背景色,以便您可以看到动画效果。
这只是一个
bar {
background-color: #554646;
}
/* 主内容背景颜色 */
.main-content {
background-color: #b37777;
}
# 综合项目:CSS动画版轮播图使用CSS动画来实现轮播图。这通常需要使用`@keyframes`规则来定义动画,并使用`animation`属性来应用这些动画。**HTML代码**```HTML
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>example</title><link rel="stylesheet" href="./index.css"><script src="./index.js"></script>
</head>
<body><div class="slider"><div class="slides"><div class="slide" style="background-color: red;"></div><div class="slide" style="background-color: green;"></div><div class="slide" style="background-color: blue;"></div></div></div></body>
</html>
CSS代码
.slider {position: relative;width: 300px;height: 200px;overflow: hidden;
}
.slides {display: flex;animation: slide-animation 15s infinite; /* 5s的持续时间 * 3个幻灯片 = 15s */
}
.slide {width: 300px;height: 200px;flex-shrink: 0;transition: transform 1s;margin: 0 auto;display: flex;
}@keyframes slide-animation {0% { transform: translateX(0); }20% { transform: translateX(0); }33.33% { transform: translateX(-300px); }53.33% {transform: translateX(-300px); }66.66% { transform: translateX(-600px); }86.66% { transform: translateX(-600px); }100% { transform: translateX(0); }
}
- 我们首先创建了一个外部容器(
.slider
),它的overflow
属性设置为hidden
,以确保只显示一个幻灯片。 - 我们然后创建了一个内部容器(
.slides
),它包含所有的幻灯片。我们为这个容器应用了一个无限的动画(slide-animation
),其持续时间为15秒(每个幻灯片的显示时间为5秒,总共有3个幻灯片,所以总持续时间为15秒)。 - 我们使用
@keyframes
规则定义了一个动画(slide-animation
),它在不同的时间点将.slides
容器向左平移,以显示不同的幻灯片。 - 最后,我们为每个幻灯片(
.slide
)设置了宽度、高度和背景色,以便您可以看到动画效果。
这只是一个
相关文章:

CSS核心功能手册:从熟悉到精通
CSS核心功能代码 文章目录 CSS核心功能代码[toc]参考HTML代码尺寸操作设置元素尺寸内边距外边距设置默认布局边距用途和使用场景: 背景设置**背景颜色 (background-color)**:**背景图像 (background-image)**:**背景重复 (background-repeat)**:**背景位置 (backgro…...
编程的重要性及解决技术难题的方法
看到这个话题之后,出于好奇,使用某chat,输入相应主题得到的一篇文章,分享给大家。 PS:现在不同版本的chat和其快速更新升级也可以说是编程的结果,其重要性和发展历程也反映了编程的重要性。 一、编程的重要…...

如何成为一名高效的前端开发者(10X开发者)
如今,每个人都想成为我们所说的“10倍开发者”。然而,这个术语经常被误解和高估。 本质上,一个高效或者10倍开发者,在我看来,是指那些能够充分利用所有可用工具的人,通过让这些工具处理冗余和重复的任务&am…...
Docker port 命令
docker port:列出指定的容器的端口映射,或者查找将PRIVATE_PORT NAT到面向公众的端口。 语法 docker port [OPTIONS] CONTAINER [PRIVATE_PORT[/PROTO]]实例 查看容器mymysql的端口映射情况: docker port mymysql##效果如下: …...

PostgreSQL-SQL联表查询LEFT JOIN 数据去重复
我们在使用left join联表查询时,如果table1中的一条记录对应了table2的多条记录,则会重复查出id相同的多条记录。 1、解决方法一 SELECT t1.* FROM table1 t1 LEFT JOIN table2 t2 ON t1.id t2.tid 第一种方法我们发现还是有重复数据 2、解决方法二…...
Golang与MongoDB的完美组合
引言 在现代开发中,数据存储是一个至关重要的环节。随着数据量的增加和复杂性的提高,开发人员需要寻找一种高效、可扩展且易于使用的数据库解决方案。MongoDB作为一种NoSQL数据库,提供了强大的功能和灵活的数据模型,与Golang的高…...

初识Java 18-2 泛型
目录 构建复杂模型 类型擦除 C中的泛型 迁移的兼容性 类型擦除存在的问题 边界的行为 对类型擦除的补偿 创建类型实例 泛型数组 本笔记参考自: 《On Java 中文版》 构建复杂模型 泛型的一个优点就是,能够简单且安全地创建复杂模型。 【例子&am…...
vue分环境打包及案例代码
Vue分环境打包可以帮助我们针对不同的环境(如开发环境、测试环境、生产环境等)打包出不同的版本,以满足不同的需求。下面是一个简单的Vue分环境打包的示例代码: 安装cross-env: npm install --save-dev cross-env在项目的根目录下创建不同的环境配置文件,如test.env.js…...

基于springboot+vue的在线考试系统(前后端分离)
博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…...
重装linux后需要做的配置
1. linux中 vim如果输入中文乱码 打开/etc/vim/vimrc输入: set fileencodingsutf-8,gbk set termencodingutf-8 set encodingutf-8 把vim的缩进格式顺便改了 http://t.csdnimg.cn/K3ncc 2. 配置sudo授权用户 3. 新导入项目后 , chmod -R x 添加权限 4. 查询主机i…...

【华为数通HCIP | 网络工程师】821刷题日记-IS-IS(2)
个人名片: 🐼作者简介:一名大三在校生,喜欢AI编程🎋 🐻❄️个人主页🥇:落798. 🐼个人WeChat:hmmwx53 🕊️系列专栏:🖼️…...

Linux系统-----进程管理(进程的创建与控制)
目录 前言 进程 1.基本概念 2.特征 3.Linux系统的进程 进程的创建 1. fork()函数 2. 多进程的创建与输出 进程的控制 1. exec()系列 2. wait() 函数 3. execl( )和fork( )联合使用 4. exit( ) 前言 前面我们学习了Linux系统的基本指令以及如…...
Unity 获取物体的子物体的方法
Unity 中要获取物体的子物体,可以使用以下一些方法。 1、只获取一级节点的子物体: public Transform tran;// Start is called before the first frame updatevoid Start(){foreach (Transform child in tran){Debug.Log(child.name);}} 使用该方法只会…...
RocketMQ 读写压测
一、Producer 压测 [rootsz-glbd-mq-108-249 rocketmq-all-5.1.3-bin-release]# sh bin/tools.sh org.apache.rocketmq.example.benchmark.Producer -n 10.XXX.108.249:9876 -t TopicTest_LEXIN_2023_pop_128 -w 64 16:39:18,402 |-INFO in org.apache.rocketmq.logging.ch.qo…...
PHP调用API接口的方法及实现(一键采集淘宝商品详情数据)
随着互联网、云计算和大数据时代的到来,越来越多的应用程序需要调用第三方的API接口来获取数据,实现数据互通和协同工作。PHP作为一种常用的服务器端语言,也可以通过调用API接口来实现不同系统的数据交互和整合。本文将介绍PHP调用API接口的方…...

得物App安卓冷启动优化-Application篇
前言 冷启动指标是App体验中相当重要的指标,在电商App中更是对用户的留存意愿有着举足轻重的影响。通常是指App进程启动到首页首帧出现的耗时,但是在用户体验的角度来看,应当是从用户点击App图标,到首页内容完全展示结束。 将启…...
【实战教程】PHP与七牛云的完美对接
前言: 随着互联网的迅速发展,越来越多的网站和应用程序需要处理大量的图片、视频和其他文件。为了有效地存储和管理这些文件,并提供快速的内容分发服务,开发者们常常依赖于云存储和CDN服务提供商。 七牛云是一家领先的云存储和C…...

Go 接口:nil接口为什么不等于nil?
一、Go 接口的地位 Go 语言核心团队的技术负责人 Russ Cox 也曾说过这样一句话:“如果要从 Go 语言中挑选出一个特性放入其他语言,我会选择接口”,这句话足以说明接口这一语法特性在这位 Go 语言大神心目中的地位。 为什么接口在 Go 中有这么…...
(UM1724) STM32 Nucleo-64 boards User manual
STM32 Nucleo-64 评估板用户手册 0. 前言1. 介绍[^1]2. Ordering information2.1 包装编号说明3. 开发环境4. 跳线端子 ON/OFF 的约定5. 快速入门6. 硬件布局与配置6.10 扩展连接器6.11 ARDUINO 连接器6.12 ST morpho 连接器7. Nucleo-64 评估板信息0. 前言 【相关博文】 【STM…...

SourceInsight - Relation Windows
磨刀不误砍柴工,你使用的工具决定了你的下限。我平时使用较多的代码编辑工具就是SourceInsight,这个工具速度快,操作方便,但处理非常大的项目的性能不是很理想,比如你要是添加整个Linux Kernel的源代码的话。 在使用SI…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中,return 语句的使用是另一个关键概念,它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别:不同层级的事件处理 方…...

Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

如何在Windows本机安装Python并确保与Python.NET兼容
✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…...