CSS3

查看浏览器是否支持CSS3属性：https://caniuse.com/

1.利用CSS实现三角形和梯形

//下三角或下梯形
// html

//css
.demo {
    margin: 100px auto;
    width: 0px;  /*下三角*/
    /*下梯形 */
    /*width: 20px;*/ 
    height: 0px;
    border-top: 30px solid red;  /*决定三角的高度 */
    border-left: 30px solid transparent;  /*决定三角的宽度*/
    border-right: 30px solid transparent;  /*决定三角的宽度*/
}

2.CSS实现旋转及确定旋转原点

// html

//css
.demo {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    background-color: red;
    /*确定旋转原点*/
    transform-origin: 0 0;  /*原点左上角*/
    /*transform-origin: 0 100%;  原点左下角*/
    /*transform-origin: 100% 0;  原点右上角*/
    /*transform-origin: 100% 100%;  原点右下角*/
    transform: rotate(35deg);  /*旋转35°*/
}

3.CSS实现太极图

body {
    background-color: grey;
}
/*实现左黑右白大圆*/
.demo {
    margin: 100px auto;
    width: 150px;
    height: 300px;
    background-color: white;
    border-left: 150px solid black;
    border-radius: 50%;
    position: relative;
}

/* 实现内白外黑圆环 */
.demo::before {
    content: '';
    width: 0px;
    height: 0px;
    padding: 25px;
    border-radius: 50%;
    background-color: white;
    border: 50px solid black;
    position: absolute;
    top: 0;
    left: -75px;
}

/* 实现内黑外白圆环 */
.demo::after {
    content: '';
    width: 0px;
    height: 0px;
    padding: 25px;
    border-radius: 50%;
    background-color: black;
    border: 50px solid white;
    position: absolute;
    bottom: 0;
    left: -75px;
}

4.float浮动

float：指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除。
清除浮动：

{
  clear: left;  /*不允许左边有浮动元素*/
  clear: right;  /*不允许右边有浮动元素*/
  clear: both;  /*不允许两边有浮动元素*/
}

该清除浮动方式只能影响设置该属性的元素本身，不能影响其他元素，也就是说，假设两个div，div1， div2均设置为浮动，现在想要div2移至下一行，即清除div1浮动，那么要在div2内设置clear属性，在div1内设置没有作用(即使设置为both)，因为该属性只会影响设置该属性的元素本身，使之周围没有浮动元素，但不会清除自身的浮动属性。

浮动元素导致父元素无法被撑起：父元素设置高度；最后一个子元素设置清除浮动；父元素设置伪类清除浮动；父元素设置overflow属性
利用父元素设置伪类清除浮动：

 
  
   

      
1
      
2
      
3
   
  

注意：伪类的content必须设置，即使设置为空；display必须设置为block

5.鼠标进入变成手型

{
  cursor: pointer;
}

6.过渡效果

注意：过渡效果需加在相应对象上，而不是触发动作中。如：图片需加过渡效果，则transition需加在img内，而不是img::hover内

{
  transition-duration: 2s; /*过渡持续时间*/
  transition-property: all; /*过渡属性，height, width, border, all等取值*/
  transition-delay: .2s; /*过渡延迟时间*/
  transition-timing-function: ease; /*过渡函数*/

  /*简写*/
  transition: 2s all .2s ease;
}

7.伪元素和伪类

{
  .demo::before {
    content: '';  /*content属性必须有*/
  }
}

• :root 选择文档的根元素，等同于 html 元素

• :empty 选择没有子元素的元素

• :target 选取当前活动的目标元素

• :not(selector) 选择除 selector 元素以外的元素

• :enabled 选择可用的表单元素

• :disabled 选择禁用的表单元素

• :checked 选择被选中的表单元素

• :after 在元素内部最前添加内容

• :before 在元素内部最后添加内容

• :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n

• :nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数

• :nth-child(odd) 匹配所有第奇数个子元素，第1个，第3个，第5个...

• :nth-child(even) 匹配所有第偶数个子元素，第2个，第4个，第6个...

