• 浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個(gè)浮動框的邊框?yàn)橹?。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上

介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

• 盒子模型構(gòu)成：內(nèi)容(content)、內(nèi)填充(padding)、 邊框(border)、外邊距(margin)
• IE8及其以下版本瀏覽器，未聲明 DOCTYPE，內(nèi)容寬高會包含內(nèi)填充和邊框，稱為怪異盒模型(IE盒模型)
• 標(biāo)準(zhǔn)(W3C)盒模型：元素寬度 = width + padding + border + margin
• 怪異(IE)盒模型：元素寬度 = width + margin
• 標(biāo)準(zhǔn)瀏覽器通過設(shè)置 css3 的 box-sizing: border-box 屬性，觸發(fā)“怪異模式”解析計(jì)算寬高

box-sizing 常用的屬性有哪些？分別有什么作用？

• box-sizing: content-box; // 默認(rèn)的標(biāo)準(zhǔn)(W3C)盒模型元素效果
• box-sizing: border-box; // 觸發(fā)怪異(IE)盒模型元素的效果
• box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

CSS選擇器有哪些？

• id選擇器 #id
• 類選擇器 .class
• 標(biāo)簽選擇器 div, h1, p
• 相鄰選擇器 h1 + p
• 子選擇器 ul > li
• 后代選擇器 li a
• 通配符選擇器 *
• 屬性選擇器 a[rel='external']
• 偽類選擇器 a:hover, li:nth-child

CSS哪些屬性可以繼承？哪些屬性不可以繼承？

• 可以繼承的樣式：font-size、font-family、color、list-style、cursor
• 不可繼承的樣式：width、height、border、padding、margin、background

CSS如何計(jì)算選擇器優(yōu)先？

• 相同權(quán)重，定義最近者為準(zhǔn)：行內(nèi)樣式 > 內(nèi)部樣式 > 外部樣式
• 含外部載入樣式時(shí)，后載入樣式覆蓋其前面的載入的樣式和內(nèi)部樣式
• 選擇器優(yōu)先級: 行內(nèi)樣式[1000] > id[100] > class[10] > Tag[1]
• 在同一組屬性設(shè)置中，!important 優(yōu)先級最高，高于行內(nèi)樣式

CSS3新增偽類有哪些？

• :root 選擇文檔的根元素，等同于 html 元素

• :empty 選擇沒有子元素的元素

• :target 選取當(dāng)前活動的目標(biāo)元素

• :not(selector) 選擇除 selector 元素意外的元素

• :enabled 選擇可用的表單元素

• :disabled 選擇禁用的表單元素

• :checked 選擇被選中的表單元素

• :after 在元素內(nèi)部最前添加內(nèi)容

• :before 在元素內(nèi)部最后添加內(nèi)容

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

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

• :nth-child(odd)

• :nth-child(even)

• :nth-child(3n+1)

• :first-child

• :last-child

• :only-child

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

• :nth-last-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第n，從后向前數(shù)

• :nth-of-type(odd)

• :nth-of-type(even)

• :nth-of-type(3n+1)

• :first-of-type

• :last-of-type

• :only-of-type

• ::selection 選擇被用戶選取的元素部分

• :first-line 選擇元素中的第一行

• :first-letter 選擇元素中的第一個(gè)字符

請列舉幾種隱藏元素的方法

• visibility: hidden; 這個(gè)屬性只是簡單的隱藏某個(gè)元素，但是元素占用的空間任然存在
• opacity: 0; CSS3屬性，設(shè)置0可以使一個(gè)元素完全透明
• position: absolute; 設(shè)置一個(gè)很大的 left 負(fù)值定位，使元素定位在可見區(qū)域之外
• display: none; 元素會變得不可見，并且不會再占用文檔的空間。
• transform: scale(0); 將一個(gè)元素設(shè)置為縮放無限小，元素將不可見，元素原來所在的位置將被保留
• <div hidden="hidden"> HTML5屬性,效果和display:none;相同，但這個(gè)屬性用于記錄一個(gè)元素的狀態(tài)
• height: 0; 將元素高度設(shè)為 0 ，并消除邊框
• filter: blur(0); CSS3屬性，將一個(gè)元素的模糊度設(shè)置為0，從而使這個(gè)元素“消失”在頁面中

rgba() 和 opacity 的透明效果有什么不同？

