CSS3

属性选择器

属性选择器	解释说明
E[attr]	查找指定拥有attr属性的E标签，如查找拥有style的li标签——li[style]
E[attr=value]	查找拥有指定的attr属性并且属性值为value的E标签
E[attr*=value]	查找拥有指定的attr的属性并且属性值也包含（可以在任意位置）value的E标签
E[attr^=value]	查找拥有指定attr属性并且属性值以value开头的E标签
E[attr$=value]	查找拥有指定的attr属性并且属性值以value结束的E标签

• 注意：“=”是严格匹配；

伪类选择器

• 兄弟结构伪类

兄弟伪类	解释说明
+	获取当前元素相邻的满足条件的元素
~	获取当前元素的满足条件的兄弟元素

• 例如.first+li：添加了.first样式的标签相邻的li与元素；
• 例如.first~li：添加了.first样式的标签所有的兄弟标签li；

相对于父元素的结构伪类

选择器	解释说明
E:first-child	查找E元素的父级元素中的第一个元素，且此元素为E元素才行，否则无效
E:last-child	查找E元素的父级元素中的最后一个元素，且此元素为E元素才行 ，否则无效
E:first-of-type	查找E元素的父级元素中第一个E元素
E:last-of-type	查找E元素的父级元素中最后一个E元素
E:nth-child()	括号里可以填索引（从1开始），关键字（even odd），表达式 ，此选择器不限制类型
E:nth-of-type()	使用同上，但是会限制元素类型为E元素
E:nth-last-of-type()	使用同上，但是会限制元素类型为E元素，且是倒数
E:empty	空值，没有任何的内容，连空格都没有了
E:target	可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时调用此伪类

• 当括号里写n时，n取值默认范围为0~子元素的长度，当n<=0时，选取无效；
• 选取子元素的前5个可以写——E:nth-of-type(5-n);

伪元素选择器

• 重点：E::before E::after
• 是一个行内元素，如果想设置宽高，要转换成块级元素（display:block float:** position:）；
• 必须添加content，哪怕不设置内容，也需要添加content:""；
• E:before E:after在旧版本里是伪类，在新版本里是伪元素，新版本下E:before E:after会被自动识别为E::before E::after，按伪元素来对待；
• E::before：定义在一个元素内容之前插入content属性定义的内容与样式；
• E::after：定义在一个元素内容之后插入content属性定义的内容与样式；
• 注意： IE6、IE7、IE8（怪异模式Quirks mode）不支持此伪元素；
• 其他伪元素使用
• E::first-letter：获取第一个字符；
• E::first-line：获取第一行（当第一个字符首字下沉时，此时就获取不到第一个字符了）；
• E::selection：设置当前选中的内容的样式（只能设置显示的样式，而不能设置内容的大小）；

颜色模式

• 英文单词（red green blue）
• 十六进制（#ff0000 #00ff00 #0000ff）
• rgba模式：0-255，a是透明度；
• hsla：h（0-360，Hue色调色相）s（0%-100%，Saturation饱和度）l（0%-100%，Lightness明亮度）或者b（Brightness），a（透明度）
• H5中l明度默认是50%，一般建议保留50%；
  

文本阴影text-shadow

• text-shadow：[x轴（X Offset）y轴（Y Offset）模糊半径（Blur）颜色（Color）]，[x轴（X Offset）y轴（Y Offset）模糊半径（Blur）颜色（Color）]…
• 可以设置一个阴影 也可以多个；
  

盒模型box-sizing

1. 默认情况下CSS设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似；
   a) padding+border+width=盒子的宽度
   b) padding+border+height=盒子的高度

• 很明显，不直观，很容易出错，造成网页中其他元素的错位；

2. CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变；
   a) content-box：设置的width属性值仅仅是内容的宽度，盒子的最终的宽高值在width基础上再加上padding和border的宽高，如果后续添加padding和border，内容的区域不会减小；
   

b）border-box：设置的width属性值就是盒子最终的宽度，包括了border和padding和内容，如果后续添加padding和border，那么内容的区域就会减小——但是可以稳定页面结构；

