01CSScss笔记01，选择器和浮动，display和position，css新特性，transform、transi

1. 块级元素和行内元素的区别

块级元素独占一行，行内元素一行显示
块级元素默认宽度为父元素的 100% ，行内元素靠内容撑开
块级元素可设置宽高，行内元素不生效
块级元素 margin、padding 可设置四周，行内元素只设置水平方向
布局时，块级元素可包含块级和行内，行内不可包含块级
块级元素有：h1-h6、div、p、ul/ol/li、dl/dt/dd、table/tr/th/td、header/footer/nav/aside/article...
行内元素有：img、span、a、b/i/u/s/del/em/sup/sub/small/big、input/button/textarea、video...

2. 选择器（5种）

基础选择器：全局选择器（*）、元素选择器、类选择器、id选择器、合并选择器（,）、交集选择器（挨着）
关系选择器：后代选择器（空格）、子代选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）
伪类选择器：:link/:visited、:hover/:active、:first-child/:last-child/:nth-child()、:first-of-type/:last-of-type/:nth-of-type/:nth-last-of-type、:only-chlid/:empty/:not()、:focus/:checked、::selcetion
伪元素选择器：::before/::after
属性选择器：p[class^='b'] ^e--以e开头、&e--以e结尾、*e--包含e

3. 浮动

浮动原理
- 元素浮动后排除到普通文档流之外
- 元素浮动后不占据页面空间（原位置不保留）
- 浮动元素碰到父元素的边框或浮动元素的边框就会停止
- 浮动不会层叠
- 只有左右浮动
- 浮动后所有元素转为块级元素
- 元素浮动后，文字后自动环绕元素，不会覆盖
float: left|right
子元素全部浮动后，若父元素没有设置高度，会对后面元素造成影响（比如：父元素高度为0）
清除浮动方法
- 给浮动元素的父元素设置高度
- 给浮动元素的父元素设置 overflow: hidden（父元素自动找高）
- 给受影响的元素清除浮动 clear: left|right|both（父元素没找高）
- 在浮动元素最后（父元素里的最后一个子元素）加空div div{clear: both;}
- 浮动元素的父元素 ::after{content:"";display:block;clear:both}

4. 元素定位 position

static 默认值，没有定位
relative 相对于自己原位置定位，定位后原位置保留，left/top/right/bottom，自己小范围移动
absolute 相对于已经定位（relative/absolute/fixed）的父元素定位（如果无，逐级向上直至body），定位后原位置不保留，left/top/right/bottom（一般给父元素加相对定位），形成独立一层
fixed 相对于浏览器窗口定位，定位后原位置不保留，left/top/right/bottom，固定在页面某个位置
其他：z-index仅在定位元素上奏效（relative/absolute/fixed）

5. 元素类型 display

block
inline-block 在一行显示又可设置宽高，行内块会识别代码之间的空白，如：img、input、button
inline
table-cell
flex
none 不显示，隐藏后原位置不保留

6. 设置属性后原位置不保留

float: left|right
position: position|fixed
display: none
设置以上三个属性后，块级元素默认宽度由内容撑开

7. 隐藏的区别

display: none 隐藏自己，原位置不保留
visibility: hidden 隐藏自己，原位置保留
opacity: 0 元素透明度为0，原位置保留
overflow: hidden 隐藏溢出部分

8. CCS3新特性

圆角 border-radius: px|%
盒阴影 box-shadow:h-shadow v-shadow blur spread color inset
字阴影 text-shadow:h-shadow v-shadow blur color
背景渐变
- 线性渐变 background: linear-gradient(方向, 颜色1,颜色2...)
- 径向渐变 background: -webkit-radial-gradient(渐变的中心点, 渐变的形状, 颜色1,颜色2...)
iconfont，引用图标库图标
厂商前缀，解决浏览器对CCS3新特性的支持
css hac，浏览器不同的版本不同的写法，如IE6和IE7
多列，把文本分成多列

8.1 转换 transfrom

使元素在位置或形状上发生一定的改变
transform: translate() rotate() scale() skew()
- 位移
  - transform: translate(x,y)
    - transform: translateX()
    - transform: translateY()