• opacity 作用于元素以及元素內(nèi)的所有內(nèi)容（包括文字）的透明度
• rgba() 只作用于元素自身的顏色或其背景色，子元素不會繼承透明效果

css 屬性 content 有什么作用？

• content 屬性專門應(yīng)用在 before/after 偽元素上，用于插入額外內(nèi)容或樣式

CSS3有哪些新特性？

• 新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
• 彈性盒模型 display: flex;
• 多列布局 column-count: 5;
• 媒體查詢 @media (max-width: 480px) {.box: {column-count: 1;}}
• 個(gè)性化字體 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
• 顏色透明度 color: rgba(255, 0, 0, 0.75);
• 圓角 border-radius: 5px;
• 漸變 background:linear-gradient(red, green, blue);
• 陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
• 倒影 box-reflect: below 2px;
• 文字裝飾 text-stroke-color: red;
• 文字溢出 text-overflow:ellipsis;
• 背景效果 background-size: 100px 100px;
• 邊框效果 border-image:url(bt_blue.png) 0 10;
• 轉(zhuǎn)換
  • 旋轉(zhuǎn) transform: rotate(20deg);
  • 傾斜 transform: skew(150deg, -10deg);
  • 位移 transform: translate(20px, 20px);
  • 縮放 transform: scale(.5);
• 平滑過渡 transition: all .3s ease-in .1s;
• 動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

請解釋一下 CSS3 的 Flexbox（彈性盒布局模型）以及適用場景？

• Flexbox 用于不同尺寸屏幕中創(chuàng)建可自動擴(kuò)展和收縮布局

經(jīng)常遇到的瀏覽器的JS兼容性有哪些？解決方法是什么？

• 當(dāng)前樣式：getComputedStyle(el, null) VS el.currentStyle
• 事件對象：e VS window.event
• 鼠標(biāo)坐標(biāo)：e.pageX, e.pageY VS window.event.x, window.event.y
• 按鍵碼：e.which VS event.keyCode
• 文本節(jié)點(diǎn)：el.textContent VS el.innerText

li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

• li排列受到中間空白(回車/空格)等的影響，因?yàn)榭瞻滓矊儆谧址?，會被?yīng)用樣式占據(jù)空間，產(chǎn)生間隔
• 解決辦法：在ul設(shè)置設(shè)置font-size=0,在li上設(shè)置需要的文字大小

什么是外邊距重疊？ 重疊的結(jié)果是什么？

• 外邊距重疊就是 margin-collapse

• 相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。
  這種合并外邊距的方式被稱為折疊，結(jié)合而成的外邊距稱為折疊外邊距

• 折疊結(jié)果遵循下列計(jì)算規(guī)則：

  • 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值
  • 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對值的較大值
  • 兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和

請寫出多種等高布局

• 在列的父元素上使用這個(gè)背景圖進(jìn)行Y軸的鋪放，從而實(shí)現(xiàn)一種等高列的假像
• 模仿表格布局等高列效果：兼容性不好，在ie6-7無法正常運(yùn)行
• css3 flexbox 布局： .container{display: flex; align-items: stretch;}

css垂直居中的方法有哪些？

• 如果是單行文本, line-height 設(shè)置成和 height 值

.vertical {
      height: 100px;
      line-height: 100px;
    }

• 已知高度的塊級子元素，采用絕對定位和負(fù)邊距

.container {
  position: relative;
}
.vertical {
  height: 300px;  /*子元素高度*/
  position: absolute;
  top:50%;  /*父元素高度50%*/
  margin-top: -150px; /*自身高度一半*/
}

• 未知高度的塊級父子元素居中，模擬表格布局
• 缺點(diǎn)：IE67不兼容，父級 overflow：hidden 失效

.container {
      display: table;
    }
    .content {
      display: table-cell;
      vertical-align: middle;
    }

• 新增 inline-block 兄弟元素，設(shè)置 vertical-align
  • 缺點(diǎn)：需要增加額外標(biāo)簽，IE67不兼容

.container {
  height: 100%;/*定義父級高度，作為參考*/
}
.extra .vertical{
  display: inline-block;  /*行內(nèi)塊顯示*/
  vertical-align: middle; /*垂直居中*/
}
.extra {
  height: 100%; /*設(shè)置新增元素高度為100%*/
}

• 絕對定位配合 CSS3 位移

.vertical {
  position: absolute;
  top:50%;  /*父元素高度50%*/
  transform:translateY(-50%, -50%);
}