边框圆角border-radius

• 当宽高相等，即正方形时；

• border-radius；

• 设置一个值：四个圆角值都一样；

• 设置两个值：左上/右下，右上/左下；

• 设置三个值：左上，右上/左下，右下；

• 设置四个值：左上，右上，右下，左下；
  

• 当宽高不等，即是一个长方形时

• 添加/是用来设置当前不同方向的半径值，水平方向/垂直方向

• border-radius：100px/50px；

• 添加某个角的圆角

• border-上下-左右-radius:

• 例如：右上border-top-right-radius;

• 设置某个角不同方向上的不同圆角
  

• border-top-right-radius：100px 50px;

• 如果想设置四个角不同方向上的不同圆角值

• border-radius：100px 80px 60px 40px/20px 40px 60px 80px；

• 四个值分别为：水平方向左上 右上 右下 左下/垂直方向左上 右上 右下 左下；

渐变

• 线性渐变：linear-gradient:
• 语法：linear-gradient(渐变方向，起点颜色 位置，颜色2 位置，颜色3 位置…终点颜色 位置)；
• 参数说明：
  a）第一个参数表示线性渐变的方向

方向	解释说明
to left	设置渐变为从右到左，相当于270deg
to right	设置渐变从左到右，相当于90deg
to top	设置渐变从下到上，相当于0deg
to bottom	设置渐变从上到下，相当于180deg，此为默认值，也可以指定角度，如45deg

b）第二个参数是起点颜色，可以指定颜色的位置；
c）第三个参数是终点颜色，可以在后面添加更多的颜色，表示多种颜色渐变；

• 径向渐变：radial-gradient，从一个中心开始沿着四周产生渐变效果
• 语法：radial-gradient（形状 渐变大小 坐标 颜色）
• 取值：
  a）position：确定圆心为位置，如果提供两个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二个值默认为50%，即center；
  b）shape：渐变形状

形状	解释
circle	正方形为边界的圆形渐变
ellipse	适配当前形状 ，如果宽高不一样，此值为默认值

c）size：渐变大小，即渐变到哪里停止，它右四个值

值	解释
closest-side	最近边
farthest-side	最远边
farthest-corner	最远角 ，此为默认值
closest	最近角

d）color：颜色

