在我心中---css经典问题

布局

（一）圣杯布局、双飞翼布局

• 圣杯布局
  

  	<div class="box">
      <div class="center">123</div>
      <div class="left">1</div>
      <div class="right">333</div>
    </div>

===CSS==========

.box {
  width: 500px;
  height: 300px;
  background-color: #2c3e50;
  div {
    float: left;
    height: 100%;
    text-align: left;
  }
  .center {
    width: 100%;
    background-color: yellow;
    padding: 0 100px;
    box-sizing: border-box;
  }
  .left {
    width: 100px;
    background-color: #42b983;
    margin-left: -100%;
  }

  .right {
    width: 100px;
    background-color: bisque;
    margin-left: -100px;
  }
}


//这里我是使用 box-size 如果不使用 则可以使用 position:relative  和 left  right  来 达到效果

• 双飞翼布局
  

 <div class="fly">
      <div class="center">
        <div class="body">123123</div>
      </div>
      <div class="left">1</div>
      <div class="right">333</div>
    </div>

.fly {
  width: 500px;
  height: 300px;
  .center,
  .left,
  .right {
    height: 100%;
    float: left;
    text-align: left;
  }
  .center {
    width: 100%;
    /*box-sizing: border-box;*/
    background-color: yellow;
    .body {
      margin: 0 100px 0 50px;
      background-color: bisque;
    }
  }
  .left {
    background-color: #42b983;
    width: 50px;
    margin-left: -100%;
  }
  .right {
    background-color: #2c3e50;
    width: 100px;
    margin-left: -100px;
  }
}

区别
：一个是margin 一个padding

（二）上下高度固定，中间自适应

 <div class="common">
      <div class="header">1</div>
      <div class="body">123</div>
      <div class="foot">4</div>
    </div>

.common {
  width: 500px;
  height: 300px;
  background-color: yellow;
  position: relative;
  .header,
  .foot {
    position: absolute;
    height: 50px;
    background-color: red;
    width: 100%;
  }
  .header {
    top: 0;
  }
  .foot {
    bottom: 0;
  }
  .body {
    height: 100%;
    background-color: #42b983;
    box-sizing: border-box;
    padding: 50px 0;
  }
}

走的 padding 来实现隔离距离

（三）垂直剧中

   <h3>垂直剧中</h3>
    <div class="ucenter">
      <h4>relative 方法</h4>
      <div class="u-relative">
        <div></div>
      </div>

      <h4>absolute 方法</h4>
      <div class="u-absolute">
        <div></div>
      </div>
    </div>
==================CSS====
.ucenter {
  width: 500px;
  height: 500px;
  overflow: auto;
  .u-relative {
    width: 100px;
    height: 100px;
    background-color: #2c3e50;
    div {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-color: #42b983;
      transform: translateY(-50%);
      position: relative;
      top: 50%;
    }
  }

  .u-absolute {
    width: 100px;
    height: 100px;
    background-color: #2c3e50;
    position: relative;
    div {
      width: 40px;
      height: 40px;
      background-color: #42b983;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

flex 布局 操作 更简单，暂不吹 ，有兴趣的可以去看看

CSS 常见问题

（一）CSS优先级算法如何计算

参考：https://www.cnblogs.com/wangmeijian/p/4207433.html

• 选择器的特殊性值表述为4个部分，用 0,0,0,0 表示。

• ID选择器的特殊性值 0,1,0,0

• 类选择器、属性选择器或伪类 0,0,1,0

• 元素和伪元素 0,0,0,1

• 通配选择器*对特殊性没有贡献 0,0,0,0

a{color: yellow;} /*特殊性值：0,0,0,1*/
div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
#demo a{color: orange;} /*特殊性值：0,1,0,1*/
div#demo a{color: red;} /*特殊性值：0,1,0,2*/



<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
    <input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高-->
    <a href="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高-->
</div>
<div id="demo">
    <a href="">第四条应该是红色</a><!--适用第6、7行规则，第7行优先级高-->
</div>

（二）src与href的区别

• href是引用和页面关联，是在当前元素和引用资源之间建立联系
• src表示引用资源，表示替换当前元素

href 不会阻止文档解析 ，script 会阻止 ，这就是 为什么js 放在 body下面的原因

（三）box-sizing 盒子模型

• 标准盒子模型 ：content-box —总宽度=margin+border+padding+width
• IE盒子模型：border-box —总宽度=margin+width

（四）清除浮动

clear:both;

add 一个div  加  clear:both;
伪类 :after  加  
::after{
    /*只需要给浮动元素的父容器添加上这个类就可以了: clear_float*/
    display: block;/*把::after设置成块级元素*/
    content: "";/*想让伪类起作用, 必须添加这个属性*/
    clear: both;
}

（五）块级元素、行内元素

• 块级元素

div p hr ul form h1-h6 li 等

• 行内元素

a span i text label 等

（六）CSS3有哪些新特性

• rgba
• word-wrap
• box-shadow text-shadow
• border-radius
• 媒体查询 等

（七）margin 折叠

参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin

• 同级元素 选择 最大边距值
• 由父级别元素

.box-margin {
  width: 500px;
  height: 300px;
  background-color: bisque;
  .step-item {
    width: 100%;
    height: 40px;
    &:first-child {
      margin-bottom: 40px;
      background-color: #42b983;
    }
    &:last-child {
      margin-top: 100px;
      background-color: red;

      .step-self {
        margin-top: 30px;
        width: 100%;
        height: 10px;
        background-color: darkgreen;
      }
    }
  }
}

<div class="box-margin">
      <div class="step-item"></div>
      <div class="step-item">
        <div class="step-self"></div>
      </div>
    </div>

• 没有内容将父元素和后代元素分开/空的块级元素