• CSS3彈性盒模型

.container {
  display:flex;
  justify-content: center; /*子元素水平居中*/
  align-items: center; /*子元素垂直居中*/
}

圣杯布局的實(shí)現(xiàn)原理？

• 要求：三列布局；中間主體內(nèi)容前置，且寬度自適應(yīng)；兩邊內(nèi)容定寬
  • 好處：重要的內(nèi)容放在文檔流前面可以優(yōu)先渲染
  • 原理：利用相對定位、浮動、負(fù)邊距布局，而不添加額外標(biāo)簽

  .container {
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
      float: left;
      width: 100%;
  }
  .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }

什么是雙飛翼布局？實(shí)現(xiàn)原理？

• 雙飛翼布局：對圣杯布局（使用相對定位，對以后布局有局限性）的改進(jìn)，消除相對定位布局
• 原理：主體元素上設(shè)置左右邊距，預(yù)留兩翼位置。左右兩欄使用浮動和負(fù)邊距歸位，消除相對定位。

.container {
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    /*position:relative;*/
    /*right:-190px;*/
}

在CSS樣式中常使用 px、em 在表現(xiàn)上有什么區(qū)別？

• px 相對于顯示器屏幕分辨率，無法用瀏覽器字體放大功能
• em 值并不是固定的，會繼承父級的字體大?。?em = 像素值 / 父級font-size

為什么要初始化CSS樣式？

• 不同瀏覽器對有些標(biāo)簽樣式的默認(rèn)值解析不同
• 不初始化CSS會造成各現(xiàn)瀏覽器之間的頁面顯示差異
• 可以使用 reset.css 或 Normalize.css 做 CSS 初始化

解釋下什么是浮動和它的工作原理？

• 非IE瀏覽器下，容器不設(shè)高度且子元素浮動時(shí)，容器高度不能被內(nèi)容撐開。
  此時(shí)，內(nèi)容會溢出到容器外面而影響布局。這種現(xiàn)象被稱為浮動（溢出）。
• 工作原理：
  • 浮動元素脫離文檔流，不占據(jù)空間（引起“高度塌陷”現(xiàn)象）
  • 浮動元素碰到包含它的邊框或者其他浮動元素的邊框停留

浮動元素引起的問題？

• 父元素的高度無法被撐開，影響與父元素同級的元素
• 與浮動元素同級的非浮動元素會跟隨其后

列舉幾種清除浮動的方式？

• 添加額外標(biāo)簽，例如 <div style="clear:both"></div>
• 使用 br 標(biāo)簽和其自身的 clear 屬性，例如 <br clear="all" />
• 父元素設(shè)置 overflow：hidden; 在IE6中還需要觸發(fā) hasLayout，例如zoom：1;
• 父元素也設(shè)置浮動
• 使用 :after 偽元素。由于IE6-7不支持 :after，使用 zoom:1 觸發(fā) hasLayout

清除浮動最佳實(shí)踐（after偽元素閉合浮動）：

