CSS3概述
CSS3概述
提高网站的可维护性以及性能速度
CSS3新技术包含以下方面：
- 新选择器
- 文本样式
- 颜色样式
- 边框样式
- 背景样式
- CSS3变形
- CSS3过渡
- CSS3动画
- 多列布局
- 弹性布局
- 用户界面
浏览器私有前缀
由于CSS3新增的有些属性尚未成为W3C标准的一部分；
部分浏览器都只能 识别“带有自身私有前缀的属性”
| 私有前缀 | 对应的浏览器 |
|---|---|
| -webkit- | Chrome和Safari |
| -moz- | Firefox |
| -ms- | IE |
| -o- | Opera |
CSS3选择器
CSS3选择器介绍
CSS2.1中，我们学习了以下几种选择器。
- 元素选择器
- id选择器
- class选择器
- 群组选择器
- 层次选择器
CSS3中，新增加了以下3大类选择器.
- 属性选择器
- 结构伪类选择器
- 伪类选择器
属性选择器
| 选择器 | 说明 |
|---|---|
| E[attr^=“xxx”] | 选择元素E，其中E元素的attr属性是以xxx开头的任何字符 |
| E[attr$=“xxx”] | 选择元素E，其中E元素的attr属性是以xxx结尾的任何字符 |
| E[attr*=“xxx”] | 选择元素E，其中E元素的attr属性是包含xxx的任何字符 |
子元素伪类选择器
在CSS3中，子元素伪类选择器有两大类。
- :first-child、:last-child、:nth-child(n)、:only-child
- :first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type
| 选择器 | 说明 |
|---|---|
| E:first-child | 选择父元素下的第一个子元素（该子元素类型为E，以下类同） |
| E:last-child | 选择父元素下的最后一个子元素 |
| E:nth-child(n) | 选择父元素下的第n个子元素或奇偶元素，n取值有3种：数字、odd和even，其中n从1开始 |
| E:only-child | 选择父元素下唯一的子元素，该父元素只有一个子元素 |
| 选择器 | 说明 |
|---|---|
| E:first-of-type | 选择父元素下的第一个E类型的子元素 |
| E:last-of-type | 选择父元素下的最后一个E类型的子元素 |
| E:nth-of-type(n) | 选择父元素下的第n个E类型的子元素或奇偶元素，n取值有3种：数字、odd和even，n从1开始 |
| E:only-of-type | 选择父元素下唯一的E类型的子元素，该父元素可以有多个子元素 |
伪类选择器
- :focus 定义元素获取焦点时使用的样式
- ::selection 定义页面中被选中文本的样式
- :checked 定义单选框或复选框被选中时的样式
- :enabled和:disabled 定义表单元素“可用”时的样式
- :read-write和:read-only定义表单元素“可读写”时的样式
文本样式
文本样式概述
| 属性 | 说明 |
|---|---|
| text-shadow | 文本阴影 |
| text-stroke | 文本描边 |
| word-wrap | 强制换行 |
| @font-face | 嵌入字体 |
文本阴影：text-shadow
语法：text-shadow:x-offset y-offset blur color;
文本描边：text-stroke
语法：text-stroke:width color;
text-stroke-width：定义边框的宽度。
text-stroke-color：定义边框的颜色。
嵌入字体：@font-face
语法：
@font-face
{
font-family: 字体名称;
src:url(文件路径);
}
CSS渐变
线性渐变
background:linear-gradient(方向, 开始颜色, 结束颜色)
| 属性值 | 对应角度 | 说明 |
|---|---|---|
| to top | 0deg | 从下到上 |
| to bottom | 180deg | 从上到下（默认值） |
| to left | 270deg | 从右到左 |
| to right | 90deg | 从左到右 |
| to top left | 无 | 从右下角到左上角（斜对角） |
| to top right | 无 | 从左下角到右上角（斜对角） |
径向渐变
background:radial-gradient(position, shape size, start-color, stop-color)
圆心位置position
| 属性值 | 说明 |
|---|---|
| center | 中部（默认值） |
| top | 顶部 |
| bottom | 底部 |
| left | 左部 |
| right | 右部 |
| top center | 靠上居中 |
| top left | 左上 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
shape size
| 属性值 | 说明 |
|---|---|
| ellipse | 椭圆形（默认值） |
| circle | 圆形 |
| 属性值 | 说明 |
|---|---|
| closest-side | 指定径向渐变的半径长度为从圆心到离圆心最近的边 |
| closest-corner | 指定径向渐变的半径长度为从圆心到离圆心最近的角 |
| farthest-side | 指定径向渐变的半径长度为从圆心到离圆心最远的边 |
| farthest-corner | 指定径向渐变的半径长度为从圆心到离圆心最远的角 |
圆角属性
border-radius:取值;
半圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 100px;
height: 50px;
border: 1px solid red;
border-radius: 50px 50px 0 0;
background-color: #FCE9B8;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
椭圆
border-radius:x/y;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 160px;
height: 100px;
border: 1px solid gray;
border-radius: 80px/50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框阴影
box-shadow属性简介
box-shadow:x-offset y-offset blur spread color style;
- x-offset：定义水平阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此x-offset取值为正时，向右偏移；取值为负时，向左偏移。
- y-offset：定义垂直阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此y-offset取值为正时，向下偏移；取值为负时，向上偏移。
- blur：定义阴影的模糊半径，只能为正值。
- spread：定义阴影的大小。
- color：定义阴影的颜色。
- style：定义是外阴影还是内阴影。
四个方向阴影独立样式
box-shadow:左阴影, 上阴影, 下阴影, 右阴影;
多色和图片边框
多色边框
//暂时只有Firefox浏览器支持
border-top-colors:颜色值;
border-right-colors:颜色值;
border-bottom-colors:颜色值;
border-left-colors:颜色值;
图片边框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UNuljvJW-1629808209141)(https://i.loli.net/2021/08/23/MueCT9JZ6xoDb2W.png)]
- 图片路径。
- 切割宽度：四条边的切割宽度，依次为上边、右边、下边、左边（顺时针）。
- 平铺方式：有3种取值，分别为repeat、round和stretch。
背景图片
background-size
background-size:取值;
| 属性值 | 说明 |
|---|---|
| cover | 即“覆盖”，表示将背景图片等比缩放来填满整个元素 |
| contain | 即“容纳”，表示将背景图片等比缩放至某一边紧贴元素边沿为止 |
background-origin:取值;
| 属性值 | 说明 |
|---|---|
| border-box | 从边框开始平铺 |
| padding-box | 从内边距开始平铺（默认值） |
| content-box | 从内容区开始平铺 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lid4lX7d-1629808209143)(https://i.loli.net/2021/08/23/YXFijWEy2rD8sJC.png)]
background-clip
background-clip:取值;
| 属性值 | 说明 |
|---|---|
| border-box | 从边框开始剪切（默认值） |
| padding-box | 从内边距开始剪切 |
| content-box | 从内容区开始剪切 |
多背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
width: 400px;
height: 200px;
border: 1px solid silver;
background: url(img/frame1.png) bottom left no-repeat,
url(img/frame2.png) top right no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3变形
平移：translate()
transform: translateX(x); /*沿X轴方向平移*/
transform: translateY(y); /*沿Y轴方向平移*/
transform: translate(x, y); /*沿X轴和Y轴同时平移*/
缩放：scale()
transform: scaleX(x); /*沿X轴方向缩放*/
transform: scaleY(y); /*沿Y轴方向缩放*/
transform: scale(x, y); /*沿X轴和Y轴同时缩放*/
倾斜：skew()
transform: skewX(x); /*沿X轴方向倾斜*/
transform: skewY(y); /*沿Y轴方向倾斜*/
transform: skew(x, y); /*沿X轴和Y轴同时倾斜*/
旋转：rotate()
transform: rotate(angle);
中心原点：transform-origin
默认情况下，元素的中心原点位于x轴和y轴的50%处
transform-origin: 取值;
| 关键字 | 百分比 | 说明 |
|---|---|---|
| top left | 0 0 | 左上 |
| top center | 50% 0 | 靠上居中 |
| top right | 100%0 | 右上 |
| left center | 0 50% | 靠左居中 |
| center center | 50% 50% | 正中 |
| right center | 100%50% | 靠右居中 |
| bottom left | 0 100% | 左下 |
| bottom center | 50% 100% | 靠下居中 |
| bottom right | 100%100% | 右下 |
CSS3过渡
过渡效果：transition-property
transition-property: 取值;
说明：
transition-property属性取值是“CSS属性”。
过渡时间：transition-duration
transition-duration: 时间;
说明：
transition-duration属性取值是一个时间，单位为秒（s），可以取小数。
过渡方式：transition-timing-function
transition-timing-function: 取值;
说明： transition-timing-function属性取值共有5种，如下表所示。
ease 默认值，由快到慢，逐渐变慢
linear 匀速
ease-in 速度越来越快（即渐显效果）
ease-out 速度越来越慢（即渐隐效果）
ease-inout 先加速后减速（即渐显渐隐效
果）
延迟时间：transition-delay
transition-delay: 时间;
说明： transition-delay属性取值是一个时间，单位为秒（s），可以是小数，默认值为0s。也就是说，当我们 没有定义transition-delay时，过渡效果就没有延迟时间。
深入了解transition属性
-
transition-property取值为all:同时对多个CSS属性来实现过渡效果
-
transition-delay的省略
such:transition:all 1s linear 0s;transition:all 1s linear;
-
transition属性的位置
结合:hover伪类来实现过渡效果
element { //原始值 transition: all 1s linear } element:hover { //最终值 }
CSS3动画
CSS3动画效果包括3部分：变形（transform）、过渡（transition）、动 画（animation）
animation属性跟transition属性区别：
- 对于transition属性来说，它只能将元素的某一个属性从一个属性值过渡到另一个属性值。
- 对于animation属性来说，它可以将元素的某一个属性从第1个属性值过渡到第2个属性值，然后还 可以继续过渡到第3个属性值，以此类推。
- transition属性（即CSS3过渡）只能实现一次性的动画效果，而 animation属性（即CSS3动画）可以实现连续性的动画效果。
animation: 动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向;
属性 说明
animation-name 对哪一个CSS属性进行操作
animation-duration 动画的持续时间
animation-timing-function 动画的速率方式
animation-delay 动画的延迟时间
animation-iteration-count 动画的播放次数
animation-direction 动画的播放方向，正向还是反向
@keyframes
使用animation属性实现CSS3动画需要两步（跟JavaScript中，函数的使 用相似）。
- 定义动画。
- 调用动画。
调用动画之前，我们必须先使用@keyframes规则来定义动画
@keyframes 动画名
{
0%{}
……
100%{}
}
//0%表示动画的开始，100%表示动画的结束，0%和100%是必须的。不过在一个@keyframes规则中，可以由多个百分比组成，每一个百分比都可以定义自身的CSS样式，从而形成一系列的动画效果
动画名称：animation-name
animation-name: 动画名;
持续时间：animation-duration
使用animation-duration属性来定义动画的持续时间
animation-duration: 时间;
动画方式：animation-timing-function
animation-timing-function: 取值;
ease 默认值，由快到慢，逐渐变慢
linear 匀速
ease-in 速度越来越快（即渐显效果）
ease-out 速度越来越慢（即渐隐效果）
ease-in-out 先加速后减速（即渐显渐隐效果）
延迟时间：animation-delay
定义动画的延迟时间,CSS3动画的animation-delay 属性跟CSS3过渡的transition-delay属性是相似的。
animation-delay: 时间;
播放次数：animation-iteration-count
animation-iteration-count: 取值;
说明：
animation-iteration-count属性取值有两种：一种是“正整数”；另外一种是“infinite”。当取值是n（正整数）时，表示动画播放n次；当取值为infinite时，表示动画播放无数次，也就是循环播放。
播放方向：animation-direction
animation-direction: 取值;
| 属性值 | 说明 |
|---|---|
| normal | 正方向播放（默认值） |
| reverse | 反方向播放 |
| alternate | 播放次数是奇数时，动画正方向播放；播放次数是偶数时，动画反方向播放 |
播放状态：animation-play-state
animation-play-state: 取值;
属性值 说明
running 播放（默认值）
paused 暂停
滤镜效果
滤镜效果概述
filter: 取值;
| 属性值 | 说明 |
|---|---|
| brightness() | 亮度 |
| grayscale() | 灰度 |
| sepia() | 复古 |
| invert() | 反色 |
| hue-rotate() | 旋转（色相） |
| drop-shadow() | 阴影 |
| opacity() | 透明度 |
| blur() | 模糊度 |
| contrast() | 对比度 |
| saturate() | 饱和度 |
亮度：brightness()
filter: brightness(百分比);
说明：
brightness()方法的取值是一个百分比，其中0%~100%表示减弱图片的亮度，例如0%就是完全黑色。100%以上表示增强图片的亮度，例如200%就是将亮度提高2倍
灰度：grayscale()
filter: grayscale(百分比)
说明：
grayscale()方法的取值是一个百分比，其中0%表示不做任何修改，100%表示完全灰度（即黑白图
片）。
复古：sepia()
filter: sepia(百分比)
说明：
sepia()方法的取值是一个百分比，取值范围为0%~100%。其中，0%表示没有转换，100%表示复古效果。
反色：invert()
filter: invert(百分比)
说明：
invert()方法的取值是一个百分比，取值范围为0%~100%。其中，0%表示没有转换，100%表示反转所有颜色。
旋转：hue-rotate()
filter: hue-rotate(度数)
hue-rotate()方法的取值是一个度数，单位为deg（即degree的缩写）。其中，0deg表示不旋转，
360deg表示旋转360°，也就是相当于一个循环。
阴影：drop-shadow()
filter: drop-shadow(x-offset y-offset blur color)
透明度：opacity()
filter: opacity(百分比)
opacity()方法的取值是一个百分比，取值范围为0%~100%。其中，0%表示完全透明，100%表示完全不透明。
模糊度：blur()
filter: blur(像素)
说明：
blur()方法的取值是一个像素值，取值越大，模糊效果越明显。
对比度：contrast()
filter: contrast(百分比)
说明：
contrast()方法的取值是一个百分比。其中，0%~100%表示减弱对比度，例如0%则是灰度图片。100%以上表示增强对比度，例如200%表示增强对比度为原来的2倍。
饱和度：saturate()
filter: saturate(百分比)
说明：saturate()方法的取值是一个百分比。其中，0%~100%表示减弱饱和度，100%以上表示增强饱和度。
多种滤镜
filter: 值列表;
说明：
在值列表中，两个值之间需要用空格隔开。
其他样式
outline属性
文本框获取焦点时，我们可以看到文本框周围会出现一条淡蓝色的轮廓线
outline: width style color;
说明：
第1个值指的是轮廓线宽度（outline-width），第2个值指的是轮廓线样式（outline-sytle），第3个值
指的是轮廓线颜色（outline-color）。
outline属性跟border属性很相似，我们可以把轮廓线看成是一条特殊的边框来理解。
initial取值
直接将某个CSS属性重置为它的默认值
property: initial;
说明：
property是一个CSS属性名，“property:initial;”表示设置property这个属性的取值为默认值。此外，initial取值可以用于任何HTML元素上的任何CSS属性。
calc()函数
使用calc()函数通过“计算”的方式来定义某一个属性的取值。
属性: calc(表达式)
说明：
其中，我们可以使用calc()函数以计算的方式给元素的width、margin、padding、font-size等来定义属性值。对于calc()函数，有以下5条运算规则。
- 只能使用加（+）、减（-）、乘（*）和除（/）这4种运算。
- 可以使用px、em、rem、百分比等单位。
- 可以混合使用各种单位进行运算。
- 表达式中有加号（+）和减号（-）时，其前后必须有空格。
- 表达式中有乘号（*）和除号（/）时，其前后可以没有空格，但建议保留。
pointer-events属性
CSS3中，我们可以使用 pointer-events属性来定义元素是否禁用鼠标单击事件
pointer-events: 取值;
属性值 说明
auto 不禁用鼠标单击事件（默认值）
none 禁用鼠标单击事件
常见的用法是:获取验证码
元素居中的方式
CSS居中
包括水平居中，垂直居中及水平垂直居中方案共15种
水平居中
内联元素水平居中
-
text-align: center实现在块级元素内部的内联元素水平居中
内联元素 (inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中
块级元素水平居中
把固定宽度块级元素的 margin-left 和 margin-right 设成auto，就可以使块级元素水平居中
多块级元素水平居中
设置块级元素的显示类型为inline-block和父容器的 text-align属性从而使多块级元素水平居中
垂直居中
单行内联元素垂直居中
高度(height)和行高(line-height)相等
多行元素垂直居中
利用表布局的 vertical-align: middle 可以实现子元素的垂直居中
块级元素垂直居中
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中
未知高度的块级元素
借助CSS3中的**transform属性向Y轴反向偏移50%**的方 法实现垂直居中。但是部分浏览器存在兼容性的问题
水平垂直居中
固定宽高元素水平垂直居中
通过margin平移元素整体宽度的一半
未知宽高元素水平垂直居中
利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半
transform: translate(-50%, -50%);
屏幕上水平垂直居中
表布局
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
background: #2b2b2b;
color:#fff;
padding: 2rem;
max-width: 320px;
}
常用布局方式
常用布局方式
CSS常用布局，包括水平居中、垂直居中、单列布局、多列布局等，以及flex 布局。
单列布局
主要有两种: header, content, footer宽度相同，有一个max-width - header和footer占满浏览器 100%宽度，content有一个max-width。
-
<header style="background-color: red; width: 600px; margin: 0 auto;">头部 </header> <main style="background-color: green; width: 600px; margin: 0 auto;">内容</main> <footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部 </footer>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4v801OwA-1629808209146)(https://i.loli.net/2021/08/24/dGoEcaZr8Y6vxq5.png)]
-
<header style="background-color: red;">头部</header> <main style="background-color: green; width: 600px; margin: 0 auto;">内容</main> <footer style="background-color: yellow;">尾部</footer>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LJmz7Mex-1629808209149)(https://i.loli.net/2021/08/24/QfIK15R3AiGDckn.png)]
两列布局
float + margin
用float将边栏与主要内容拉到一行，然后设置主要内容的margin。
<main style="background-color: red;">
<aside style="background-color: yellow; float: left; width: 50px;">边栏</aside>
<section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>
position: absolute + margin
<main style="background-color: red; position: relative;">
<aside style="background-color: yellow; position: absolute; right: 0; width:50px;">边栏</aside>
<section style="background-color: green; margin-right: 50px;">主要内容</section>
</main>
三列布局
圣杯布局
padding: 0 100px 0 90px;
<header style="background-color: red;">头部</header>
<main style="background-color: black; position: relative; padding: 0 100px 0
90px;">
<section style="background-color: green; height: 100px; float: left; width:
100%;">主要内容</section>
<aside style="background-color: yellow; height: 100px; float: left; width:
90px; margin-left: -100%; position: relative; left: -90px;">左边栏</aside>
<aside style="background-color: yellow; height: 100px; float: left; width:
100px; margin-left: -100px; position: relative; right: -100px;">右边栏</aside>
</main>
<div style="background-color: blue; clear: left;">尾部</div>
双飞翼布局
<style>
* {margin: 0;padding: 0;color: #fff}
body {min-width: 700px;}
.header,.footer {border: 1px solid #333;background: #7986db;text-align: center;}
.left,.main,.right {float: left;min-height: 130px;}
.container {border: 2px solid yellow;overflow: hidden;
}
.left {margin-left: -100%;width: 200px;background: #f13f84;}
.right {margin-left: -220px;width: 220px;background: #009988;}
.main {width: 100%;background: #008cf4;}
.content {margin: 0 220px 0 200px;}
.footer {clear: both}
</style>
</head>
<body>
<div class="header">header</div>
<div class="container">
<div class="main">
<div class="content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
多列布局
CSS3之前,一种是“浮动布局”； 另外一种是“定位布局”,
CSS3新增了一种布局方式——多列布局。
| 属性值 | 说明 |
|---|---|
| column-count | 列数 |
| column-width | 每一列的宽度 |
| column-gap | 两列之间的距离 |
| column-rule | 两列之间的边框样式 |
| column-span | 定义跨列样式 |
列数：column-count
定义多列布局的列数
column-count: 取值;
属性值 说明
auto 列数由column-width属性决定（默认值）
n（正整数） 自动划分为n列
列宽：column-width
定义多列布局中每一列的宽度
column-width: 取值;
属性值 说明
auto 列数由column-count属性决定（默认值）
长度值 单位可以为px、em和百分比等
间距：column-gap
column-gap: 取值;
属性值 说明
normal 浏览器默认长度值
长度值 单位可以为px、em和百分比等
边框：column-rule
column-rule: width style color;
说明：
column-rule属性跟border属性是非常相似的，它也是一个复合属性，由3个子属性组成。
- column-rule-width：定义边框的宽度。
- column-rule-style：定义边框的样式。
- column-rule-color：定义边框的颜色。
跨列：column-span
column-span: 取值;
属性值 说明
none 不跨列
all 跨所有列（跟none相反）
瀑布流布局
CSS3实现
.container {
column-width: 160px;
column-gap: 5px;
}
.container div {
width: 160px;
margin: 4px 0;
}
CSS3@media查询器
设置Meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
- width = device-width：宽度等于当前设备的宽度
- initial-scale：初始的缩放比例（默认设置为1.0）
- minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
- maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
- user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
加载兼容文件JS
IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现 兼容效果：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">
</script>
<![endif]-->
设置IE渲染方式默认为最高
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
媒体类型和功能
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。
max-height 定义输出设备中的页面最大可见区域高度。
max-width 定义输出设备中的页面最大可见区域宽度。
min-height 定义输出设备中的页面最小可见区域高度。
min-width 定义输出设备中的页面最小可见区域宽度。
CSS2 Media用法
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
想知道现在的移动设备是不是纵向放置的显示屏
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)"href="style.css">
让页面宽度小于960
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)"
href="style.css">
CSS3 Media写法
@media screen and (max-width: 960px){
body{
background: #000;
}
}
媒体功能：
min-width：适用于PC端和移动端
min-device-width：只适用于移动端
弹性盒子模型
重点掌握flex、flex-flow、order、justify-content、align-items
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
| 属性 | 说明 |
|---|---|
| flex-grow | 定义子元素的放大比例 |
| flex-shrink | 定义子元素的缩小比例 |
| flex-basis | 定义子元素的宽度 |
| flex | flex-grow、flex-shrink、flex-basis的复合属性 |
| flex-direction | 定义子元素的排列方向 |
| flex-wrap | 定义子元素是单行显示，还是多行显示 |
| flex-flow | flex-direction、flex-wrap的复合属性 |
| order | 定义子元素的排列顺序 |
| justify-content | 定义子元素在“横轴”上的对齐方式 |
| align-items | 定义子元素在“纵轴”上的对齐方式 |
-
子元素宽度之和小于父元素宽度
-
子元素宽度之和大于父元素宽度
放大比例：flex-grow
定义弹性盒子内部子元素的放大比例(当所有子元素 宽度之和小于父元素的宽度时，子元素如何分配父元素的剩余空间)
flex-grow: 数值;
默认值为0。当取值为0时，表示不索取父元素的剩余空间。
当取值大于 0时，表示索取父元素的剩余空间（即子元素放大）。
取值越大，索取得越多
缩小比例：flex-shrink
定义弹性盒子内部子元素的缩小比例。也就是当所有子元素宽度之和大于父元素的宽度时，子元素如何缩小自己的宽度
flex-shrink: 数值
当取值为0时，表示子元素不缩小。
当取值大于1时，表示 子元素按一定的比例缩小。
取值越大，缩小得越厉害
元素宽度：flex-basis
flex-basis: 取值;
说明： flex-basis属性取值有两个：一个是“auto”，即该子元素的宽度是根据内容多少来定的；另外一个是“长度 值”，单位可以为px、em和百分比等。
复合属性：flex
flex属性就是一个简写形式，就是一个“语法糖”。
flex: grow shrink basis;
排列方向：flex-direction
定义弹性盒子内部“子元素”的排列方向
flex-direction: 取值;
| 属性值 | 说明 |
|---|---|
| row | 横向排列（默认值） |
| row-reverse | 横向反向排列 |
| column | 纵向排列 |
| column-reverse | 纵向反向排列 |
多行显示：flex-wrap
flex-wrap: 取值
| 属性值 | 说明 |
|---|---|
| nowrap | 单行显示（默认值） |
| wrap | 多行显示，也就是换行显示 |
| wrap-reverse | 多行显示，但是却是反向 |
复合属性：flex-flow
flex-flow: direction wrap;
flex-flow属性的默认值为“row nowrap”
排列顺序：order
order属性来定义弹性盒子内部“子元素”的排列顺序
水平对齐：justify-content
justify-content: 取值;
| 属性值 | 说明 |
|---|---|
| flex-start | 所有子元素在左边（默认值） |
| center | 所有子元素在中间 |
| flex-end | 所有子元素在右边 |
| space-between | 所有子元素平均分布 |
| space-around | 所有子元素平均分布，但两边留有一定间距 |
垂直对齐：align-items
align-items: 取值;
| 属性值 | 说明 |
|---|---|
| flex-start | 所有子元素在上边（默认值） |
| center | 所有子元素在中部 |
| flex-end | 所有子元素在下边 |
| baseline | 所有子元素在父元素的基线上 |
| strecth | 拉伸子元素以适应父元素高度 |
水平居中和垂直居中
使用“justify-content;center;”来实现水平居中
使用“align-items:center;”来实现垂直居中
伸缩菜单
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-htuFsnLV-1629808209155)(https://i.loli.net/2021/08/24/FNZaIgSkoyf8dL7.png)]
grid布局
Grid概述
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网 格，做出各种各样的布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-peEMM6nl-1629808209156)(https://i.loli.net/2021/08/24/ngRBzekhowdEp71.png)]
Grid 布局与 Flex 布局区别
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局；
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远 比 Flex 布局强大。
基本概念
容器和项目
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项 目"（item）。
注意：
项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的
元素就不是项目。 Grid 布局只对项目生效。
单元格
行和列的交叉区域，称为"单元格"（cell）。
网格线
容器属性
display 属性
display: grid 指定一个容器采用网格布局。
grid-template-columns 属性， grid-template-rows 属性
grid-template-columns 属性定义每一列的列 宽， grid-template-rows 属性定义每一行的行高。
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
（1）repeat()
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
（2）auto-fill 关键字
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(3, 100px);
（3）fr 关键字
display: grid;
grid-template-columns: 1fr 1fr;
（4）minmax()
minmax() 函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
（5）auto 关键字
grid-template-columns: 100px auto 100px;
（6）网格线的名称
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
grid-row-gap 属性设置行与行的间隔（行间距）， grid-column-gap 属性设置列与列的间隔（列间 距）。
grid-template-areas 属性
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。 grid-template-areas 属性用 于定义区域。
grid-template-areas: 'a a a'
'b b b'
'c c c';
grid-auto-flow 属性
这个顺序由 grid-auto-flow 属性决定，默认值是 row ，即"先行后列"。也可以将它设成 column ， 变成"先列后行"。
justify-items 属性， align-items 属性， place-items 属性
justify-items 属性设置单元格内容的水平位置（左中右），
align-items 属性设置单元格内容的垂直 位置（上中下）。
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
justify-content 属性， align-content 属性， place-content 属性
justify-content 属性是整个内容区域在容器里面的水平位置（左中右）， align-content 属性是整个 内容区域的垂直位置（上中下）。
justify-content: start | end | center | stretch | space-around | space-between
| space-evenly;
align-content: start | end | center | stretch | space-around | space-between |
space-evenly;
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
place-content 属性是 align-content 属性和 justify-content 属性的合并简写形式
place-content: <align-content> <justify-content>
such:place-content: space-around space-evenly;
grid-auto-columns 属性， grid-auto-rows 属性
项目属性
grid-column-start 属性， grid-column-end 属性， grid-row-start 属 性， grid-row-end 属性
1. grid-column-start 属性：左边框所在的垂直网格线
2. grid-column-end 属性：右边框所在的垂直网格线
3. grid-row-start 属性：上边框所在的水平网格线
4. grid-row-end 属性：下边框所在的水平网格线
justify-self 属性， align-self 属性， place-self 属性
justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致， 但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是 只作用于单个项目。
align-items 属性， place-items 属性
justify-items 属性设置单元格内容的水平位置（左中右），
align-items 属性设置单元格内容的垂直 位置（上中下）。
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
justify-content 属性， align-content 属性， place-content 属性
justify-content 属性是整个内容区域在容器里面的水平位置（左中右）， align-content 属性是整个 内容区域的垂直位置（上中下）。
justify-content: start | end | center | stretch | space-around | space-between
| space-evenly;
align-content: start | end | center | stretch | space-around | space-between |
space-evenly;
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
place-content 属性是 align-content 属性和 justify-content 属性的合并简写形式
place-content: <align-content> <justify-content>
such:place-content: space-around space-evenly;
grid-auto-columns 属性， grid-auto-rows 属性
项目属性
grid-column-start 属性， grid-column-end 属性， grid-row-start 属 性， grid-row-end 属性
1. grid-column-start 属性：左边框所在的垂直网格线
2. grid-column-end 属性：右边框所在的垂直网格线
3. grid-row-start 属性：上边框所在的水平网格线
4. grid-row-end 属性：下边框所在的水平网格线
justify-self 属性， align-self 属性， place-self 属性
justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致， 但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是 只作用于单个项目。
扫一扫
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
