【前端】之CSS3基础知识
CSS3 私有化前缀
- 考虑到CSS3的兼容性问题，某些属性需要添加浏览器的私有化前缀
- 几种主流浏览器的私有化前缀如下：
- Chrome、Safari：-webkit-
- Firefox：-moz-
- IE：-ms-
- Opera：-o-
CSS3 之前已有的选择器
- div{}：标签选择器
- .box{}：类选择器
- #box{}：ID选择器
- div:hover{}：伪类选择器
- div p{}：后代选择器
- div.box{}：交集选择器
- div,p{}：并集选择器
- *{}：通配符选择器
CSS3 属性选择器
- 属性选择器通过标签属性来选择
- 属性选择器用“[ ]”来表示，将属性放到“[ ]”中进行筛选，示例代码如下：
div[class]{} /*匹配有class属性的div标签*/ div[class="box1"]{} /*匹配class属性为box1的div标签*/ div[class^="aa"]{} /*匹配class属性值以aa开头的div标签*/ div[class$="aa"]{} /*匹配class属性值以aa结尾的div标签*/ div[class*="aa"]{} /*匹配class属性值中包含aa的div标签*/
CSS3 伪类选择器
- CSS3之前的伪类：:hover鼠标悬浮、:link未访问、:active被选择、:visited已访问
- 上述伪类的顺序：link -> visited -> hover -> active（love hate）
- 伪类：表示元素在某个状态下的样式，标志性符号是
: - 结构伪类：
- N:first-child：符合N条件的第一个元素所在父容器的第一个子孩子
- N:last-child：符合N条件的第一个元素所在父容器的最后一个子孩子
- N:nth-child(10)：符合N条件的第一个元素所在的父容器的第10个子孩子
- N:nth-child(odd)：符合N条件的第一个元素所在的父容器中的奇数子孩子
- N:nth-child(2n+1)：同上
- N:nth-child(even)：符合N条件的第一个元素所在的父容器中的偶数子孩子
- N:nth-child(2n)：同上
- N:nth-child(n)：符合N条件的第一个元素所在的父容器中的所有子孩子
- N:nth-child(-n+5)：符合N条件的第一个元素所在的父容器中的前5个子孩子
- N:nth-child(5-n)：符合N条件的第一个元素所在的父容器中的后5个子孩子
- N:nth-last-child(-n+5)：符合N条件的第一个元素所在的父容器中的后5个子孩子
- 状态伪类：
- N:empty：符合N条件且内部没有内容的元素（空格也算内容）
- target伪类：
- N:target：当符合N条件的元素被锚点聚焦后的样式，需要配合锚点使用
CSS3 伪元素选择器
- 伪元素：通过CSS模拟HTML，标志性符号是
:: - 常见的伪元素：
- E::before：在E标签之前添加文本及其样式样式，必须要有
content属性 - E::after：在E标签之后添加文本及其样式，必须要有
content属性 - E::first-letter：E元素中的第一个字符的样式
- E::first-line：E元素中的第一行的样式
- E::selection：选中文本后的样式
- E::before：在E标签之前添加文本及其样式样式，必须要有
CSS3 透明度设置方式
- RGBA设置方式：
- R：Red，红色，0-255
- G：Green，绿色，0-255
- B：Blue，蓝色，0-255
- A：Alpha，透明度，0.0-1.0
- HSLA设置方式：
- H：Hue，色调，0-360
- S：Saturation，饱和度，0%-100%
- L：Lightness，亮度，0%-100%
- A：Alpha，透明度，0.0-1.0
CSS3 文本
- text-shadow：文本阴影，示例代码：
/* text-shadow: 水平位移 垂直位移 模糊程度 阴影颜色 */ /* 如果要设置多个阴影，可以在中间加逗号隔开 */ text-shadow:-1px -1px 1px #fff, 1px 1px 1px #000; /* 凸效果 */ text-shadow:-1px -1px 1px #000, 1px 1px 1px #fff; /* 凹效果 */
CSS3 边框
- border-radius：圆角
- box-shadow：边框阴影，参数（水平位移 垂直位移 模糊度 面积 颜色）
- border-image：边框图片，包括四个子属性
- border-image-source：边框图片路径，
:url('images/border.png') - border-image-slice：四个角不被拉伸的部分的宽度，没有单位，
:27 - border-image-width：边框图片的宽度，
:27px - border-image-repeat：重复模式，
:repeat平铺，中间部分可能显示不完整，:round完美平铺，中间部分显示完整，:stretch拉伸
- border-image-source：边框图片路径，
- box-sizing：盒子的显示模型，有三种值：
- content-box：默认值，外加模型，盒子实际大小仅包括内容区域
- padding-box：盒子实际大小包括padding及其内部区域
- border-box：内减模型，盒子实际大小包括边框及其内部区域
CSS3 背景
- background-size：背景大小，几种参数写法如下：
- 尺寸，
100px 100px，按给定数值显示背景 - 百分比，
100% 100%，按给定百分比显示背景 - cover，等比例缩放，让背景的短边铺满容器，长边可能会溢出容器
- contain，等比例缩放，让背景的场边铺满容器，短边可能铺不满容器
- 尺寸，
- background-origin：背景原点，控制背景的显示位置，默认值
padding-box - background-clip：背景裁剪，将某个box外的背景区域裁剪掉
- 如果想给一个元素设置多张背景图片，背景图片之间要用逗号隔开
- 背景渐变：
- 线性渐变，代码如下：
background: linear-gradient(to right, yellow, green); /* 从左向右，起始色为黄色，结束色为绿色 */ /* 方向：to left、to right、to top、to bottom，默认是to bottom */ /* 方向可以替换为角度：45deg，下边为0deg，左边90deg，依此类推 */ /* 可以设置多个颜色，且可以设置每个颜色占的比例：red 20%, blue 40% */ - 发散渐变，代码如下：
background: radial-gradient(100px, at center, yellow, green); /* 第一个参数：辐射半径 */ /* 第二个参数：中心点位置，at left/right/top/bottom/center/left top... */ /* 中心点位置可以直接设置坐标：at 50px 50px，左上角是(0,0) */ /* 其他参数及其特征和线性渐变中的相同 */
- 线性渐变，代码如下：
CSS3 过渡
- 如果不设置过渡，那么所有的变换都是突变的
- 过渡语法：
transition: 属性名 过渡时间，示例代码如下：.box { width: 200px; height: 200px; background-color: red; transition: all 1s linear 3s; /* transition: width 1s linear 3s, height 1s linear 3s, ... */ /* 第三个参数：默认值ease平滑过渡，linear匀速，ease-in由慢到快，ease-out由快到慢，ease-in-out慢快慢，steps(N)分N步走完 */ /* 第四个参数：延迟3秒钟后才开始过渡 */ /* 如果需要所有属性都过渡，则第一个参数直接写all */ } .box:hover { width: 600px; height: 400px; background-color: blue; }
CSS3 2D变换
- 2D变换，就是对元素进行缩放、旋转、平移等操作
- 平移：从元素当前位置，在X、Y坐标上分别移动指定距离，代码如下：
transform: translate(100px, 200px); /* 向下、向右移动100像素 */ - 旋转：以元素中心点为圆心，顺时针旋转指定角度（单位deg），代码如下：
transform: rotate(45deg); /* 顺时针旋转了45度 */ - 缩放：将元素在X轴和Y轴上分别缩放指定倍数，代码如下：
transform: scale(2, 4); /* 在X轴上放大2倍，Y轴上放大4倍 */ - 倾斜：将元素在X轴和Y轴上倾斜指定的角度，代码如下：
transform: skew(30deg, 30deg); /* 在X轴和Y轴上分别倾斜30度 */ - 在CSS3 2D变换中，可以设置变换的中心点，代码如下：
transform-origin: center bottom; /* 以下边的中心点为变换中心 */
CSS3 3D变换
- 在CSS3 3D变换中，有三个坐标轴：X轴、Y轴、Z轴
- 水平向右是X轴正方向；垂直向下是Y轴正方向；指向屏幕外是Z轴正方向
- perspective：透视，可以加强3D效果，代码如下：
perspective: 250px; /* 模拟人眼距离平面的距离，越近3D效果越强 */ - 在某个轴上旋转：rotateX/Y/Z，代码如下：
transform: rotateX(360deg); /* 在X轴上旋转360度 */ /* 在Z轴上的旋转相当于平面旋转rotate(360deg) */ - 在某个轴上移动：translateX/Y/Z，代码如下：
transform: translateX(200px); /* 在X轴上移动200像素 */ /* 在Z轴上的移动是前后移动，视觉效果是放大和缩小，但必须配合透视使用 */ - 上述所有”3D变换“都只是视觉效果，实际还是平面的
- 为了实现真正的3D，需要在父盒子中添加设置代码，代码如下：
tranform-style: preserve-3d; /* 子盒子保持3D效果 */
CSS3 动画
- CSS3中动画的使用方式，代码如下：
/* 定义动画 */ @keyframes move { 0% { transform: translateX(0px); } /* 动画运行到0%时的状态 */ 100% { transform: translateX(300px); } /* 动画运行到100%时的状态 */ } /* 调用动画 */ .box { animation: move 2s infinite alternate linear 1s; /* 第一个参数：动画的名称；第二个参数：运行一次的持续时间； */ /* 第三个参数：重复次数，infinite是无限重复； */ /* 第四个参数：动画轮流反向播放；第五个参数：匀速播放；第六个参数：延迟1秒 */ } - 要想让动画结束后，盒子保持在动画最后的状态，可以添加如下代码：
animation-fill-mode: forwards; /* 这个属性有两个值：forwards保持动画后的状态；backwards回到动画钱的状态 */
CSS3 分列布局
- CSS3中分列的基本用法：
-webkit-column-count: 3; /* 分成3列 */ -webkit-column-rule: 1px dashed red; /* 列与列之间有一条红色虚线隔开 */ -webkit-column-gap: 60px; /* 列与列之间间距60像素 */ - 分页后，标题会在某一列中。如果想要让标题在网页内居中，则应添加如下代码：
h4 { -webkit-column-span: all; text-align: center; }
CSS3 伸缩布局
- FLEX布局完整教程
- CSS3中的伸缩布局使页面能够适配不同尺寸的屏幕，在响应式开发中发挥了巨大的作用
- 设置当前盒子使用伸缩布局：
E { display: flex; } - 伸缩布局中的术语：
- 主轴：元素默认沿着主轴排列，默认主轴是水平轴，方向从左向右
- 侧轴：与主轴垂直的轴称为侧轴，默认是垂直方向的，方向从上到下
- flex属性：设置子元素占据父元素的空间，可以实现空间平分
- flex-direction属性：设置主轴方向，常用的值有以下四个：
- row：水平方向，从左向右排列
- row-reverse：反转行，从右向左排列
- column：垂直方向，从上向下排列
- column-reverse：反转列，从下向上排列
- justify-content属性：主轴上的对齐方式，常用的值有以下5个：
- flex-start：沿着主轴的方向对齐
- flex-end：沿着主轴的反方向对齐
- center：沿着主轴方向居中对齐
- space-between：两端对齐，子元素之间的间隔相等
- space-around：每个子元素两侧的间隔相等，子元素之间的间隔比子元素与边框的间隔大一倍
- align-items属性：侧轴上的对齐方式，常用的值有以下5个：
- flex-start：沿着侧轴的方向对齐
- flex-end：沿着侧轴的反方向对齐
- center：沿着侧轴方向居中对齐
- baseline：所有子元素的第一行文本基线对齐
- stretch：如果项目未设置高度或设为auto，将占满整个容器的高度