.clearfix:after{
    content: "\200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

什么是 FOUC(Flash of Unstyled Content)？ 如何來避免 FOUC？

• 當(dāng)使用 @import 導(dǎo)入 CSS 時(shí)，會導(dǎo)致某些頁面在 IE 出現(xiàn)奇怪的現(xiàn)象：
  沒有樣式的頁面內(nèi)容顯示瞬間閃爍，這種現(xiàn)象稱為“文檔樣式短暫失效”，簡稱為FOUC
• 產(chǎn)生原因：當(dāng)樣式表晚于結(jié)構(gòu)性html加載時(shí)，加載到此樣式表時(shí)，頁面將停止之前的渲染。
• 等待此樣式表被下載和解析后，再重新渲染頁面，期間導(dǎo)致短暫的花屏現(xiàn)象。
• 解決方法：使用 link 標(biāo)簽將樣式表放在文檔 head

介紹使用過的 CSS 預(yù)處理器？

• CSS 預(yù)處理器基本思想：為 CSS 增加了一些編程的特性（變量、邏輯判斷、函數(shù)等）
• 開發(fā)者使用這種語言進(jìn)行進(jìn)行 Web 頁面樣式設(shè)計(jì)，再編譯成正常的 CSS 文件使用
• 使用 CSS 預(yù)處理器，可以使 CSS 更加簡潔、適應(yīng)性更強(qiáng)、可讀性更佳，無需考慮兼容性
• 最常用的 CSS 預(yù)處理器語言包括：Sass（SCSS）和 LESS

CSS優(yōu)化、提高性能的方法有哪些？

• 多個(gè)css合并，盡量減少HTTP請求
• 將css文件放在頁面最上面
• 移除空的css規(guī)則
• 避免使用CSS表達(dá)式
• 選擇器優(yōu)化嵌套，盡量避免層級過深
• 充分利用css繼承屬性，減少代碼量
• 抽象提取公共樣式，減少代碼量
• 屬性值為0時(shí)，不加單位
• 屬性值為小于1的小數(shù)時(shí)，省略小數(shù)點(diǎn)前面的0
• css雪碧圖

瀏覽器是怎樣解析CSS選擇器的？

• 瀏覽器解析 CSS 選擇器的方式是從右到左

在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？

• 在網(wǎng)頁中的應(yīng)該使用“偶數(shù)”字體：
  • 偶數(shù)字號相對更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系
  • 使用奇數(shù)號字體時(shí)文本段落無法對齊
  • 宋體的中文網(wǎng)頁排布中使用最多的就是 12 和 14

margin和padding分別適合什么場景使用？

• 需要在border外側(cè)添加空白，且空白處不需要背景（色）時(shí)，使用 margin
• 需要在border內(nèi)測添加空白，且空白處需要背景（色）時(shí)，使用 padding

抽離樣式模塊怎么寫，說出思路？

• CSS可以拆分成2部分：公共CSS 和 業(yè)務(wù)CSS：
  • 網(wǎng)站的配色，字體，交互提取出為公共CSS。這部分CSS命名不應(yīng)涉及具體的業(yè)務(wù)
  • 對于業(yè)務(wù)CSS，需要有統(tǒng)一的命名，使用公用的前綴?？梢詤⒖济嫦?qū)ο蟮腃SS

元素豎向的百分比設(shè)定是相對于容器的高度嗎？

• 元素豎向的百分比設(shè)定是相對于容器的寬度，而不是高度

全屏滾動的原理是什么？ 用到了CSS的那些屬性？

• 原理類似圖片輪播原理，超出隱藏部分，滾動時(shí)顯示
• 可能用到的CSS屬性：overflow:hidden; transform:translate(100%, 100%); display:none;

什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE？

• 響應(yīng)式設(shè)計(jì)就是網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定的版本
• 基本原理是利用CSS3媒體查詢，為不同尺寸的設(shè)備適配不同樣式
• 對于低版本的IE，可采用JS獲取屏幕寬度，然后通過resize方法來實(shí)現(xiàn)兼容：

$(window).resize(function () {
  screenRespond();
});
screenRespond();
function screenRespond(){
var screenWidth = $(window).width();
if(screenWidth <= 1800){
  $("body").attr("class", "w1800");
}
if(screenWidth <= 1400){
  $("body").attr("class", "w1400");
}
if(screenWidth > 1800){
  $("body").attr("class", "");
}
}

什么是視差滾動效果，如何給每頁做不同的動畫？

• 視差滾動是指多層背景以不同的速度移動，形成立體的運(yùn)動效果，具有非常出色的視覺體驗(yàn)

• 一般把網(wǎng)頁解剖為：背景層、內(nèi)容層和懸浮層。當(dāng)滾動鼠標(biāo)滾輪時(shí)，各圖層以不同速度移動，形成視差的

• 實(shí)現(xiàn)原理

  • 以 “頁面滾動條” 作為 “視差動畫進(jìn)度條”
  • 以 “滾輪刻度” 當(dāng)作 “動畫幀度” 去播放動畫的
  • 監(jiān)聽 mousewheel 事件，事件被觸發(fā)即播放動畫，實(shí)現(xiàn)“翻頁”效果

a標(biāo)簽上四個(gè)偽類的執(zhí)行順序是怎么樣的？

link > visited > hover > active

• L-V-H-A love hate 用喜歡和討厭兩個(gè)詞來方便記憶

偽元素和偽類的區(qū)別和作用？

• 偽元素 -- 在內(nèi)容元素的前后插入額外的元素或樣式，但是這些元素實(shí)際上并不在文檔中生成。
• 它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱為“偽”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

• 偽類 -- 將特殊的效果添加到特定選擇器上。它是已有元素上添加類別的，不會產(chǎn)生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

