HTML面試題
? ? ·如何理解HTML語義化
? ??????HTML結(jié)構(gòu)語義化奏夫，是最近幾年才提出來的薛匪，以前的html結(jié)構(gòu)，都是一堆沒有語義的冷冰冰的標(biāo)簽钻洒。最泛濫的就是div+css奋姿，以前的頁面，一打開就是一堆div+css素标，為了改變這種這種狀況称诗，開發(fā)者們和官方提出了讓HTML結(jié)構(gòu)語義化的概念，并且官方w3c头遭，也在HTML5給出了幾個新的語義化的標(biāo)簽寓免。
? ? ·默認(rèn)情況下，哪些HTML標(biāo)簽是塊級元素计维，哪些是內(nèi)聯(lián)元素
????????display:block/table;div袜香、h1、table享潜、ul困鸥、ol、p等
????????display:inline/inline-block;有span、img 疾就、input澜术、button等
CSS面試題
? ? 分析知識模塊
? ? ? ? · 布局
? ? ? ? ? ? 1.盒模型的寬度如何計算？
? ? ? ? · offsetWidth = （內(nèi)容寬度 + 內(nèi)邊距 + 邊框）無外邊框
? ? ? ? 該盒子的寬度為 122px
????????2.margin縱向重疊的問題
????????????相鄰元素的 margin-top 和 margin-bottom 會發(fā)生重疊（包括空標(biāo)簽的內(nèi)容也會重疊）
????????????3.margin負(fù)值的問題
? ? ? ? ? ? ? ? 對margin的top left right bottom設(shè)置負(fù)值猬腰，有何效果
? ??????????????????1鸟废、margin-top 和 margin-left 負(fù)值，元素向上姑荷、向左移動
????????????????????2盒延、margin-right 負(fù)值，右側(cè)元素左移鼠冕，自身不受影響
????????????????????3添寺、margin-bottom負(fù)值，下方元素上移懈费，自身不受影響
? ? ? ? ? ? 4.BFC的理解和運用
? ??????????????BFC是：Block format context计露，塊級格式化上下文，它是一塊獨立渲染區(qū)域憎乙，內(nèi)部元? ? ? ? ? ? ? ? ? 素的渲染不會影響邊界以外的元素
????????????????形成BFC的常見條件：??
????????????????????????????????????????????????????1票罐、float 不是 none；
????????????????????????????????????????????????????2泞边、position 是 absolute 或 fixed该押；
????????????????????????????????????????????????????3、overflow 不是 visible阵谚；
????????????????????????????????????????????????????4蚕礼、display 是 flex，inline-block 等椭蹄；
????????????????BFC 常見的應(yīng)用：清除浮動闻牡；
? ? ? ? ? ? 5.float布局的問題净赴，以及clearfix
? ? ? ? ? ? ? ? 如何實現(xiàn)圣杯布局和雙飛翼布局绳矩？
? ??????????????目的：????????????
????????????????????????????1、三欄布局玖翅，中間一欄最先加載和渲染（內(nèi)容最重要）翼馆；
????????????????????????????2、兩側(cè)內(nèi)容固定金度，中間內(nèi)容隨著寬度自適應(yīng)应媚；
????????????????????????????3、一般用于PC網(wǎng)頁猜极；
????????????????技術(shù)總結(jié)：
????????????????????????????1中姜、使用 float 布局；
????????????????????????????2、兩側(cè)使用 margin 負(fù)值丢胚，以便和中間內(nèi)容橫向重疊翩瓜；
????????????????????????????3、防止中間內(nèi)容被兩側(cè)覆蓋携龟，一個用 padding 一個用 margin兔跌；
? ? ? ? ? ? ? ? 手寫clearfix
.clearfix {
????????content: '';
????????display: table;
????????clear: both;
}
.clearfix {
????????*zoom: 1; /* 兼容 IE 低版本 */
}
? ? ? ? ? ? 6.flex布局
? ? ? ? ? ? ? ? flex實現(xiàn)一個三點的骰子
????????????????結(jié)論：將最外層的盒子設(shè)置成彈性盒子display：flex，并使它的兩端橫向?qū)R峡蟋，緊接著將第二個子元素設(shè)置align-self：center坟桅；使其垂直方向居中對齊，將第三個子元素設(shè)置align-self：flex-end蕊蝗；使其垂直方向尾對齊仅乓。
? ? ? ? · 定位
? ? ? ? ? ? ·absolute和relative分別依據(jù)什么定位
? ? ? ? ? ? ? ?????1、relative：是依據(jù)自身進行定位的蓬戚；
????????????????????2方灾、absolute：是依據(jù)最近一層的定位元素（也就是父元素）進行定位。? ?
????????????????????定位元素：absolute碌更、relative裕偿、fixed 或者直接找到 body
? ? ? ? ? ? 2.居中對齊有哪些實現(xiàn)方式
????????????????????水平居中：
????????????????????????????????????1、inline 元素：text-align：center痛单；
????????????????????????????????????2嘿棘、block 元素：margin：auto；
????????????????????????????????????3旭绒、absolute 元素：left：50% + margin-left 負(fù)值鸟妙；
????????????????????垂直居中：
????????????????????????????????????1、inline 元素：line-height 的值等于height的值挥吵；
????????????????????????????????????2重父、absolute 元素：top：50% + margin-top 負(fù)值；（用這種方法必須得知道子元素的尺寸）
????????????????????????????????????3忽匈、absolute 元素：transform（-50%房午，-50%）；
????????????????????????????????????4丹允、absolute 元素：top郭厌，left，bottom雕蔽，right = 0折柠、margin：auto；
? ? ? ? · 圖文樣式
? ? ? ? ? ? ·line-height的繼承問題
????????????????1批狐、當(dāng) line-height 為具體數(shù)值時扇售，如 line-height????：30px；則繼承該值
????????????????2、當(dāng) line-height 為比例時承冰，如 line-height：2 / 1.5嘱根，則繼承該比例
? ? ? ? ? ? ? ? 3、當(dāng) line-height 為百分比時巷懈，如 line-height：200%该抒，則繼承計算出來的值
? ? ? ? · 響應(yīng)式
? ? ? ? ? ? 1.rem是什么？
????????????????rem是相對長度單位顶燕，相對于根元素進行設(shè)置大小的凑保，常用于響應(yīng)式布局
? ? ? ? ? ? 2.如何實現(xiàn)響應(yīng)式
????????????????????1、media-query涌攻，根據(jù)不同的屏幕寬度設(shè)置根元素 font-size
????????????????????2欧引、rem，基于根元素的相對單位
? ? ? ? · CSS3
? ? ? ? ? ? 1.關(guān)于CSS3動畫