- 旋转
  - transform: rotate(-60deg)
  - 2D只取一个值，正值为顺时针旋转，负值为逆时针
  - 元素默认中心点为宽高的一半，transform-origin 可以修改元素的中心点
  - 旋转时，会旋转元素的坐标轴；建议先写位移再写旋转
- 缩放
  - transform: scale(x,y)
  - 取值：number ；0~1 缩小；> 1 放大；默认为 1
- 倾斜
  - transform: skew(xdeg, ydeg)
    - transform: skewX()
    - transform: skewY()
- 3D转换
  - transform: translate3d(x,y,z)
  - transform: rotate3d()
  - transform: scale3d()

8.2 过渡 transition

使元素从一个样式变为另一个样式
过渡必须要有触发事件：鼠标悬停、鼠标点击等
transition：过渡的属性持续时间速度变化类型延迟时间（可分开可简写）
- transition-property 过渡的属性必需
  - 多个属性，逗号隔开，一般简写为all
  - 可以过渡的属性
    - 取值为数值
    - 取值为颜色
    - 阴影 box-shadow text-shadow
    - 转换 transform
    - 背景渐变
- transition-duration 过渡持续时间必需默认 0s|0ms
- transition-timing-function 过渡的速度变化类型可选
  - ease 默认值先加速后减速
  - ease-in 加速
  - ease-out 减速
  - ease-in-out 先加速后减速
  - linear 匀速
- transition-delay 过渡的延迟时间可选默认 0s|0ms
  - 可以取负值，表示把这段时间的效果跳过
使用

<style>
    .transitionBox{
        width: 50px;
        height: 50px;
        background-color: aquamarine;
        /* transition-property: width,transform,background-color; */
        transition: all 5s;
    }
    .transitionBox:hover{
        width: 100px;
        background-color:lightpink;
        transform: translate(50px) rotate(180deg);
    }
</style>
<div class="transitionBox"></div>

8.3 动画

与过渡的区别：可制作复杂动画，可以没有触发事件，可控制次数
定义动画
- from|0% 是开头动画，to|100% 是动画完成
- @-webkit-keyframes name{}
调用动画
- -webkit-animation:name(必需) 动画的持续时间（s|ms）(必需) 动画的速度变化类型动画的延迟时间（s|ms）动画的播放次数（number|infinite）动画播放方向（alternate：偶数次倒着播放动画停在最后一帧（forwards））
- animation-play-state: running | paused(暂停)
使用动画

<style>
    @-webkit-keyframes test {
        0%{
            width: 150px;
            height: 150px;
            background-color: lightblue;
            transform: rotate(270deg);
        }
        25%{
            transform: translate(300px,300px) scale(150%);
        }
        50%{
            transform: translate(400px,400px) scale(50%);
            border-radius: 50%;
            background-color: #d85369;
        }
        100%{
            background-color: #d8d853;
            transform: translate(500px,500px)
        }
    }
    .animationBox{
        background-color: aquamarine;
        animation: test 4s ease-in -1s 5 alternate forwards;
        -webkit-animation: test 4s ease-in 3s 5 alternate forwards;
    }
    .animationBox:hover{
        animation-play-state:paused;
    }
</style>
<div class="box animationBox"></div>

8.4 弹性盒模型 flex box

flex box 中 float、clear、vertial 不生效，子元素默认宽度由内容撑开
父元素上属性
- 弹性容器 -- display: flex
- 主轴排列方向 -- flex-direction: row|column|row-reverse|column-reverse
- 主轴对齐方式 -- justify-content: flex-start|flex-end|center|space-between|space-around
- 侧轴对齐方式 -- align-items: flex-start|flex-end|center|stretch
子元素上属性
- flex: flex-grow flex-shrink flex-basis，默认 flex: 0 1 auto
- flex-grow: number 子元素分配父元素的剩余空间的比例；为0，不放大
- flex-shrink: 为number，当空间不足时，根据比例缩小；为0，不缩小
- flex: 1 === flex: 1 1 auto

8.4.1 盒模型

标准盒模型
- box-sizing: content-box
- width(content)+padding+border+margin
怪异盒模型
- box-sizing: border-box
- width(content+padding+border)+margin
弹性盒模型
- display: flex

9. 媒体查询 medio query

