css 圣杯布局/双飞翼布局 和选择器/deep/

以下代码在线调试工具推荐：菜鸟

圣杯布局和双飞翼布局：为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

• 两侧宽度固定，中间宽度自适应
• 中间部分在DOM结构上优先，以便先行渲染
• 允许三列中的任意一列成为最高列
• 只需要使用一个额外的<div>标签

圣杯布局

实现方式：浮动（float）+定位（position）+负外边距（negative margin）+预留左右侧空间+页面最小宽度

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

body {
  min-width: 550px;
}

div{
  height:100px;
}

#container {
  padding-left: 200px; 
  padding-right: 150px;
  background:blue
}

#container .column {
  float: left;
}

#center {
  width: 100%;
  background:black
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
  background:red
}

#right {
  width: 150px; 
  margin-right: -150px; 
  background: green
}

#footer {
  clear: both;
}

双飞翼布局

实现方式：与圣杯布局相同的思路，设置宽度与浮动，并预留出左右空间。

<div id="container" class="column">
  <div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>

body {
  min-width: 500px;
}

div{
  height: 100px
}

#container {
  width: 100%;
}

.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
  background: green
}
        
#left {
  width: 200px; 
  margin-left: -100%;
  background: red
}
        
#right {
  width: 150px; 
  margin-left: -150px;
  background: blue
}
        

双飞翼布局没有用到position:relative进行定位

flex

<div id="container">
  <div id="center"></div>
  <div id="left"></div>
  <div id="right"></div>
</div>

#container {
    display: flex;
}
div{
  height:100px
}

#center {
    flex: 1;
  background: green
}

#left {
    flex: 0 0 200px;
    order: -1;
  background: red
}

#right {
    flex: 0 0 150px;
  background: blue
}

/deep/

vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的，如果想让某些样式对所以子组件都生效，可以使用 /deep/ 深度选择器。

<-- less语法 -->
.wrap{  
    /deep/ .el-dialog__header {        
        padding: 0;        
        position: relative;
       //没有必要写多层deep 父类有deep后子类自动也会深度选择 并且这么写在firfox里会失效    
    }
}