• :nth-child(3n+1) 匹配所有第3n+1个元素，第4个，第7个，第10个...

• :first-child 匹配第一个子元素

• :last-child 匹配最后一个子元素

• :only-child 匹配仅有的一个子元素

• :nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n

• :nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数

• :nth-of-type(odd) 匹配所有第奇数个指定类型子元素

• :nth-of-type(even) 匹配所有第偶数个指定类型子元素

• :nth-of-type(3n+1) 匹配所有第3n+1个指定类型子元素

• :first-of-type 匹配第一个指定类型子元素

• :last-of-type 匹配最后一个指定类型子元素

• :only-of-type 匹配仅有的一个指定类型子元素

• ::selection 选择被用户选取的元素部分

• :first-line 选择元素中的第一行

• :first-letter 选择元素中的第一个字符

8.动作选择器

  


{
  /*当鼠标移动到.main div时，img发生一些变化*/
  .main::hover img {
    /*一些操作*/
  }
}

9.animation动画

keyframes 关键帧

/*由左边20%移动到右边80%*/
.rect {
    width: 100px;
    height: 100px;
    background-color: red;
    position: fixed;
    animation: mymove 2s infinite;
}

@keyframes mymove {
    from { top:0; left: 20% }
    to { top:0; left: 80%; }
}

/* 环绕一周 */
.rect {
    width: 100px;
    height: 100px;
    background-color: red;
    position: fixed;
    animation: mymove 2s infinite;
}

@keyframes mymove {
    0% { top:0; left: 20% }
    25% { top:0; left: 80%; }
    50% { top:80%; left: 80%; }
    75% { top:80%; left: 20%; }
    100% { top:0; left: 20%; }
}

animation属性