• 重复渐变：
• 重复径向渐变：repeating-radial-gradient；
• repeating-radial-gradient(circle closest-side at center center, #fff 0%, #fff 10%, #000 10%, #000 20%);
• 重复线性渐变：repeating-linear-gradient；

背景样式background

样式	解释说明
background-color	背景颜色
background-image	背景图片
background-repeat	背景平铺
background-attachment	背景在容器的滚动行为
background-size	背景大小
background-position	背景图片位置
background-origin	背景图片坐标原点
background-clip	背景图片的裁切，设置的是裁切，控制的是显示

坐标原点值	解释说明
border-box	显示border及以内的内容
padding-box	显示padding及以内的内容
content-box	显示content及以内的内容

背景裁切值	解释说明
border-box	从border的位置开始填充背景，会与border重叠
padding-box	从padding的位置开始填充背景，会与padding重叠
content-box	从内容的位置开始填充发背景

背景平铺值	解释说明
round	会将图片进行缩放后再平铺
space	图片不会缩放平铺，只是图片之间有间距

背景滚动值	解释说明
fixed	滚动页面时，背景位置固定不变 ，容器在滚动
scroll	当滚动容器，背景也会跟随滚动
local	背景图片会随容器一起滚动

背景大小值	解释说明
两个像素值	宽度 高度
宽度 auto	设置宽度，高度保持比例自动缩放，auto可以不写
百分比	百分比是参照父容器可放置内容区域的百分比
contain	按照比例调整图片大小，让整个图片宽高自适应元素的背景区域
cover	与contain相反，背景图片会按比例缩放，自适应占满整个背景区域 ，图片会溢出

• 建议：使用前确定宽高比与容器的宽高比是否一致，否则就会造成图片失真变形
• contain的自适应分两种：
  a）当图片大于容器时：自适应使图片全部包含在容器内，将图片等比例缩小，可能会产生空白区域；
  b）当图片小于容器时：自适应使图片全部包含在容器内，将图片等比例放大，可能会产生空白区域；
• cover的自适应分两种：
  a）当图片大于容器时：自适应使图片占满容器内容区域，将图片等比例缩小，图片会溢出；
  b）当图片小于容器时：自适应使图片占满容器内容区域，将图片等比例放大，图片会溢出；

边框图片border-image

• 主要是一一对应；

属性	解释说明
border-image-source	指定边框图片的路径 ，默认整体填充到边框容器的四个角点
border-image-slice	设置四个方向上的裁切距离，填距离无单位值，fill为内容内部填充
border-image-width	边框图片宽度，默认为元素边框的宽度
border-image-outset	设置扩展边框宽度，使用极少，容易影响页面布局
border-image-repeat	三个值：repeat 直接平铺，可能有空隙，round缩放后进行完整重复平铺和stretch默认值拉伸

• 缩写：border-image：source slice / width /outset repeat；
• border-image-slice：27 fill；border: 27px …;图片原大小81px；主要体现一一对应；
  
• 注意：
• 边框图片本质是背景图片，并不会影响元素的内容放置；
• 内容只会被容器的border和padding影响；

过渡transition

• 语法：

transition:property duration timing-function delay;

• 参数说明

参数	解释说明
transition-property	设置过渡效果的CSS属性名称
transition-duration	设置完成过渡效果所需要的时间
transition-timing-function	设置速度效果的速度曲线
transition-delay	设置过渡效果的开始时间

• 缩写：transition: 属性名称 过渡时间 时间函数 延迟；
• 补充说明transition-timing-function（了解）：

值	描述
linear	匀速
ease	先慢，再快，最后慢速结束过渡
ease-in	慢速开始过渡效果
ease-out	慢速结束过渡效果
ease-in-out	慢速开始和结束过渡效果

• 注意：
• 过渡效果执行完毕后，默认会还原到原始状态；
• 为多个样式添加过渡效果，用逗号隔开即可；
• 为所有样式添加过渡效果，只需要将transition-property的值设置为all，但是效率底，不建议使用；
• 不同浏览器使用时，需要添加各自的前缀：-webkit-，-moz-，-o-，且IE10以上才支持；
• 可以添加steps(n)，可以将过渡效果分成指定的n次来完成，跳跃性的效果，像时钟；
• 过渡效果只能产生从某一个值到另一个值的过渡，需要具体属性值，像display属性是状态值就不可以；
• 给哪个元素添加过渡效果就写在哪个元素标签里；

2D转换transform

• 通过CSS3的transform转换，我们可以对元素进行移动、缩放、旋转、斜切等；
• 2D移动：translate()；
• 语法：translate( X轴，Y轴)，一个值默认是X轴值；translateX(X轴)；translateY(Y轴)，元素左上角为原点；
• 注意：
• 需要和过渡transition配合使用，本身只是一个属性，和width，height一样，不是简单的动画效果；
• 执行完毕后，会还原到原始状态；

<style>
div{
     transition: transform 2s;
}
div:active{
            transform: translate(100px);
            }
</style>

• 2D缩放：scale()；让元素根据元素中心原点对对象进行缩放，默认值为1；

• 语法：scale(X轴，Y轴)，一个值表示X和Y相同比例缩放；或者scaleX(X轴)，scaleY(Y轴)；

• 注意：缩放的效果不会影响到页面的其他布局；

• 2D旋转：rotate(旋转角度)；

• 旋转角度为正值时，顺时针旋转；为负值时，逆时针旋转；

• 旋转中心：transform-origin：left top；取值有left top right bottom center(默认值)；

• 2D斜切：skew(斜切角度)；

• 可以让元素以其中心位置，围绕着X轴和Y轴按照一定的角度倾斜；与rotate()函数不同，rotate()函数只是旋转，而不会改变形状。skew()函数不会旋转，会改变元素的形状；

• 语法：skew(X轴，Y轴)；一个值默认为X轴值，Y轴值为0；或者skewX()，skewY()；

• transform：skew(-30deg)效果如图；
  

• 注意：如果角度为正，则往当前轴的负方向斜切，如果角度值为负，则往当前轴的正方形斜切；

3D转换

• 3D移动：translate3d()；

• 语法：translate3d(X轴，Y轴，Z轴)；也可以translateX()等；

• 3D缩放：scale3d()；

• 语法：scale3d(X轴，Y轴，Z轴)；也可以scaleX()等；

• 3D旋转：rotate3d()；

• 语法：rotate3d(X轴，Y轴，Z轴，旋转角度)；也可以rotateX()等；

• 其中X轴 Y轴 Z轴分别代表其对应的方向上的一个向量值；

• 例如rotate3d(1px，10px，0，50deg)；旋转中心是绿色的线；
  

• 注意： 因为网页是平面，所以看不出来Z轴，即3D效果，需要从“侧面”看才可以；

• 透视景深效果：

• 左手法则：大拇指指向坐标轴的下方向，手指环绕的方向为正方向

• perspective(length)为一个元素设置三维透视的距离，仅作用于元素的后代，而不是元素本身；默认值为0；
  

• perspective-origin，设置镜头在平面上的位置，默认放在元素的中心；

• transform-style：时转换的子元素保留3D转换 （需要设置在父元素中）；

值	描述
flat	不保留3D转换
preserve-3d	保留3D转换

关键帧动画

• animation: name duration timing-function delay iteration-count direction fill-mode;
• animation：动画名字，时间，时间函数，延迟，动画次数，方向（alternate来回交替），结束时状态
• 设置动画循环播放：animation-iteration-count：infinite;
• 设置交替动画：animation-direction：alternate
• 动画执行完毕默认回到原始状态；
• 动画结束时状态fill-mode

值	说明
forwards	保留动画结束时状态,有延迟时，不会立刻进入动画的初始状态
backwards	不会保留初始状态，有延迟时，会立刻进入动画的初始状态，如旋转角度
both	既 保留动画结束时状态，有延迟时，也会立刻进入动画的初始状态

• 动画播放状态animation-play-state

值	说明
paused	暂停
running	播放

• 重点记忆动画名字和时间；

timing-animation:linear;
timing-animation:steps(60);

• 动画时间函数的值可以设置匀速变速，也可以设置为时间分成多少步完成（跳跃性动画）；

web字体和字体图标

• web字体格式

1. Ture Tpe(.ttf)格式；
2. Open Type(.otf)格式
3. Web Open Font Format(.woff)格式
4. Embedded Open Type(.eot)格式
5. SVG（.svg）格式

• 要自定义项生成对应字体文件的内容；
• 使用网络资源生成web字体；
• 使用

6. 定义自定义字体；注意路径是否正确；
7. 定义类样式方便使用自定义字体；
8. 指定样式，调用

<style>
        @font-face {
            font-family: 'webfont';
            font-display: swap;
            src: url('fonts/webfont.eot');
            /* IE9 */
            src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('fonts/webfont.woff2') format('woff2'),
                url('fonts/webfont.woff') format('woff'),
                /* chrome、firefox */
                url('fonts/webfont.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('fonts/webfont.svg#webfont') format('svg');
            /* iOS 4.1- */
        }
        .myFont{
            font-family: webfont;
        }
    </style>
</head>

<body>
    <span class="myFont">
        咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩咩你好未来我们知识像
    </span>
</body>

字体图标

• 使用方式与web字体相似，需要指定所用的图标，同样注意路径；
• 使用前下载字体文件（阿里巴巴矢量图标库等）

<style>
        @font-face {
            font-family: 'iconfont';
            src: url('fonts/iconfont.eot');
            src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
                url('fonts/iconfont.woff2') format('woff2'),
                url('fonts/iconfont.woff') format('woff'),
                url('fonts/iconfont.ttf') format('truetype'),
                url('fonts/iconfont.svg#iconfont') format('svg');
        }
        .myFont{
            font-family: "iconfont";
            color: green;
            font-size: 50px;
        }
        .tree::before{
            content: "\e607";
        }
    </style>
</head>
<body>
    <div class="myFont tree"></div>
</body>

布局

1. 多列布局：

属性	解释说明
column-count	设置列的具体个数
column-width	控制列的宽度
column-gap	两列之间的缝隙间隔大小
column-rule	设置列之间的宽度，样式和颜色
column-span	规定元素应该横跨多少列（n指定n列，all跨所有列） 一般是1和all两个值

• 设置列宽时，取大优先，若认为设置的宽度大，就取更大只，但是会填充整个屏幕，以为着最终宽度可能也会大于设置宽度；
• 若默认计算的宽度大就使用默认宽度；

2. 伸缩布局

属性	解释说明
display:flex	设置盒子内所有直接子元素为伸缩项（flex item）
justify-content	设置或检索弹性盒子在主轴（横轴）方向上的对齐方式
flex-flow	是flex-wrap和flex-direction的综合
flex-wrap	控制子元素是否换行显示，默认不换行
flex-direction	设置元素在主轴上的排列方向，默认主轴方向是row，水平方向
flex	是flex-grow,flex-shrink和flex-basis的简写
flex-grow	扩展子元素的宽度（写在子元素的选择器内 ），默认值0
flex-shrink	定义收缩比例，通过设置的值来收缩空间，默认值1
flex：[number]	这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例
align-items	设置子元素（伸缩项）在侧轴方向上的对齐方式

• display:flex，设置盒子内所有直接子元素为伸缩项（flex item）；
• justify-content：设置子元素的排列方式；

属性值	解释说明
flex-start	让子元素从父容器起始位置开始排列
flex-end	让子元素从父容器结束位置开始排列
center	让子元素从父容器中间位置开始排列，居中对齐
space-between	左右对齐父容器开始和结束，中间平均分 ，产生相同间距
space-around	将多余的空间平均的分在么一个子元素的两边，每个子元素相当于margin:0 auto

• 当子元素的宽度和大于父容器宽度时，子元素会自动平均收缩；
• flex-wrap的值解释

属性值	解释说明
nowrap	不换行
wrap	换行
wrap-reverse	翻转，若原来从上到下，翻转就是从下到上 排列

• 排列方向，一般默认为主轴的方向，row即水平方向
• 设置排列方向为flex-direction: column，效果如图：
  
• flex-direction: 子元素的排列方向；

属性值	解释说明
row	水平排列方向，从左到右，默认
row-reverse	水平排列方向，从右到左
column	垂直排列方向，从上到下
column-reverse	垂直排列方向，从下到上

• flex-flow是flex-wrap和flex-direction的综合，即flex-flow的属性值即包含flex-wrap也包含flex-direction；
• 例如：flex-flow：row wrap；
• flex-grow设置子元素的扩展宽度，默认为0，即子元素不会占据剩余空间
• 比例值计算：当前控件的flex-grow/所有兄弟子元素的flex-grow和；
• flex: [number]：这个语法指定了一个数字，代表了这个伸缩子项占用的剩余空间比例；

.left{
flex:1;
height:500px;
border:1px solid red;
}
.right{
flex:4;
height:500px;
border:1px solid blue;
}

• 上述代码效果如图
  
• align-items：设置子元素（伸缩项）在侧轴方向上的对齐方式；
• align-items可取值如下标

属性值	解释说明
center	设置侧轴方向上居中对齐
flex-start	设置侧轴方向上顶对齐
flex-end	设置侧轴方向上底对齐
stretch	让子元素在侧轴方向上拉伸，填充满整个侧轴方向 ，默认值
baseline	设置侧轴文本基线对齐

• align-center：设置单个元素在侧轴方向上的对齐方式，具体值同上；