::before 和 :after 中雙冒號和單冒號有什么區(qū)別？

• 在 CSS 中偽類一直用 : 表示，如 :hover, :active 等
• 偽元素在CSS1中已存在，當(dāng)時(shí)語法是用 : 表示，如 :before 和 :after
• 后來在CSS3中修訂，偽元素用 :: 表示，如 ::before 和 ::after，以此區(qū)分偽元素和偽類
• 由于低版本IE對雙冒號不兼容，開發(fā)者為了兼容性各瀏覽器，繼續(xù)使使用 :after 這種老語法表示偽元素
• 綜上所述：::before 是 CSS3 中寫偽元素的新語法； :after 是 CSS1 中存在的、兼容IE的老語法

如何修改Chrome記住密碼后自動填充表單的黃色背景？

• 產(chǎn)生原因：由于Chrome默認(rèn)會給自動填充的input表單加上 input:-webkit-autofill 私有屬性造成的
• 解決方案1：在form標(biāo)簽上直接關(guān)閉了表單的自動填充：autocomplete="off"
• 解決方案2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右側(cè)小圖標(biāo)如何美化？

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}

網(wǎng)站圖片文件，如何點(diǎn)擊下載？而非點(diǎn)擊預(yù)覽？

<a href="logo.jpg" download>下載</a>
<a href="logo.jpg" download="網(wǎng)站LOGO" >下載</a>

iOS safari 如何阻止“橡皮筋效果”？

  $(document).ready(function(){
      var stopScrolling = function(event) {
          event.preventDefault();
      }
      document.addEventListener('touchstart', stopScrolling, false);
      document.addEventListener('touchmove', stopScrolling, false);
  });

你對 line-height 是如何理解的？

• line-height 指一行字的高度，包含了字間距，實(shí)際上是下一行基線到上一行基線距離
• 如果一個(gè)標(biāo)簽沒有定義 height 屬性，那么其最終表現(xiàn)的高度是由 line-height 決定的
• 一個(gè)容器沒有設(shè)置高度，那么撐開容器高度的是 line-height 而不是容器內(nèi)的文字內(nèi)容
• 把 line-height 值設(shè)置為 height 一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中
• line-height 和 height 都能撐開一個(gè)高度，height 會觸發(fā) haslayout，而 line-height 不會

line-height 三種賦值方式有何區(qū)別？（帶單位、純數(shù)字、百分比）

• 帶單位：px 是固定值，而 em 會參考父元素 font-size 值計(jì)算自身的行高
• 純數(shù)字：會把比例傳遞給后代。例如，父級行高為 1.5，子元素字體為 18px，則子元素行高為 1.5 * 18 = 27px
• 百分比：將計(jì)算后的值傳遞給后代

設(shè)置元素浮動后，該元素的 display 值會如何變化？

• 設(shè)置元素浮動后，該元素的 display 值自動變成 block

怎么讓Chrome支持小于12px 的文字？

  .shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

讓頁面里的字體變清晰，變細(xì)用CSS怎么做？（IOS手機(jī)瀏覽器字體齒輪設(shè)置）

  -webkit-font-smoothing: antialiased;

font-style 屬性 oblique 是什么意思？

• font-style: oblique; 使沒有 italic 屬性的文字實(shí)現(xiàn)傾斜

如果需要手動寫動畫，你認(rèn)為最小時(shí)間間隔是多久？

• 16.7ms 多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔: 1s / 60 * 1000 ＝ 16.7ms

display:inline-block 什么時(shí)候會顯示間隙？

• 相鄰的 inline-block 元素之間有換行或空格分隔的情況下會產(chǎn)生間距
• 非 inline-block 水平元素設(shè)置為 inline-block 也會有水平間距
• 可以借助 vertical-align:top; 消除垂直間隙
• 可以在父級加 font-size：0; 在子元素里設(shè)置需要的字體大小，消除垂直間隙
• 把 li 標(biāo)簽寫到同一行可以消除垂直間隙，但代碼可讀性差

overflow: scroll 時(shí)不能平滑滾動的問題怎么處理？

• 監(jiān)聽滾輪事件，然后滾動到一定距離時(shí)用 jquery 的 animate 實(shí)現(xiàn)平滑效果。

一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度

• 方案1：
  .sub { height: calc(100%-100px); }
• 方案2：
  .container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; }
• 方案3：
  .container { display:flex; flex-direction:column; }
.sub { flex:1; }