实现响应式布局，写一次样式兼容所有终端，但代码冗余
内部引入（同一个ccs文件）

@media screen and (max-width:768px){
    .mediaBox{
        width: 100%;
        height: 100px;
        background-color: lightblue;
    }
}
@media screen and (min-width:768px) and (max-width:992px){
    .mediaBox{
        width: 100%;
        height: 100px;
        background-color: rgb(241, 117, 190);
    }
}
@media screen and (min-width:992px){
    .mediaBox{
        width: 100%;
        height: 100px;
        background-color: rgb(162, 243, 176);
    }
}

外部引入（不同的css文件）

<!-- 媒体查询外部引入 -->
<link rel="stylesheet" href="moblie.css" media="screen and (max-width:768px)">
<link rel="stylesheet" href="ipad.css" media="screen and (min-width:768px) and (max-width:992x)">
<link rel="stylesheet" href="pc.css" media="screen and (min-width:992px)">

10. BFC

BFC，通俗来说，就是一个不干扰外界也不受外界干扰的盒子

Block Formatting Context，即块格式化上下文。
BFC，网页上一个独立且隔离的渲染区域，创建BFC的目的，就是想把容器内部的内容限定在这部分区域中，而不与外部元素产生作用
特性
1. 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
2. 在 BFC 中上下相邻的两个容器的 margin 会重叠（同一个BFC下外边距会发生折叠），创建新的 BFC 可以避免外边距重叠（但两个BFC之间不会）。
3. 计算 BFC 的高度时，需要计算浮动元素的高度。
4. BFC 区域不会与浮动的容器发生重叠。
5. BFC 是独立的容器，容器内部元素不会影响外部元素。
6. 每个元素的左 margin 值和容器的左 border 相接触。

使用

利用 4，我们可以实现三栏（或两栏）自适应布局。

  <style>
          #left {
              background-color: aquamarine;
              width: 200px;
              height: 100px;

              float: left;  /*  形成BFC  */
          }
          #right {
              background-color: bisque;
              height: 100px;

              overflow: hidden;  /*  形成BFC，不与浮动容器发生重叠  */
          }
      </style>

      <div class="container">
          <div id="left">左</div>
          <div id="right">右</div>
      </div>

利用 2 ，我们可以避免 margin 重叠问题。

  <style>
          #parent {
              background-color: bisque;
              height: 100px;
              margin: 20px;
              overflow: hidden; /* 形成BFC，使 child 的 margin 在 parent 里*/
          }
          #child {
              margin: 10px;
              height: 10px;
              background-color: aliceblue;
          }
      </style>

      <div id="parent">
          <div id="child"><div>
      </div>

利用 3 ，我们可以避免浮动的高度塌陷。

创建 BFC
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position 为 absolute 或 fixed
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)

11. 响应式布局

11.1 pc端

min-width 限制最小的宽度，浏览器宽度小于 min-width 就直接滚动。
中心内容固定宽度，其他留白

11.2 h5

11.2.1 rem + pxToRem

概念
- em 父元素的字体大小
- rem 根元素的字体大小
- vw 视窗宽度的 1%
- vh 视窗高度的 1%
实现原理
- 写代码时写rem，监听屏幕视窗宽度，按一定比例赋值给 html 的 font-size，根字体会随屏幕宽度而变化
- 写代码时直接写px，编译时利用插件转为 rem。dom中元素的大小，就会随屏幕变化而变化了
实现

const MAX_FONT_SIZE = 420 // 定义最大的字体

document.addEventListener('DOMContentLoaded', () => {
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
  html.style.fontSize = fontSize + 'px'
})

在vue-cli 中装 postcss-pxtorem 插件

11.2.1 rem + postcss

实现原理：vw 相对于视窗宽度的单位，随宽度变化而变化
代码时直接写px，安装插件postcss-px-to-viewport

flex 与 rem 结合使用更佳

12. 杂七杂八

三角形

  .triangle{
      width: 0;
      height: 0;
      border-bottom: 10px solid rgb(226, 69, 129);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
  }

精灵图/雪碧图
- 减少页面http请求，较少图片字节数
- 使用
  - 设置好容器的宽高
  - background-image:url("")
  - background-position:;
html实体字符  <>
列表属性（继承性）