面试题:css选择器、块级元素水平垂直居中，盒子左右定宽，中间自适应的方法1.17

17.css选择器有哪些，选择器的权重的优先级
ID选择器,类选择器，元素选择器，
属性[type=“text”],伪类:hover,伪元素::after
子选择器（p>h1），相邻选择器（h+p相邻兄弟元素）
权重计算规则
行业样式 1000
ID 0100
类，伪类，属性 0010
元素选择器，伪元素选择器p，div，::after 0001
子选择器（p>h1），相邻选择器(h1+h2)
18. 块级元素水平垂直居中的方法有哪些（三个方法）
方法一：利用position:absolute,然后设置top=50%，left
最后利用margin设置top值为 -0.5height,left=-0.5width
方法二：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。
方法三：设置display=inline-block，设置属性vertical-align:middle;
19.三个盒子，左右定宽，中间自适应有几种方法
方法一:都用绝对定位,center设置left、right

<div class="left">left</div>
  <div class="right">right</div>
  <div class="center">center</div>

css

    .left {
      height: 200px;
      width: 200px;
      left: 0;
      position: absolute;
      background-color: aquamarine;
    }
    .right {
      height: 200px;
      width: 200px;
      right: 0;
      position: absolute;
      background-color: aqua;
    }
    .center {
      height: 200px;
      left: 200px;
      right: 200px;
      position: absolute;
      background-color: bisque;
    }

方法二：center绝对定位设置left、right，DIV（left，right）设浮动

    .left{
      height: 200px;
      width: 200px;
      float: left;
      background-color: aquamarine;
    }

    .right {
      height: 200px;
      width: 200px;
      float: right;
      background-color: aqua;
    }

    .center {
      height: 200px;
      left: 200px;
      right: 200px;
      position: absolute;
      background-color: bisque;
    }

方法三:div必须是center放在最后。left、right左右浮动，center使用margin

.left{
      height: 200px;
      width: 200px;
      float: left;
      background-color: aquamarine;
    }

    .right {
      height: 200px;
      width: 200px;
      float: right;
      background-color: aqua;
    }

    .center {
      height: 200px;
      margin-left: 200px;
      margin-right: 200px;
      background-color: bisque;
    }