{
    animation-name: mymove; /*动画名称，关键帧名称*/
    animation-duration: 3s; /*动画持续时间*/
    animation-timing-function: ease; /*动画效果，与transition相应效果相同*/
    animation-delay: .2s; /*延迟时间*/
    animation-iteration-count: 2; /*动画执行次数，infinite为无限执行*/
    animation-direction: alternate; /*动画执行方向，normal为正常方向，alternate为反向执行：一次正向一次反向，当仅执行一次时，只执行正向*/
    /*animation-fill-mode, 默认为none*/
    /*forwards: 当动画完成后，保持最后一个属性值(在最后一个关键帧中定义)*/
    /*backwards: 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值(在第一个关键帧中定义)*/
    /*both: 向前和向后填充模式都被应用*/
    animation-fill-mode: none; 

  /*简写方式*/
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

animation实现spinner

 

    

    

    

    

    

  

.spinner {
    width: 60px;
    height: 60px;
    margin: 100px auto;
}

.spinner div {
    width: 6px;
    height: 100%;
    background-color: #34fa40;
    display: inline-block;
    animation: loading 1.2s infinite ease-in-out;
}
.spinner div:nth-child(2) {
    animation-delay: -1.1s;
}
.spinner div:nth-child(3) {
    animation-delay: -1.0s;
}
.spinner div:nth-child(4) {
    animation-delay: -0.9s;
}
.spinner div:nth-child(5) {
    animation-delay: -0.8s;
}

@keyframes loading {
    0%, 40%, 100% { transform: scaleY(0.4); }
    20% { transform: scaleY(1.0); }
}

10.text-shadow字体阴影

{
  text-shadow: 1px 1px 1px red;  /*x轴偏移量，y轴偏移量，阴影大小，阴影颜色*/
}

/* 发光 */
.font1 {
    color: white;
    text-shadow: 0px 0px 20px red;
}

/* 内嵌 */
.font2 {
    color: black;
    text-shadow: 0px 1px 1px white;
}

/* 3D ，阴影一点一点偏移形成3D效果*/
.font3 {
    color: white;
    text-shadow: 1px 1px rgba(147, 240, 248, 0.8),
                 2px 2px rgba(147, 240, 248, 0.8),
                 3px 3px rgba(147, 240, 248, 0.8),
                 4px 4px rgba(147, 240, 248, 0.8);
}

11.text-overflow

 /*超出部分直接剪切*/
{
  overflow: hidden;
  text-overflow: clip; 
}

/*超出部分使用...代替*/
{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; 
}

12.媒体查询

不同设备应用不同CSS

/*style.css内容*/
@import url(comman.css);    /*应用到所有设备类型*/
@import url(screen.css) screen; /*应用到屏幕设备*/
@import url(print.css) print;   /*应用到打印设备*/

13.实现左固定右自适应布局及顶部一行固定右固定宽度左自适应布局

左固定右自适应：

float实现：
注意浮动的div一定要放在前面，因为float会导致元素脱离文档流，放到后面会使浮动元素浮动到下一行

flex实现：
注意固定宽度元素一定要设置flex-shrink属性，否则会随屏幕变小随之变小

定位实现：
注意绝对定位元素的CSS属性right: 0，是实现右侧自适应的重点

顶部一行固定右固定宽度左自适应布局：

使用float实现

使用flex布局实现

使用absolute绝对定位实现

14.padding

padding百分比是按照宽度确定的，要实现高度为宽度的一半，可不设置高度，将padding设置为{padding: 0 25%}，将box撑起来。
当含有margin时，box宽度不等于视口宽度，此时设置padding的百分比是按照视口宽度确定的，因此高度不等于box宽度的一半，而等于视口宽度的一半。此时可在内部添加一个div，将文字放到此div内，设置高度为0，然后再利用padding将高度撑起来。

实现元素A垂直水平居中，字体20px，宽度自适应，高度为宽度一半：

    

        
A
    

15.position

position取值：

• static: 默认值，文档流中正常定位
• relative: 相对定位，相对元素在文档流正常位置定位
• absolute: 绝对定位，相对具有static定位以外的距离最近的父元素
• fixed: 固定定位，相对于浏览器窗口
• inherit: 继承其父元素定位
• sticky: 当窗口滚动到该元素后，该元素将在指定位置悬浮不同(类似于此时使用fixed定位)；比如指定top:50px，当滚动到该元素后，该元素将悬停在距离其父元素顶部50px位置

16.reflow(回流)与repaint(重绘)

reflow：当布局发生变化时，如一个元素的显示与隐藏，边距，大小发生变化等，都会引起浏览器的回流
repaint：当布局未发生变化，但元素的一些属性发生变化时，如背景颜色，字体颜色，边框颜色等发生变化时，会引起重绘

17.box-sizing

三种取值：content-box(默认)|border-box|inherit
content-box: 宽高只包含内容，不包含内边距与边框
border-box: 宽高包括内容，内边距与边框
inherit: 从父元素继承box-sizing属性

18.权重计算

!important > 内联样式 > id选择器 > 类选择器=伪类选择器=属性选择器 > 标签选择器=伪元素选择器 > 通配符 > 继承
内联: 1000
id: 0100
类选择器: 0010
标签: 0001
通配符: 0000
继承: 没有权重

注意： 1000 > 0,99,99,99 因为比较是从左往右，逐个比较的，前一级相等才会比较下一级

19.伪类的n是从1开始计算的

:nth-child(n) 选定第n个子元素，但是是从1开始数，父元素下第1个子元素，n就为1，而不是0

20.flex布局

flex容器属性

1. flex-direction

• row 主轴为水平方向，起点在左端，默认值
• column 主轴为垂直方向，起点在上端
• row-reverse 主轴为水平方向，起点在右端
• column-reverse 主轴为垂直方向，起点在下端

2. flex-wrap

• nowrap 不换行，即使子元素宽度相加超出100%，也不会换行，默认值
• wrap 换行，当一行无法容纳所有子元素时会自动换行
• wrap-reverse 反向换行，但第一行会在最下面，最后一行在最上面

3. flex-flow

• || flex-direction和flex-wrap简写形式

4.justify-content
与主轴方向有关，默认水平方向主轴，从左至右

• flex-start 左对齐，默认值
• flex-end 右对齐
• center 居中对齐
• space-between 所有子元素之间间隔相同
• space-around 所有子元素两侧间隔相同，因此子元素间的间隔是子元素与边框间隔的2倍

5.align-items
与交叉轴方向有关，假设交叉轴垂直方向，由上至下

• flex-start 顶部对齐
• flex-end 底部对齐
• center 中心对齐
• baseline 文字第一行基线对齐
• stretch 当子元素未设置高度或高度为auto时，会拉满(所有元素拉至当前行最高子元素高度)

6.align-content
多根轴线对齐方式，如果只有一根轴线，该属性不起作用

• flex-start 与交叉轴的起点对齐
• flex-end 与交叉轴的终点对齐
• center 与交叉轴的中心点对齐
• space-between 两端对齐，多根轴线之间间距平分
• space-around 轴线两侧间距相同，因此轴线之间间距是轴线与两侧间距的2倍
• stretch 若子元素未设置高度，或高度auto，则填满交叉轴线，默认值

flex子元素属性

1.order

• integer 取值为整数值，取值越小，元素越靠前，默认为0

2.flex-grow

• integer 取值为整数值，默认值为0，即存在剩余空间也不放大；若所有元素均设置为1，则将平分剩余空间；若所有元素均不为0且均不相等，则将按照该值的比例分配剩余空间。

3.flex-shrink

• interger 取值为1或0，默认值为1，即当空间不足时将默认缩小；若有一个子元素设置为0，其余为1，则空间不足时，其余子元素均缩小，而该子元素不缩小。

4.flex-basis

• | auto 默认值为auto，它决定了主轴在分配剩余空间之前，元素占据的主轴空间。主轴将根据该值计算是否有剩余空间。也可以设置为固定值，如350px，但即使设置为固定值，若未设置flex-shrink属性为0，当空间不足时，该元素也会随之缩小。

5.flex

• || || 缩写形式，默认值为0 1 auto。

该属性有两个快捷值：

• auto: 1 1 auto 自动放大和缩小
• none: 0 0 auto 不放大也不缩小，当元素宽度设置为固定值时，宽度将不随窗口大小变化而发生变化

推荐优先使用该简写属性而不是三个分开属性，因为浏览器会推算相关值

5.align-self
允许某元素修改自己的对齐方式，覆盖align-items的值
取值为：flex-start | flex-end | center | baseline | stretch

21. BFC规则及触发条件

BFC就相当于一个封闭的盒子，里面的元素不会影响外部布局，反之，外部元素也不会影响盒子里面的元素布局
规则：

• 当父级元素触发BFC时，里面的浮动元素高度也会被计算。
• BFC区域不会与float元素发生重叠；非浮动元素触发BFC时，不会覆盖浮动元素，因为浮动元素也是一个BFC，两个封闭的盒子不会相互覆盖。
• 父级元素触发BFC时，子元素的margin不会再传递给父级元素；相当于把父级元素盒子给封上了，子元素的margin将相对于父元素边缘计算；当父级元素未触发BFC时，相当于盒子没封上，子元素的margin相对于更外层的边缘计算。
• 两个BFC之间的margin不会重叠；同一个BFC内的块级元素之间的margin会重叠。

触发条件：

• 元素的overflow不为visiable
• 元素的float属性不为none
• 元素的position属性不为relative或static
• 元素的display属性值为table-caption，table-cell或inline-block

BFC应用场景

• float属性引发父级元素高度塌陷时，可以通过父级元素触发BFC清除浮动，这是因为BFC内部浮动元素也会参与高度计算
• 利用浮动元素设置固定宽度，非浮动元素触发BFC，从而不与浮动元素发生重叠，实现左固定右自适应或右固定左自适应布局
• 当不希望margin传递时，可以触发父级元素BFC；当不希望兄弟元素间margin重叠时，可以使兄弟元素均触发BFC

22.水平垂直居中

使用绝对定位absolute，margin:auto实现：

使用绝对定位absolute，transform实现

使用flex布局实现